Adapting Logos for the Small Screen

In elementary school when I was first taught the fundamentals of writing, my teacher stressed the importance of the five w’s… who, what, where, when and why. Little did I know then, that these same principles would stay with me for life and as a designer, could and should always be applied to my work.  When starting on a new web project we try to begin by applying these questions to the medium that the user will be interacting with (ie. desktop, phone or tablet). To please my writing teacher, we’ll call them the three screens. All three have very different aspect ratios and are used in very different capacities by the average* screen user. It is good practice to design a page layout with the smallest screen in-mind first and scale up from there to ensure all content will display and fit on the small screen in the most legible and user-friendly way possible (think fat thumbs, small buttons).

The same practice can also be used when creating brand identities. When designing a logo we pay attention to the relationship between the mark and typography but due to the ever-changing screen size, it is now also just as important to consider how they scale together, whether larger or smaller to ensure the quality of the brand remains.  Jeremy Frank, a front-end developer at Viget, writes helpful tips to consider when creating logos that will adapt easily to changing screen-sizes.

You can read his take on responsive logos here.

 

noaa-emblem

 

*No scientific data has been collected, we’re using this term very loosely.