The Magnetic State Blog Dept.

The blog at Brooklyn web design studio Magnetic State.

  • Our Work
  • Best of the Blog
    • This Major Athletics Brand Needs a Redesign
    • Why You Need a Responsive Website
    • Interpreting Banksy’s ‘Evil’ Painting
    • Are There Breasts in the McDonald’s Logo?
  • Featured Design
    • Responsive Feature Article for Men’s Health Magazine
    • Responsive Website for Coldfront Magazine
    • Logo Design: Men’s Health Next Top Trainer
    • EverPower Corporate Reports
  • SPY APP
  • Contact Us

The Mobile-First Approach to Branding

December 2, 2015 by Dan Redding 1 Comment

mobile first 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.

mobile navigation menu

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.

mobile branding

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).

mobile first branding

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!

Related Posts:

  • Transcending Language with BrandingTranscending Language with Branding
  • Happy Birthday to the Device that Changed EverythingHappy Birthday to the Device that Changed Everything
  • What is Responsive Web Design?What is Responsive Web Design?
  • Case Study: Branding a Breast Cancer NonprofitCase Study: Branding a Breast Cancer Nonprofit

Filed Under: Branding, Graphic Design, Responsive Design

Work with Dan

Do you need a website or logo design? Check out my portfolio and drop me a line to discuss!

Comments

  1. rashimagarment says

    February 14, 2016 at 10:57 pm

    Great post. I was checking continuously this blog and I am impressed!
    Extremely useful info particularly the last part ? I care for
    such information a lot. I was looking for this certain info for a very
    long time. Thank you and best of luck.

Leave a Reply Cancel reply

Your email address will not be published. Required fields are marked *

ADVERTISEMENT

About

Magnetic State is a design studio powered by Dan Redding. We create websites, brand identity, and print design. Wanna work together? Send Dan an email.

Featured Articles

These Emojis Have Truly Surprising Cultural Origins

These Emojis Have Truly Surprising Cultural Origins

Donald Trump Presidential Campaign Logos

Donald Trump Presidential Campaign Logos

Here’s Why Richard Prince’s Instagram Portraits are Brilliant – and Misunderstood

Here’s Why Richard Prince’s Instagram Portraits are Brilliant – and Misunderstood

14 Weird Logos in the U.S. Trademark Registry

14 Weird Logos in the U.S. Trademark Registry

Visit Culture Creature!

Culture Creature is the magazine for music fiends. Visit CultureCreature.com!

Free Design News

Sign up for the Magnetic State newsletter! Receive important updates and tips from Magnetic State a few times a year.

Search

Categories

HYPE

Loading Quotes…

© Copyright 2015 Magnetic State. Privacy Policy