What I Wish I Had Known When I Graduated College
Better Stakeholder Interviews
Ready. Launch. Update!
Take a Break!
Cognition
Sweet Systems
To most, it’s just the sugary centerpiece to a child’s birthday party—but to me, the Cupcake Cake is systematic genius. A balance of consistency and variety, each cupcake is decorated with the same delicate piping technique, from a carefully selected color palette, with no drop of icing wasted. 
The result is surprising, delightful, and the highlight of the party.
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.
21 Responses
How "sweet" is your design system? @yeseniaa whips up some perspective in Cogition: #fb
Thu, July 28, 2011 10:47:04
Check out my Cognition post about creating design systems, process, and dessert!
Thu, July 28, 2011 11:01:28
How "sweet" is your design system? @yeseniaa whips up some perspective in Cogition: #fb (via @happycog) delicious!
Thu, July 28, 2011 11:02:11
Sweet Systems! Nicely done, @yeseniaa. #cognition
Thu, July 28, 2011 11:04:35
Loving @yeseniaa’s essay about design systems. And not just because it made me hungry. What.
Thu, July 28, 2011 11:05:35
Delicious.
Thu, July 28, 2011 11:17:27
How "sweet" is your design system? @yeseniaa whips up some perspective in Cogition: #fb (via @happycog)
Thu, July 28, 2011 11:42:11
"tasty" food for thought, esp. @yeseniaa's "Party_Planner.psd" p.s. I'm also going to wear a prom dress to a Phils game
Thu, July 28, 2011 11:48:43
Weeeeeeee! Cupcake Cakes!
Thu, July 28, 2011 12:30:31
Mmmmmm... cupcakes. #happycog
Thu, July 28, 2011 12:50:40
.@yeseniaa...a developer's bff; as defined by this Cognition post
Thu, July 28, 2011 1:38:31
does anyone know where i could see an example of one of these system psds, or suggest further reading on this ?
Mon, August 01, 2011 7:46:18
Cupcake Cake is a systematic genius. Nice & sweet article! #webdesign
Thu, August 04, 2011 12:11:53
In what part of your design process do you create a "styles document"? Nice post.
Tue, August 23, 2011 9:52:39
Component Style Guides at http://t.co/cL5lQt9X #design
Wed, March 21, 2012 2:24:36
Loved this!
Wed, March 28, 2012 6:05:55
efficient method of crafting digital design systems: create a component style guide
Fri, April 06, 2012 4:38:22
Well done. Love the Working Styles document idea for developers to refer to as well as an overview for my own designs. http://t.co/t7MnQ00v
Thu, May 10, 2012 3:55:14
http://t.co/CWBVWzj8
Sun, September 30, 2012 5:45:49
Don't over think the design. Use style titles in lieu of full mockups. #rwd #workflow http://t.co/JJOhnAbU
Mon, January 28, 2013 12:26:14
Great idea! Do you have an example for us to see? Did I miss this? Thanks! http://t.co/4EXuMA0J2H
Sun, February 24, 2013 6:27:14