Author: Dorin SefuLaBani

When it all started, a few years back, I was quite unorganized and the lack of consistency throughout the web site’s elements made me look unprofessional. I gradually discovered that the best way to achieve project uniformity is by creating design documentation, or style guides.

A style guide is a set of standards, principles and rules every developer or designer should follow in order to improve the digital presence of the product.

In this article we will walk through effective techniques used in designing a reliant style guide. If you’re a beginner and find difficulties in creating and managing a style guide, here’s what you need to know beforehand:

• First things first, design the product and afterwards the style guide.
• You will need to touch base with front-end developers. Stay ahead with Bootstrap and Sass for a more productive experience with your coworkers.
• Make sure there is a sense of consistency throughout all the pages whilst incorporating the company’s goal and the customer’s needs.
• Include all possible details like states for buttons, titles, links, exceptions, corner cases and so on. The principle less is more is not working here.
• Don’t let developers alter or adjust styles based on personal preference. Make sure they follow your design documentation.
• Promote your styleguide as much as you can. Keep your team mates in the loop with all updates you may have.

Let’s take this project for example and create its styleguide step by step. These layouts are part of a creative/multipurpose theme for agencies that I’ve been working on lately

1. Grid setup

A competent layout has a solid structure behind it with a fully responsive and reliable grid, properly aligning the content. Modular grid is one of my favorite.

To set up a grid you will need to take in consideration certain mandatory aspects like container, units, number of rows and columns, margins and gutter. Developers are mainly interested in the functionality of the product, so all your elements need to be placed properly, without affecting the layout.

For my example I have a container with 1290px total width, 12 units gridand 30px gutter. To determine the px of each unit I used this app wich found that each unit has 80px.

The specific breakpoint is xl ≥ 1200px, with the content wrapped in two col-6. The result look like this:

2. White space

Be it black, white, or any other color that inspires you, the white space represent according to Mark Boulton, the empty space between the elements of your designed website.

Take advantage of your space by offering it real use and don’t try to squeeze or disperse your content. Find the middle ground; white spaces give an elegant and peaceful note which relax the eyes while emphasizing the main message.

Bootstrap helps developers focus on white space like this:

Rem is the first element within your html, and if that has 16px, this means 1rem is equal to 16px.

$spacer: 1rem !default;$spacers: (
 0: 0,
 1: ($spacer * .25), (16 * 0.25 = 4px)
 2: ($spacer * .5), (16 * 0.5 = 8px) 
 3: $spacer, (16px = 16px)
 4: ($spacer * 1.5), (16 * 1.5 = 24px)
 5: ($spacer * 3) (16 * 3 = 48px)
)!default;A real use case will be like this:
.bla  { padding: $spacer * 2; }

3. Color palette

I like to start by extracting the colors, both primary and secondary, on light and dark backgrounds. For a clean look and inspiring result make sure they look perfect combined as they do on their own. For picking up the right colors, see How to choose a good color scheme for your website by Connie Wong.

Now you have to turn colors into variables. Bootstrap already has a set of variables and if you’re working with Sass, just override and replace them with your own values. You don’t need to use different names. Create a new file with .scss extension, copy /paste from this documentation and send it to your team. This will make you look professional.

Color variables$brand-primary: $orange; 
$orange: #ed5f43;(the color of the logo and main call to action, the most important buttons)

$btn-primary-bg: $brand-primary; (the main buttons)
$btn-secondary-bg: #a2b2bd; (the color of the second call to action, default buttons)
$btn-secondary-bg-hover: #5b6b79;

$headings-color: #2b363f; (titles, sub-titles)
$body-color: #5b6b79 (paragraphs, ul, ol, li, labels)
$light-bg: #edf1f3;
$dark-bg: #5b6b79;
$input-border-color: #c3ced6;
$input-border-color-focus: #90a3b0;

In this case it turn out like this:

4. Typography

A correctly built typography offers the base for creating a harmonious style guide. If possible stick with one or two typefaces in order to give your text unmatched legibility, clarity, and consistency through all of the pages.

For headlines I used ‘Rubik Font Family’ and for bodies ‘PT Sans’. Make sure you bring in front details like hierarchy, weight, line-height, letter-spacing and include examples of usage in your product.

5. Imagery

It can take some time to search and pick the right images for your website, but when everything is just right the outcome will be spectacular. Invest time in the search process as images bring emotion and connect the user on a visual level.

If you don’t have the budget to use stock photos, I strongly recommend these sources of cc0 licensed-photography.

Images used for this template are carefully harmonized with the tone of the selected color scheme; the bright work environment evokes a positive atmosphere between coworkers.

6. UI Components

Designing the components of your product can solve common issues like navigation, CTA buttons, form elements, modals, notifications and so on. Improve your style guide by adding these useful elements that create consistency and depict a better overall look.

Each one of them has its own personality, its own set of rules and
properties that can interact individually as well as together, as a part of an evolving system.

Buttons

A best practice is to group the buttons into classes: primary and secondary or (default), reversed, outlined, with specific backgrounds or borders that can easily be translated into code.

When designing buttons, make sure you bring in front details like:

• Importance. Using a powerful color on primary buttons, gives a visual indicator leading the user to perform a desired action.
• States. There are a few states here, but you can stick just with normal and hover and most of the time you don’t need more than that. Emphasize details like 2d transitions, shadows, icons and so on, for
  which I recommend using this css library effects.
• Sizes. Define button sizes through classes like btn-lg, btn-md, btn-xs. For more details read bootstrap’s documentation.
• Usage. Clearly defining the buttons and showcasing their real use, will allow developers to merge those details further into production with ease, whenever needed.

Form elements

Nobody wants to spend a lifetime completing a form, this is why we have to design it simple, fun and also usable. Group labels with their inputs, bring to light basic helper text wherever possible, use one column in your form, include all posibile feedback like active, valid, warning, error and so on.

I encourage you to read this article by Andrew Coyle, to prevent some common mistakes designers make, when designing web forms.

As for my article, if I made you reconsider the way you create and helped ease the process, then my work here is done.

I am a big fan of Jonathan Z. White. He has a powerful article about style guide and elements that go into building compelling products.

If you want to admire some of the best designed style guides, I recommend this article from Muzli.

As for my style guide, I decided to work with some of my friends and implement it. See live version here. I am sure there is always room for improvement. What do you think?

What are your thoughts on style guides? Let me know if I left something out. Comment down below and follow me on dribbble for more insight into web designing.

Thanks for reading. Please press ♥ for encouragement.