The Mobile-First Approach to Branding

Normally, ‘mobile-first’ is a concept that applies to web design. The mobile-first approach has historically meant designing a responsive website by starting with the mobile version, then designing upwards towards desktop. This way, the concerns of the mobile experience are considered first, and applied or revised for larger viewports. It’s time to approach branding the same way.

Above: mobile navigation menus offer very limited space for logos

Logos and other branded elements have been reduced to tiny squares across the web. These environments include social media avatars, favicons, and increasingly, the sticky navigation bar on your website itself. Logos are required to communicate your brand identity in a very small space – whether it’s on a mobile device, or even in a Facebook feed on desktop. That’s why it’s time to consider small scales first when you’re designing a brand identity. Design brand iconography that works in small contexts first, then scale your concept up for larger contexts.

A successful brand identity is recognizable or legible at small sizes.

The kind of design that is best suited for these small contexts includes very simple icons, short acronyms/single letters, or very basic secondary identifiers (a simple shape or even color scheme that is integral to your visual identity). In other words, the most basic forms of human communication – icons, letters, runes, color and shape. Full wordmarks don’t often work well at small sizes (see the Amtrak and BrooklynVegan examples on this page).

The Onion’s icon is simple and memorable at this scale. Amtrak’s is blurry, tiny, and illegible.

Ironically, this is the kind of simple, concise icon & logo design that the old masters like Paul Rand and Milton Glaser excelled at. In the past decade, the trend for ‘flexible brand identity’ has moved away from this style of iconography and logo design in favor of motion, animation, and iteration. I think it’s time to reintroduce an element of classic, simple logo and icon design to modern branding.

The next time you build a brand, try starting small: design a mobile icon in a 50 pixel square before you do anything else. Start here before you approach your logo, color palette, or even your brand name. Start small and work up!