With the ever increasing importance of responsiveness in web design, there is an increasing need for responsive logo design as well. Let’s see what responsive logo designing really means.
Mobile-friendliness has taken the web by storm. Web designers are not the only ones who have to worry about developing mobile-friendly websites. Even typography and professional logo designers should be concerned about whether or not their vectors (and let’s hope they are vectors) will adapt to any and every user’s screen size.
With Google recommending everyone to create everything mobile-friendly (a.k.a. Mobilegeddon), it’s hard not to fret over how even the slightest of mistakes could label our designs “unresponsive”.
So, what is a mobile-friendly logo, you ask? We’re here to discuss just that today.
Joe Harrison’s Responsive Designs
One of the best examples of responsive icons or logos is that which was presented by Joe Harrison, a freelance designer based in London. His projects, Responsive Icons and Responsive Logos, delve deep into creating scalable and “future-proof” icons and logos, which is more in line with the modern web. He believes that the best type of icons and logos is that which finds a “perfect balance of simplicity in relation to screen size”.
Below is his example of a perfect icon that manages to maintain that balance.
This became a hot topic ever since 2014, and has now expanded even more with designers worrying about responsive, scalable, and transferable logos. Unlike the past, designers don’t have control over where the logo’s get published or pasted (digitally) and this presents a new problem – how on earth do we go about changing a logo without worrying changing the brand identity?
Here’s How To See It
The logo certainly forms a part of the brand’s identity, but it certainly not the brand’s ONLY identity. That being said, you have to stop thinking that a logo is your brand or your brand is your logo. The culture, the values, the belief system, the quality of service and plenty of other things also form a large part of the “brand”. Hence, there is no reason to worry that slightly altering your logo to meet the demands of mobile-friendliness will alter your brand identity.
Don’t be afraid to let go of certain elements in your design. Now, let’s move on to how this can be done – safely. But before we do that, let’s explore some good and bad examples.
Bad Examples
Carefully observe the logos. Do you see it? They’re barely legible! We can’t imagine how these logos would turn out, should they be any smaller.
Good Examples
We can see why Google transformed their design recently. From now on, they don’t have to worry about making the famous wordmark fitting into tiny spaces. Just like Disney’s conceptual responsive logo cleverly does with design, Google managed to make the most of their logo’s uniqueness by summing it up into one scalable and easily transferable letter. Here’s how you can do it too.
Simplify The Logo
The number one problem with non-responsive logo designs, or any design for that matter, is that they are over-complicated. Having too many elements is going to make it difficult to let go of any one particular element and trying to make it fit into a smaller space. The Olive Garden logo is a perfect example that presents this dilemma. How can we to separate the fanciful leaves from the large and beautiful word mark without doing the design injustice?
An astute logo designer would consider the need to the make any design versatile. When we’re thinking of responsiveness, however, we’re thinking about size adjustments, legibility, and quality of the design. Disney’s example above indicates how a logo can easily be simplified, without losing its identity. Although it loses the castle element, the name “Walt Disney” is enough to provoke emotions attached to the brand name. Furthermore, “Disney” is an even simpler version of the brand name. Disney gets lucky when it comes to the fact that their “D” was as distinct as it could ever be—even before the internet or things like “responsiveness” came on stage. Despite that, we can see how Google choose to act fast and transform their logo and turn what once was a simple, blue “G” into a letter that could only represent Google, attributable to the four colors.
Here are some key tips to simplifying the logo and meeting the demands of responsiveness:
- Let go of detail: Gone are the days when intricate designs, beautiful leaves, and flowers made up a logo (the old Ford logo and first-ever Apple logos are best examples of this). A simplified, versatile, and mobile friendly logo should have thicker outlines, smoothed out shapes, and filled in smaller shapes. A good way to do this is to reduce your design and see what needs to be altered or removed.
- Stack it up horizontally: Horizontal stacking makes it easier to “let go” of elements such as the wordmark or the graphical logo when required (think Disney).
- Make several versions: You can also make several versions of your logo that rid the logo of an element or two after each size reduction. Typically, this calls for removing small text first.
Conclusion
While you make your revisions, avoid thinking of this task as something you’re burdened with because of website rankings. Remember, the main goal behind responsiveness is to provide your customer’s with a better user experience. A good design translates to good user experiences. And good experiences translate to happy customers.