March 3, 2013 - No Comments!

Designing beyond the responsive web. A look at design systems.

Great design is about systems. No matter what the medium is great visual communications should aim to be accessible and adaptable to every display.

What the hell is a design system?

A design system is a combination of components and modules that define the visual attributes of an experience. These attributes come together to form rules that create the foundation for how a design translates from medium to medium and viewport to viewport. Think of design as building a house: design systems specify what materials, angles and styles you can use in the process. Creating a modular framework of visual language components ensures your creative holds up even in the most unforeseen conditions.

Elements of a design system

Content

voiceandtone

The basis of everything is content.  Mailchimp’s amazing resource Voice & Tone shows us how to look at every aspect of content strategy broken down by situations and content types. Design without content is decoration, echoed by Jeffrey Zeldman in May of 2008 (and he won't let us forget that either).

zeldmancontent

Typography

typography

A picture is worth a thousand words. Hopefully those thousands of words look good together. Almost every design system relies heavily on the usage of typography to help deliver its message. The combination of fonts used and their base size should start to dictate the typographic styles of the design system. To establish a balanced utilization of typography we typically leverage techniques such as Modular Scale. Tim Brown's amazing gift of Modular Scale functions like a musical scale in establishing a predefined set of harmonious proportions between fonts. Proportional percentage based sizes help us strike the right balance between control and sanity across all devices and mediums.

I tend to choose a few key device sizes based on the understanding of the audience and let these serve as a testbed to benchmark against (i.e laptop, desktop, ipad, iphone). This lets us balance the importance from large headers down to block quotes. Since most of what we do is digital, we generally think in terms of markup types. We can take inspiration from the BBC's Global experience language or from what we call our "UI Kit," which breaks down all the various types of content and how they will be displayed.

Color Palette

colors

Color allows us to bring together contrast and is one of the simplest ways to unite experiences. We all remember the Starbucks green, the UPS brown and the Twitter blue. This recognition is because of repetition and a media-agnostic delivery of an established design system.

Iconography / Shape / Form

icons

Some design systems rely heavily on the use of iconography and shapes to establish visual hierarchy and create an instructional system. Take the New York City Transit Authority Graphics Standards manual for example - or get inspired and contribute to the Noun project.

Grid & Visual Hierarchy

grid

Grids help enforce rules for visual hierarchy. They show us the order modules take in the layout and how they are brought to life. Collapsing columns, transforming images into icons or shorter type driven interfaces are just a few examples of this brought to life.

Hop on over to mediaqueri.es and see how designs are transformed based on various viewport sizes.

Imagery

imagery

Usage of imagery in a design system helps to evoke an emotion. Often photography composition in brands takes on specific treatments that help us recall images such as the silhouettes holding the iPod in the Apple commercials or the strong saturated images of athletes achieving the impossible by embodying the "just do it" mentality. Imagery creates a visual continuity to the design system and sets apart a brand from a stodgy stock website.

ipod

Tying it all back together.

No matter what kind of designer you are, or are striving to become, remember to think in Design Systems; not comps. Design is a job thats sole purpose is to solve problems and establish communication. Design isn't just art but rather the intersection of art and science.

Start with a mood-board and some content to begin to establish the visual language you are looking to create. Once you've started to establish the visual language translating it for different mediums tends to be a production task and not a conceptual one since the hard part is already defined.

I'm not going to force-feed you on the notion of designing in the browser, but being familiar with HTML/CSS and grid systems will be critical no matter what role you play in the design process.

We created Gumby, a responsive web design framework, to speed up how we transformed our designs into functional experiences. This framework helps us quickly translate all of the above elements of a design system into responsive layouts significantly faster than hand-coding and testing our own grid and layouts from a blank canvas. For more on that see the making of a responsive CSS framework.

For typography, turn to resources and tools like Nice Web Type , Typecast, and Typekit for creating and experimenting with web-ready typography in your designs.

Stay inspired and keep creating and making things. You should follow me on Twitter.

Published by: Peter Sena II in CREATIVE

Leave a Reply