3 Keys to a Great Web Design System

March 12 2014 Uncategorized

By  Cole Sletten, Senior Art Director

Now more than ever, designers are being asked to think not just in layouts, but in design systems. Every piece of visual design created must communicate not only within itself, but also with the many other branded visuals and content users will encounter alongside of it.

Nowhere is this more obvious than on the web, where the explosion of connected devices has forced designers to rethink the comp-to-code model. Instead, they are embracing responsive design, and the idea that they are creating living websites, not just static pictures of websites. As this happens, our focus shifts (rightly so) from the overall effect of a static layout to the cumulative effect of the pieces in it, and how they’ll work together across all the screens and devices that make up the web. This means making beautiful, reusable type styles and interchanging, modular page elements.

Looking back into history and at today’s work, it’s clear to see that top designers in all sorts of media have always worked this way. The best identities, book layouts and architecture, for example, have always been built in systems.

So as we dive deeper into designing systems for the web, we’re, in many ways, going back to the fundamental principles of design, mining tried-and-true insights as we push the modern boundaries of interactive designs. Here are three of the of the most fundamental:

1. Design for consistency, not repetition.

We needn’t look further than the true giants of identity design for great examples of this principle. Saul Bass’ work for Westinghouse shows the way — building from a basic logo mark and typeface into video, signage, packaging and much more. Each piece in the system communicates the same brand essence while adjusting to fit the nuances of each unique medium. Packaging extensions pair the main blue with a telling pink for beauty applications, and physical executions show the brand in the context of stainless steel (something Westinghouse is still associated with to this day).

A more modern version of the same idea is Pentagram’s 2007 reinvention of the Saks Fifth Avenue brand. By applying an algorithmic approach to a historical mark, Michael Beirut and his team created a design system that breaks an identity down into an nearly infinite kaleidoscope of visual output, all of which deliver, in Beirut’s own words, “recognizable consistency without sameness.”

2. A strong type hierarchy is the backbone of a great system.

Warby Parker has built its brand from the web out, giving customers an online experience infused with the same craft and care that it puts into the glasses produced. Yet Warby Parker includes nearly no unique graphics. The brand’s most memorable parts (outside of the try-at-home shopping paradigm), is simply its specific choice of blue color, type-only logo and minimal, photograph-driven site.

So what holds it all together? A distinct type system that pairs a robust, sophisticated transitional serif (with a hint of ’90s nostalgia) with a thoroughly modern and functional web-savvy sans. This unexpected pair greets you when you arrive on the site, and is used consistently from there all the way through product descriptions, job postings, try-on instructions and purchase confirmations.

Sophisticated, robust, modern and web-savvy. By selecting typefaces that reflect the qualities of not just its products but also its customers, Warby Parker creates a predictable and resonant system. Through this established hierarchy, all branded experiences online and off are affirming, clear and consistent with the brand’s position of “accessible sophistication.”

3. Familiarity (not repetition) breeds memorability.

MailChimp made a decision from the beginning to bring a sense of fun and exploration to a space that hasn’t had much of that over the years. By choosing to align its brand with Freddie the Chimpanzee, MailChimp chose memorability and disruption and has seen tremendous results.

But it was a risky move. In addition to the risk of not appearing to take business seriously enough, MailChimp could have misused Freddie, wearing out his charm through repeated, robotic application. Instead, MailChimp has allowed him to be used in a variety of ways, giving him a real persona that can represent the many facets of the company itself. In addition to the trademarked chimp graphics, Freddie shows up in real life, becomes a toy version of himself and has even led the way for other animal associations to appear, even as part of the product’s pricing structure!

Conclusion

The web design industry’s pace of change has been astronomical over the last few years. While it shows no signs of slowing, one trend is clear: As the variety of ways people experience the web continues to expand, designers must approach their thinking of each piece as part of a larger whole. A homepage design must build to a seamless checkout. An offline reading app must function beautifully as a browser plugin. Designing for the web is designing systems.

Thinking in systems will help designers not just see brands the way customers do, but also help push the boundaries of the work we do into richer and more nuanced brand experiences. Experiences worth spending time with, attention on, and ultimately — money for.

View Archive