responsive-logos-guide

In some cases, to have a fully responsive website, simply reducing the size of logo and other components for small resolutions, isn’t enough. For rectangular logos with a few details that’s fine, but for other cases you need another approach. That’s why, Jeremy Frank – a talented front-end developer from viget, explained how to build, adapt and work with responsive logos. Here are his tips and tricks:

1. Follow the style guides

Usually, a reputable brand has a a well designed logo and a comprehensive style guide. There you will find everything you need: logo variations (horizontal/vertical, short/tall, with/without marks), branding guidelines, specifications, etc.

univ-Pennsylvania-logojpg

Example: University of Pennsylvania

The small version of their logo has the logotype removed and the mark expanded (style guide here). This makes the logo clear and more legible on smaller resolutions.

See the Pen Responsive Logo – University of Pennsylvania by designhooks (@designhooks) on CodePen.

2. Reduce the level of detail

If you have a highly detailed logo you can always optimize it and reduce the level of details for small resolutions. Use this technique to a achieve a greater legibility of your logo on small sizes.

argento logo

Example: Argento Wine

The Argento logo style guide has a nice illustration of various logos in different sizes. For each smaller size of their logo, the level of details is gradually reduced. Good job Argento!

See the Pen Responsive Logo – Argento Wine by designhooks (@designhooks) on CodePen.

3. Stacked & horizontal technique

This is probably one of the most used and simple techniques for adapting a logo for various sizes.

Case-Mate-logo

Example: Case-Mate

The mark is moved from above the logotype to the side and on the smallest size the “Case Mate” type disappears.

See the Pen Responsive Logo – Case Mate by designhooks (@designhooks) on CodePen.

4. Incremental subtraction

For logos with a lot of type, you can gradually remove it for smaller resolutions. In this way you will keep the legibility and brand recognition.

responsive-logos-guide

Example: NOAA

National Oceanic and Atmospheric Administration (NOAA) logo has a lot of text around its graphical emblem. For smaller sizes its subtracted and the brand recognition is maintained.

See the Pen Responsive Logo – NOAA by designhooks (@designhooks) on CodePen.

The bottom line

To have a fully responsive logo you have to implement flexible solutions. You can achieve that by following the advices of Jeremy Frank in his series of dedicated articles here (part 1) and here (part 2). Hope to see more in the near future!

1 thought on “The ultimate guide for building truly responsive logos

  1. This is Awesome, I work with responsive layouts but never think that we will make it easier for the clients and the layouts.

    Thanks, hope if i get a job and I can share this in the company.

Leave a Reply

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

You may also like