Current Issue
This Month's Issue

Follow Fast Company

We’ll come to you.

1 minute read

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?

  • <p>What would the logos of your favorite companies look like if they were responsively designed? <a href="http://responsivelogos.co.uk/" target="_blank">The Responsive Logos project</a> by Joe Harrison first takes the logos of Coca-Cola, Nike, Bang & Olufsen, Levi's, and more.</p>
  • <p>Then it turns a shrinking ray on them, showing what they would look like if they were as responsive as their websites.</p>
  • <p>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.</p>
  • <p><em>The New Yorker</em>, for example, just updated its <a href="http://www.fastcodesign.com/3033317/fast-feed/newyorkercom-gets-a-fresh-new-look" target="_self">website</a> with a responsive redesign. If you're on a desktop browser, <a href="http://www.newyorker.com/" target="_blank">open the <em>New Yorker</em> homepage</a>, and try dragging the corner of your browser window to resize it.</p>
  • <p>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.</p>
  • <p>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 <em>change</em>.</p>
  • <p>Which is what's so fun about the Responsive Logos project.</p>
  • <p>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.</p>
  • <p>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.</p>
  • <p>Like so!</p>
  • <p>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.</p>
  • <p>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.</p>
  • 01 /12

    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.

  • 02 /12

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

  • 03 /12

    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.

  • 04 /12

    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.

  • 05 /12

    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.

  • 06 /12

    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.

  • 07 /12

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

  • 08 /12

    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.

  • 09 /12

    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.

  • 10 /12

    Like so!

  • 11 /12

    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.

  • 12 /12

    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.

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.