Intro to Style Guides
In my article 5 steps for a successful website design, I introduced 5 essential steps on how to design a website. In this article, I’m going to dig into Step 4: Style guides - what they are, why use them and how to use them.
What the heck is a style guide?
Style guides/tiles, UI guide, UI toolkit, pattern library all basically mean the same thing:
A set of guidelines, a visual reference to the design language of a digital product usually made of fonts, colors, style and other UI elements.
What does it consist of?
A good style guide should consist of unified user interface elements for the brand identity. It mainly consists of:
- Logo
- Color palette
- Buttons
- Forms
- Typography
- Iconography
- Dos and Don’ts
Why would I use it?
From concept to visual
Composing your style tiles will translate the mood, feeling and tone of your website based on what you learned from your client’s needs. It will help you make choices about how to use the elements of design in a way that the client will understand.
Maintain consistency
With a style tile, you are able to maintain a look and feel by creating a set of rules which the design follows. The process becomes flexible, easily to maintain and consistent.
Time efficient
Designing your style tiles will show your client the website’s skin. Instead of composing your full designed website in a certain style, now you can update your style tiles with the client’s requests in a quick and efficient way.
Promotes reusability
Developers will be able to reuse the components that they coded independently from the context they are in. For example instead of coding the blue button on the Login page and giving it CSS classes such as “Button-login”, they will see this blue button on the style guide and give it a “Button-blue” class which will be reused throughout the website. This saves a lot of time for developers.
Do I have to use it in all my projects?
The short answer is no. The long answer is, it depends. Personally, I use it on big projects (15+ pages websites). Sometimes small projects can be done without style guides, or sometimes the project scope doesn’t allow it.
Examples of style guides
Medium
Airbnb
Frontify to the rescue
Alright, now you know a bit about style guides. But creating the elements of a style guide on Photoshop or Sketch can take time.
Frontify is a pretty-looking tool to create UI librairies, among other things. And most importantly, it’s free.
What I like about Frontify is that it works great with developers. For example, you can choose the SCSS variable name for each color in your palette. In the example below, I used $yellow, $yellow-light and $dark-yellow so the developers can use them in their code to maintain brand consistency.
You can have the developer download your swatch:
You can even code a few UI pattern and add them to your style guide:
And of course, you can create detailed description of font styles with assigned text and background colors for each style:
The point is, it’s a great quick way to create style guides without going in the hassle of designing them.
Thanks for reading!
Here are some resources for your style guide inspiration.
Become a UX designer: The complete design course for non-designers
I made an online course for overwhelmed beginners who want to kickstart their design career. Want in? Sign up on Awwwards Academy!
