Creating a mobile-first logo: a designer’s frustration
Jun 06 2012
Imagine trying to juggle three balls. Let’s call them Simplicity, Appropriateness and Memorability. Now, picture having three more balls thrown at you, one at a time. We’ll call these Shape, Size and Versatility. You have a moment of panic that you won’t be able to keep all of them in the air, but then you get a rhythm started and everything works out.
That’s what its like for a mostly print graphic designer to create a logo for a “mobile-first” website.
I struggled with how to take the ideas that the WhichWayNC team came up with and make them not only iconic enough to brand our new project, but also appropriate for our main mode of distribution — a mobile device.
Here’s what I kept in mind while making a “mobile-first” logo:
Shape of the icon
On a mobile website, the space left for the banner can’t be too tall or the content will be pushed down too low on a mobile screen. This means that the logo can’t rely on a vertical image, unless the design of the site allows for a taller banner.
Size of text
Similarly, any text needs to be short and to the point so it can be as large as possible. Having a tagline won’t work well if it’s too long because the font size will be too small on the mobile screen. Don’t place too much weight on a detailed decorative font, because chances are you won’t be able to see the detail on the mobile phone.
Ability to shape it into social media icons or a favicon
The logo you create won’t only be used on the website. Some version of it will go on Twitter, Facebook and other social media platforms. Those other versions will need to be cropped into squares and made smaller than the size of your banner logo. They also need to have the potential to turn into other icons, like the favicon used at the top of a Web browser, which is only 16 pixels by 16 pixels.