Design

How I use my closet as my personal design style guide

by

on

View all posts

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-color-swatches

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-typography-style
4-typography-style

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.

5-iconography-accessories

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
6-buttons-shoes

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.

7-dropdowns-bags

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.

8-forms-scarves

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.

9-aesthetic-usability 10-before-after

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:

12-consistency

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:

11-consistency

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.

More posts like this
Author

Jessie Chen, UI/UX Designer

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. 

Join over 3 million designers

Who get our content first.

No sales pitches, no games, and one-click unsubscribe.

Over 3 million designers
get our newsletter
every week

Find out why

Get awesome design content in your inbox every week

Just like over 3 million of your fellow designers do.

Plus get 3 free downloads, just for signing up.

Give it a try—it only takes a click to unsubscribe.

Thanks for signing up!

You should have a thank you gift in your inbox now—and you'll hear from us again soon!

Prototype better experiences with InVision

Just like over 3 million of your fellow designers do.

I agree to InVision's Terms of Service.

Want a free t-shirt?

Join the 3 million+ designers who get our newsletter weekly for your chance to win!

We hate spam as much as you do, and you can unsubscribe anytime.

Double your chances to win!

Tweet and automatically get a second entry

Tweet Now

No Thanks

Stay in touch!

We share news, freebies, and more on Twitter.