How to Create a Web Style Guide You’ll Be Proud Of

“Always design a thing by considering it in its next larger context – a chair in a room, a room in a house, a house in an environment, an environment in a city plan” — Eliel Saarinen

The quote above is from a wonderful, 20th-century Finnish architect called Eliel Saarinen – and that’s his train station in central Helsinki. While Eliel was specifically talking about architecture, his is a concept that applies to all type of design from sculpture to culinary arts to landscaping to web design.

The unique challenge with web design is trying to get a clear overview of your whole site and its components. Unlike a building, there’s no easy to way to stand back and look at an entire website to get some context.

So, what do you do?

This is why style guides are so important in web projects. They are often the only way to get an overview of all the components of your site in a single place.

This is why today’s article will be a quick crash course in style guides for web design. Hopefully by the end you’ll be able to create your own for your in-progress or dream site and be able to design a guide that can be edited later for future use and expansion.

What is a Style Guide?

A style guide is simply the definitive visual documentation for a project and outlines the rules you set for your brand. It’s a set of design guidelines that could be as simple as a one-pager for a small site, right up to Coke’s 150-page style bible covering umbrella panels and truck painting requirements.

A style guide, for the most part, will map out the rules of all elements, graphics, colors and other related parts that encompass your design and brand.

All in all the style guide is the mother of references and a blueprint to help you maintain consistency from start to finish. No matter what part of your design you’re working on the style guide will and should have a guideline or rule to make your job a lot easier. If it doesn’t then it isn’t a complete style guide.

Researching Your Brand

Knowing your baby is the first step of developing a style guide. If you don’t know anything then chances are you’re going to be running to the design ER telling a specialist you “just did something and prayed it would work”. So if you have to spend a day, a week or a month to truly understand your brand then do it.

Sure it seems like a boring task but it will be more than worth it. You have to understand the mission goals, statement and the face behind the site. These understandings will tell you whether York Whiteletter or Bebas Neue in mango peach on a pastel blue background will work on not. For more on brand research, you can hop over and check out Richa Jain’s great article on Creating a Brand Identity.

Configuring the Color Palette

Color is a good place to start your style guide. When deciding your colors it’s best to use no more than three core colors, but feel free to branch out as much as you need on shade variations per color.

Your style guide should always reflect the hex codes as opposed to using a name. What you may consider canary yellow may not be viewed the same by a collaborator. Most people will go off of the color name or hex code instead of the image.

Along with your hex codes for screen work, it’s always useful to provide CMYK values as well as the Pantone color codes – even if they aren’t required immediately. With your color preferences listed, you will most certainly need to specify when and where a color may be used, and any exceptions. This may not be critical with a small site, but you should do it nonetheless.

Rules and exceptions cover situations like:

• What happens in black and white settings?
• Is color or monotone preferred in small formats?
• What happens in reversed settings (light on dark)?

Defining Buttons and Icons

No matter the style of buttons you are using or trend they are abiding by, you need to set a design rule. Most sites have their own custom buttons so this is important especially if you are doing vastly different from the competitors.

As with your fonts, your buttons and icons need usage guidelines. There should be a clear graphic distinction on your guide between your primary and secondary buttons.

As far as your icons go, they should adhere to their own specific rules including their maximum and minimum pixel guidelines listed either beside or inside of an example image.

Color and any further style applied to your icon will be based around your color palette and general voice of the site so make sure to double check to make sure everything lines up.

Continue reading %How to Create a Web Style Guide You’ll Be Proud Of%

by Gabrielle Gosha via SitePoint