With the rapid evolution of mobile devices, a variety of screen sizes and, consequently, responsive websites an essential question has raised: what should logos be and do they have the privilege to stay intact while the rest of web elements change their nature. And if yes, how is it possible?
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.
Even though it’s quite evident to you that a logo is not sacred and it MUST change as the technologies develop, a few years ago many creatives and companies didn’t treat that question seriously. Indeed, traditionally we have such branding canons:
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.
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!
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.