A design style guide determines how a product is going to look. It reflects and shapes the style of the product. It gives you a convenient place to go when you need to reference what the rest of the product looks like as you’re designing.
Ever noticed the relationship between a design style guide and your closet?
Swap out “product” above for “wardrobe” or “outfit” above, and you get the analogy.
Your closet organization and the things you keep in it help you stand out with a strong sense of personality and unique style—the same way companies want their products to stand out with a strong design style guide.
“An effective style guide should be organized like a stylish closet.”
Closets store our everyday needs: clothes, shoes, hats, socks, accessories, and more. We go there to choose the stylish pieces we’re going to use to express ourselves every day. A design style guide stores your user interface components: typography, buttons, forms, toggles, and more. We go there to help design beautiful and consistent products.
Both need to be well organized, and easy to peruse for details but also arranged so we can see the big picture.
Let’s take our analogy further. Here’s how thinking of your closet like your design style guide—and vice versa—can help you improve the way you organize both:
1. Color swatches
Putting the right colors next to each other improves the aesthetics of your closet and your product. Consider:
- Primary colors
- Accent colors
- Grays
- Whites
Related: Learn how to manage colors in Photoshop like a pro
2. Typography is your personal style
Typography defines product character and page hierarchy. Your closet defines your style and personality. Think about these elements:
- Font family: Your own choice
- Header: H1, H2, H3, H4, H5
- Content: Paragraph, Label, Link
- Font weight: Light, Regular, Italic, Semi-bold, Bold, Extra bold
3. Iconography = Accessories
Iconography is like accessories. Who doesn’t like eye candy? They are optional, but they add a little extra to a product or an outfit.
4. Buttons = Shoes
Shoes are like buttons—they take you places and the different types serve different purposes.
- Primary button: Triggers primary action on a page
- Secondary button: Triggers actions secondary to the primary action
- Tertiary button: Optional actions that are not necessary for the user flow, but enhance the experience
- Quaternary button: Used for exit, reset, cancel, etc. functions
5. Drop-downs = Bags
Drop-downs are used to contain a menu of options, hiding extra stuff when you can’t display it all upfront—just like a bag.
6. Forms = Scarves
Forms are usually used when registering online or when filling out shipping and billing information. They often come in 3 states: default, focus, and error. Like scarves of different patterns and weights signal different moods and weather, different colors and types of forms can signal different intentions in the product.
The aesthetic-usability effect
“Aesthetic things are perceived to be easier to use than ugly things. Aesthetic things are more likely to be tried, accepted, displayed, and repeatedly used than ugly things.”
–Universal Principles of Design
An elegant, clean look makes a good first impression on people and provides a pleasant viewing experience—whether you’re talking about an organized closet or the sleek design aesthetic of Apple products.
“Aesthetics affect how much people want to use your product.”
It’s a competitive world, and the nicer your product looks, the more enjoyable it is to interact with and the more likely it is people will use it. The same goes for the way you organize your wardrobe and style guides. Both should evolve forward to stay modern and reflect the changes in your design sensibility.
Establishing consistent patterns
“Usability and learnability improve when similar things have similar meanings and functions… Make things functionally consistent to leverage existing knowledge about functionality and use.”
–Universal Principles of Design
Consistency crops up often in design principles and UX guidelines. It takes time and effort to establish consistent patterns and functionality, but helping your users learn those patterns improves their experience across the board.
Related: The value of consistent design
Consider your closet. If the location of everything changed every day, or left socks were in a different drawer from your right socks, your experience using your closet would be pretty subpar. Establishing consistent and practical patterns matters. Here’s a well-laid out closet, with everything in a logical (and aesthetically pleasing) place:
Products should be similarly organized. Take the Dribbble website, for example. The user experience there is consistent across pages—users don’t need to relearn patterns and can find the basic functions at any time:
The closet analogy in practice
The analogy works both ways—you can use your sense of style and organized closet to inspire similar organization and cleanliness in your style guide, or you can apply the design principles from your organized and useful style guide to your closet disaster.
In both cases, everything should have its proper place and work harmoniously together to achieve a specific design aesthetic.
Read more from Jessie Chen: How Netflix does A/B testing.
by Jessie Chen
Jessie Chen currently works at ZapLabs, where she designs a CRM for real estate professionals. She enjoys gathering user feedback through user testing, and iterating on design ideas to solve usability issues. In her spare time, she shares ideas on Medium about how design impacts businesses.
