Sweet Systems

A beautiful design system is about finding the same balance of consistency and variety. Too systematic and the design becomes predictable and repetitive. Too much variation and the system is confusing and overwhelming.

One of our design goals is to create work that is sustainable, and our design process always aims for the right amount of consistency without homogenization. We like to create design systems that are easy to build, evolve, and use.

I’m going to share some tools that have helped shape my process and since web design is a team sport, Allison Wagner, a front-end developer at Happy Cog, is going to cover the topic from her perspective next week.

Prepping Your Ingredients

Variety is key when creating design systems. In the past, I’ve eagerly jumped into Photoshop only to discover I’d created an “IHOP Menu” design. If you’ve ever dined at IHOP, then you know every breakfast combo platter is essentially the same variation of the ratio of pancake to egg to meat. Delicious, but not exactly diverse. I’ve discovered that planning ahead of time builds variety into the system from the beginning.

I use this process to ask myself questions about the goals for what I am creating. Which content is made for an immersive visual experience? Which content is better displayed in a full-column of text and what falls somewhere in the middle? For me, this is the time to distinguish which pages need to make a dramatic impression and which need to put function over style.

After understanding the needs of my system, I sketch several layouts, working first on paper and then moving into low fidelity Illustrator sketches.

With my sketches hanging up on the wall, I inspect my plan. Are there enough variables? Is the grid flexible? I find it helpful to share the sketches with my team to see if my thinking is correct. Creating this plan gives me an idea of where more time will need to be spent on unique experiences and what the reusable elements should be.

Party_Planner.psd

To create a cohesive system, I try to make sure all my styles look like they’re dressed to go to the same party. In other words, don’t wear a prom dress to a Phillies game (actually that might be cool). Anyway, I’ve found that it’s difficult to keep all my styles properly attired when they are isolated in individual pages. A remedy to this problem is to create a “Working Styles” document.

The concept is simple. I create a large document with all my individual modules and styles stacked on top of each other, based on where they fall in my grid. Instead of getting wrapped up on an individual page working perfectly, this lets me get a comprehensive view of all my styles.

This document makes for the perfect place to put an editorial eye on my system. When designing content-heavy websites, it’s easy to get lost and create too many styles with little variation. My Working Styles document may reveal, for instance, that I’m displaying “Related” information with three different shades of grey.

Not every cupcake needs a different piece of candy on top. My rule is: when you have similar or related modules, use as little variation as possible. That way, when you’re designing key content modules, the differences are clearer and more purposeful. Creating contrast is one of our best tools as designers.

Because this document evolves as my designs do, as an added bonus, at the end of the design phase, I have a handy Style Reference Guide to pass off to my developer. Pretty sweet!

Speaking of our developers, tune in next week when Allison Wagner covers design systems from her perspective. Until then, I’d love to hear some of your tricks to creating beautiful design systems.

Back to Top