Style guides have been around forever.
Even before the world wide web, businesses, journalists and academic authors relied on books like The Elements of Style by William Strunk, Jr. and E.B. White, The Chicago Manual of Style or the MLA Handbook to ensure formatting, language composition and usage maintained consistency across publications. Style guides became important because they established a set of standards and guidelines.
When to use a web design style guide
For web designers, style guides serve the same purpose. They ensure consistency across different web pages and enforce best practices to help protect the brand and even the reputation of the website.
They are, however, time consuming and not all that exciting to put together. Yet they are an important step in the process of building a professional website. Of course, a style guide isn’t required for every website you work on so let’s take a look at some examples of when it might be a good idea to work with one.
A large team is creating a website
When you get a group of creative people together to work on a project odds are each person will have their own ideas. Opinions will vary on how things should look and be built.
People even have different ideas on how to code a website even if they are all using the same wireframes or mockups. A style guide reigns in rogue ideas that don’t suit the overall design goals for a project. A style guide will dictate to everyone how things should be done and look.
Agile principles guide your design project
Web design has moved away from building an entire site before launch. It simply takes too long. Meanwhile, businesses lose out when they don’t have a web presence. Instead, web design adopted agile principles from software development where projects are delivered in small, incremental pieces. A site may go live one page at a time, or one section at a time.
Regardless, when you work in this manner it helps to have standards you can fall back on. For example, reusable code in your style guide that helps you move through the different iterations of a design more efficiently while keeping the look and style consistent.
Your website is content heavy
Typography is something that can easily throw off the consistency of a website. Since typography is used to express tone and emotion on the web, it is rather easy for someone to accidentally use the wrong font face, size or color. This is especially true when a website contains a good deal of written content. Guidelines that dictates what typography to use, when to use it and where it can be used helps to avoid awkward font mistakes.
You need to update a website
Some businesses need to frequently update their website. Maybe they serve dynamic content or their product line changes frequently. However, constant updates can potentially lead to inconsistent design – especially if different people are responsible for different sections of your site. When you can provide web designers with a set of guidelines you will ensure the look of your site and the content is consistent.
Create a style guide for your company website
Unlike the style manuals that writers rely on, a website style guide needs to include information about visual elements. Some of the things this document should contain guidelines for include:
How to use and position logos
The brand colors to include the hex codes
How graphics should be used on your site
Specific design rules like margins and padding
Typography to include font faces, sizes, colors, etc.
Layouts and grids
Tone and voice used in written content
Specifics for any other style or design elements that you want to keep consistent throughout your website and content
Once you have an idea of what should be included, look for examples of other style guides to gather ideas on how to present yours.
Don’t be surprised when you see how many companies provide their style guides to the general public. Companies like Apple, Google, Atlassian and Starbucks all share these documents.
Before you start writing your style guide, make sure everything you have listed support your brand image and the business objectives of your website. Remember, your web design style guide should be as long as you need it to be. Some might consist of a single page while others resemble a book.
How to present your style guide
People often publish their style guides as a PDF document to make it easier to share. Since anyone has the ability to open a PDF file, it makes sense. However, don’t overlook what you can do with a living style guide created with CSS and HTML.
By adding a bit of code to your style guide you can make it an interactive tool for other designers to use. Write hex codes in the font color they represent, code hover overs and buttons to function in your style guide when people interact with them. Get creative with how you present this to others.
There are a number of reasons why you should have a style guide for your company website, and consistency is always at the top of that list. However, the importance of a style guide is weighed by how much value is put on your brand.
For companies who rely on their brand image and reputation, there is nothing more important than having a web design style guide in place to protect that image online.
This article has been edited.
Eleonora Israele is a senior analyst at Clutch, a B2B ratings and reviews site for IT and Marketing Companies. She is responsible for research on website builders and web designers. Connect with @eleonoraisraele on Twitter.