I might have written hundreds of articles about the importance of a good logo. Embrace trends, best experience, unexpected discoveries. But I won’t, since there is another “!” to focus on — the phenomenon of a responsive logo.
Inspire first
Some time ago I discovered a project of Joe Harrison, an outstanding British designer, and digital experimentalist. He’s picked some well-known logos — Chanel, Nike, Heinz, Walt Disney, Levi’s and many others — to bring their alternatives for the desktop and mobile screens. Oh, I’ve spent a great hour studying how he removes details the logo can do without and works with the texts leaving the irreplaceable only.
So much inspired and impressed, I’ve done my best to embrace the essence of the responsive logo philosophy and move you closer to the trend, that’s on its way to arise and be implemented in every website.
Logo is a brand
- Brand is a logo,
- Logo is a brand,
- Logo must thoroughly follow the identity system of the brand.
But such well-known companies as Pepsi or Slack prove the contrary and regard their logo as a face of a company — a face that can be different, that can adapt to situations and backgrounds, and once it remains recognizable it’s not an immovable and inevitable stamp. They just rush at branding experiments, leaving behind the popular fear (more a superstition for me) that once they make a step aside from the model, the community will not acknowledge them anymore.
Remove the slogan and leave the logomark alone? Play with colors, effects, and textures? Remove a logo icon? That’s right about responsive logos. Just remember, no matter what you try, corporate identity should remain the same.
How to be responsive
Aiming to attain responsiveness, first and foremost you must not attach yourself to a single image you know or have. Think outside the box instead! If your logo contains many small details that can be seen on a desktop, avoid them on a mobile to keep elegance. Simplify as much as you can: colors, composition, everything!
Study thoroughly the logo for the most distinctive elements you can’t design without. Like ‘M’ which speaks for the Medium logo. Like Pepsi (again) have left the logomark alone for the mobile version. Or Kodak with their perfectly recognizable K-shaped logo have removed the brand name for small screens.
And yet reducing a logo is the most evident and, if you like, simple solution, there are still some fanciful alternatives — like experimenting with shapes and textures to lighten it visually. Or check out the experience of Google. Their ‘G’ miniature is a nice symbiosis of reducing and playing with the color palette where the brand traits are respected. There’s nothing to bind you, actually, just keep the distinctive features on the surface.
By the way, you can use SVG format, as it’s capability of being scaled is a considerable booster when you are not ready for the redesign yet. You’ll be sure your logo will look awesome anywhere — but still avoid packing it full with tiny details, as in this case resizing won’t help.
While resizing an SVG for a responsive logo, you can try deconstructing it as well. I mean you may just remove some original elements, typography, frames, shadows. This doesn’t imply compulsory redesign — simply erase everything you can do without, literally!
With their smartness and absolute digital convenience responsive logos, as I see them — and as the experience of the pioneer companies shows — will not stay just a trend the one may welcome or not. Instead, they are to become a must-have, and even if now responsive logos are a pretty rare thing, having them everywhere is a matter of time, nothing more.
Why The Designest doesn’t have a logo?
We do have one! Still should make it responsive 🙂
I think the fact that you have to point out that The Designest does, in fact, have a logo would make the case that there isn’t one. At least, not one that one can recognize. (Is it the favicon?)
This would be the equivalent of saying, that The New York Times does not have a logo either, which I do not think would be an acceptable theory.. Or is that just me? ?
My thought exactly! I just didn’t dare to compare our blog to The New York Times (yet) ?
Isn’t the custom font of “The Designest” the logo? It’s not completely responsive but I guess the Favicon can be used when a simple version of the logo is needed.
You’re right, Chris! While working on our logo, we’ve been entirely focused on the typography aspect. The part we use as Favicon or social network user-pics is only a temporary decision. To make The Designest logo responsive and usable in any case we will add a recognizable logo mark, eventually ?
Sorry, I did not learn anything interesting here.
Basically, companies use their pictogram if space gets small? This is not really news or unheard of. Pepsi would just use its orb instead of the full name. It does not need a genius or even a designer to come up with that, just a clearly recognizable imagery. Think Mercedes and its star…
And the initial logo interpretations are totally off.
– Coke still becomes illegible
– Replacing the “C” from the wordmark Chanel with the logo-icon feels so wrong and just using the inverted C’s is what Chanel does everywhere even on its necklaces…
– Nike Air is not the brand, but a product etc.
-B&O is just resizing nothing happened (yes the wordmark went away, but again, what is new about this?)
So what is responsive about it?
You’re right, Gerrit. If the one removes ‘Pepsi’ and leaves the logomark alone, it will still be recognizable thanks to the long history of the brand. Our idea is to show that today companies consider (and should consider) adapting their websites to different screen sizes, where the logo will look familiar and quality. The experience of other brands is here to illustrate the phenomenon.
As for the examples you’ve written about, they are all designed by Joe Harrison and are his vision how some logos can be adapted. It’s not real experience, just а hypothesis 🙂