Have you ever noticed the relationship between a closet and a design style guide?
Your closet reflects who you are and shapes your style. A design style guide determines how a product is going to look. Don’t you want to stand out with a strong personality and unique style? You may say no, but companies wouldn’t turn down this opportunity.
We need closets to store things we use every day: clothes, shoes, hats, socks, accessories and more. It’s the place I go to every day before I leave the house. We need a design style guide to store UI components: typography, buttons, forms, toggles and more. We can’t design a product without them.
Here comes the tough questions:
Is your closet well organized by category? Can you easily find what you are looking for? Can you decide which pair of shoes should go with your recently bought new dress right away?
Is your design style guide well labeled by category? Can you efficiently grab a component you need? Can you quickly decide whether all the different buttons, forms and colors go well together?
If all your answers are yes, then good for you! Unfortunately, it’s still a bit of a game for me to master both my closet and my and UI components.
So what’s the relationship between a closet and a design style guide? Let’s take a look.
1. Color Swatches
- Primary Colors
- Accent Colors
2. Typography = Personal Style
Typography defines product character and page hierarchy, your closet defines your style and personality.
- 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.
Here is an example of personal style vs. Typography (see image below):
3. Iconography = Accessories
Iconography is like accessories. Who doesn’t like eye candy? They are optional, but they add value to a product (or a person) and make them more interesting and enjoyable to look at. See example below.
4. Buttons = Shoes
I see shoes as buttons, they all trigger actions and service 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.
See an example of my type of shoes vs. product buttons below:
5. Drop-down = Bags
Drop-downs are often used in products, they contain a menu of options. When you have more than what you can display upfront, you need to hide the choices within a drop-down. They function similarly to bags (purse, backpack, clutch, etc.). You can put many items in them and take them out one or many at a time (see example below).
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, variety of materials serve in different seasons: spring, summer, fall or winter (see example below).
There are UI components than what I listed above, including tooltips, toggles, checkboxes, etc. They assist the product and enhance the experience when people interact with it. As with the different shapes and functions of hats. They keep your head warm/cool and signal things such as temperature, atmosphere or personal style.