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 responsive logos.
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 logotype 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 an icon logo? 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 logotype have removed the brand name from it for the small screens.
And yet reducing a logotype 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 logotype will look awesome anywhere — but still avoid packing it full with tiny details, as in this case not smart resizing will help.
While resizing an SVG 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!