What would the logos of your favorite companies look like if they were responsively designed? The Responsive Logos project by Joe Harrison first takes the logos of Coca-Cola, Nike, Bang & Olufsen, Levi's, and more.

Then it turns a shrinking ray on them, showing what they would look like if they were as responsive as their websites.

The idea behind responsive web design is relatively straightforward. Responsive design dictates that the layout of a website should be readjusted according to the screen it is being viewed on. The idea here is that web design should be as readable on a 4-inch smartphone as it is on a 27-inch monitor.

The New Yorker, for example, just updated its website with a responsive redesign. If you're on a desktop browser, open the New Yorker homepage, and try dragging the corner of your browser window to resize it.

As you do so, you'll see that the design shrinks or expands along with the window, and various elements of the design change according to how big or small the window is: A sidebar might suddenly disappear, for example, if you're reading the site on a very small window.

One thing that responsive design doesn't usually change is images, like logos. They might shrink or expand to fill the screen, but they don't usually change.

Which is what's so fun about the Responsive Logos project.

Open the page and resize your browser (or, if you're on a smartphone, just rotate your device) and you'll see logos dynamically update according to the size of the screen.

The Walt Disney Pictures logo, for example, first loses its Sleeping Beauty castle, then becomes Disney, before finally shrinking down into a whimsical cursive "D" the smaller your browser window gets.

Like so!

Responsive web design isn't without its share of critics. Critics say that no matter how dynamic a design is, a single framework doesn't effectively use the space of multiple screen sizes.

But if the Responsive Logo project shows anything, it's that there is a lot of potential delight in responsive design, and it's still going largely untapped.

Co.Design

What Corporate Logos Would Look Like If You Shrank Them

Responsive web design is all the rage. What if logo design were handled the same way? Would you still recognize that Levi's sign?

What would the logos of your favorite companies look like if they were responsively designed? The Responsive Logos project by Joe Harrison first takes the logos of Coca-Cola, Nike, Bang & Olufsen, Levi's, and more. Then it turns a shrinking ray on them, showing what they would look like if they were as responsive as their websites.

The idea behind responsive web design is relatively straightforward. Responsive design dictates that the layout of a website should be readjusted according to the screen it is being viewed on. The idea here is that web design should be as readable on a four-inch smartphone as it is on a 27-inch monitor.

The New Yorker, for example, just updated its website with a responsive redesign. If you're on a desktop browser, open the New Yorker homepage, and try dragging the corner of your browser window to resize it. As you do so, you'll see that the design shrinks or expands along with the window, and various elements of the design change according to how big or small the window is: A sidebar might suddenly disappear, for example, if you're reading the site on a very small window.

One thing that responsive design doesn't usually change is images, like logos. They might shrink or expand to fill the screen, but they don't usually change.

Which is what's so fun about the Responsive Logos project. Open the page and resize your browser (or, if you're on a smartphone, just rotate your device) and you'll see logos dynamically update according to the size of the screen. The Walt Disney Pictures logo, for example, first loses its Sleeping Beauty castle, then becomes Disney, before finally shrinking down into a whimsical cursive "D" the smaller your browser window gets. The Coca-Cola logo, meanwhile, ultimately shrinks down to "Coke."

Responsive web design isn't without its share of critics, who say that no matter how dynamic a design is, a single framework doesn't effectively use the space of multiple screen sizes. But if the Responsive Logo project shows anything, it's that there is a lot of potential delight in responsive design, and it's still going largely untapped.

Add New Comment

12 Comments

  • Justin Easthall

    Crazy - the whole point of responsive website design is to remove the need to work so small. What this article should read is how would your logo look on a website that's NOT responsive...

  • wow, not even sure where to start about how wrong this article and its conception of what responsive web design actually is.

    Responsive design removes the necessity of alternate logos by allocating appropriate space in the layout for elements like the logo.

    All of the original logos shown would look perfectly fine on a responsive website because they would be given an appropriate amount of space in the layout.

    Also, good logo design already takes into account using the logo at multiple sizes while retaining legibility. Most of the logos shown already use their logo marks as elements on their own.

    Going from Nike Air logo to just the Swoosh looses all reference to the particular Nike Air brand... so yea not such a great idea.

    This is poorly thought article promoting bad design theory.

  • Hi Lakin. Thanks for your frank response to my project. Overlooking the article as a piece of writing (I had no input in this) I'd like to explain my rationale:

    The intention of responsive logos concept was to challenge traditional methods of branding in an new age of flexible and future-proof frameworks. This is not to say it is right or wrong, but aims to spark debate around what makes a brand memorable. Good design (and good brands) stands the test of time. And creating more legible solutions, in my opinion, is always good thing.

    This little experiment aims to make people rethink what brands might need to accomplish in the future. Whether you agree with the implementation or not is up to you.

  • jsdussault

    I guess the designer (and author) are too hyped on web desing to treat the age old logo declination as something new and original.

    Also, some confuse company identity and product identity (or product line). For example, There is no way the stand alone « swoosh » conveys the idea of « Nike Air » product line over that of the company itself.