You know how sometimes a logo is so small, like in the browser field, that you just can’t make it out? Well, if logos were responsive — like almost all web sites are these days — that wouldn’t be a problem. As a designer who routinely creates logos for a variety of clients, I spend a lot of time crafting marks that can be used in a variety of applications. An important key element to keep in mind is how well a logo will work on web, mobile, print, social media, watches, icons, favicons and so on.
As these applications continue to grow more complex and varied, it only makes sense that logos would follow the path that web design has started in regards to responsive formatting. Some may consider this overkill, but having a logo that shines on all devices can be hugely beneficial. One of the greatest benefits of responsive logos is that it maintains its legibility at all screen sizes, without having to contend with an ultra-minimal style, even when displayed at larger sizes.
So when your company is thinking of branding or rebranding, here are a few things to consider to keep it responsive:
Logo type, logo mark or both?
It’s not unusual for brands to use either the logotype (just text) or logomark (an icon or graphic treatment that accompanies text), depending on the situation and space available. With that in mind, I’d say that responsive logos in their most basic form can be switched between a logotype, a logomark, and using both together. If the logo is using both, a logomark can replace the company name slowly over time as that company becomes more and more recognized by its customers. Together or alone, create something that is unique, simple, recognized, and remembered.
Aim for simplicity
If the logo of a company is intricate enough to pose the threat of turning into a blurry mess at smaller resolutions, it’s better to create a variation of that mark with minimal detail yet still represents the company brand.
From the largest size to the smallest size, what does that mark need to convey to hold the representation of the brand? What are the treatments in the purest form, in a vertical stacking format or on a pattern background? Is there a size constraint? Is it just the logotype or the logomark that provides the best solution? If the user doesn’t recognize the logo instantly in any format, then the logo has failed to accomplish what it set out to do.
Often times logos have to be on different types of backgrounds and in color formats. Ensure that your logo translates when it is in black and white, gray, just white or on an off brand color background.
Logos are often the first thing that new companies ask about, but they’re also the most neglected aspect of design when a brand primarily exists in the digital world. What’s important to remember that a responsive logo isn’t just an elaborate icon that sits in the top-left corner of a website, it is the one continuous touchpoint that your customers will recall when they think of your brand.
In the example below, you will see that the logo is simplified as it is reduced, yet as a designer, I now have options in what I would like to use when designing the different touchpoints for that brand. Maybe I will use the logo in full on a tradeshow booth, but use just the mark as an emblem on a baseball cap or as the full logo on the mobile view of the site or mobile app icon.
So, is your logo responsive? Does your branding have options yet still stray true to your company mark? Give me a shout if you would like to learn more.