Why your website needs a style guide

Posted on January 20, 2016


When more than one person is working on a company website, a style guide can be an essential tool so that the website keeps to the original vision laid out by the chief designer.

Who works on the website?

There are at least two people involved in creating a website. There is the client and there is at least one web designer. Clear communication should ensure that the vision of the client and the website designer are the same.

Large websites usually have teams of designers and content creators, so it is important that the look and feel of the website is consistent on every page. This is where a style guide is useful.

What is a style guide?

A style guide contains the specifications of the typography, colours, logo position and general layout guidance. The style guide also covers the content style or the tone. Content style is dictated by both the client’s business type and the profile of the target audience. Content written for professional lawyers, for example, will adopt a much more formal tone than a site aimed at young trendy people. The language will be different so that it appeals to the intended audience.

Style guides also contain the design of interactive elements such as buttons, menus and hover effects.

The evolution of the style guide

Style guides used to be simply Word or PDF documents containing the dos and don’ts of the website. Then web designers created static HTML web pages that demonstrated the colours and typography of the website.

The coming of CSS meant that style guides could be interactive and mainly written as CSS style sheets.

Everyone adding web pages to a site starts by linking each page to the CSS style guide file and this ensures that all typography, colours and general layouts followed the same style rules. A H1 tag on one page would be the same colour, font and size as a H1 tag on another page because its style is controlled by the style sheet.

A HTML page containing all the style elements is set up to demonstrate the interactive elements of the style guide. When users click on an item, or hover over an object they can see exactly what effect the style guide generates.

Creating a CSS style guide can take a long time, but once written it makes the process of adding additional pages to a site much quicker.

A CSS guide also gives meaningful names to components. For example Yelp, in its style guide, refers to its “Call today” button as .ybtn-giant. This means that when a designer suggests any changes to the button, everyone involved in the project knows exactly which button graphic .ybtn-giant refers to.

Using the style guide

After a style guide has been created, the next step is to get the whole team that works on the website to a meeting where the style guide is demonstrated and talked about. Style guides are not fixed, and there may be need to modify certain elements. The initial style guide meeting is the place to discuss the first modifications.

Not every project needs a style guide, but complex websites that are built by teams of designers and developers will find that a style guide will add constancy as well as speeding up the development process.

Technical Director at Engage Web
Darren is Technical Director at Engage Web, as well as being a co-founder of the company. He takes a hands-on approach to SEO and web design, helped by more than 20 years’ experience in these fields.
Call Now Button

Who Engage Web has helped:

Ice Lolly Minuteman Press BUNZLGS1 UK The Underfloor Heating Store West Cheshire Athletic Club Thomas Cook MWB Business ExchangeWeb Media 360 D2 Architects Beacon Financial Training Steely ProductsBurlydam Garden Centre Asentiv BodyHQ Clever Vine Endeavour Mortgages Pro Networks Comm-Tech Wickers World Ascot Mortgages Top Teks
TEL: 0345 621 4321