Blog  Subscribe to our RSS feed RSS

The Benefits of Style Guides

Giving a new website a unified and coherent visual style is crucial to creating both an engaging and informative web experience. In this post, GT software developer Alister West gives some insight into the role style guides play in ensuring that a site’s visual elements are uniform and attractive.


When moving onto a new web project I always look to create a quick website style guide (SG). An SG is like a front-end cheat-sheet for a website. Having a quick reference for key elements means more time getting things done and less time fiddling around. An SG can cover anything and everything, from CSS class naming conventions, to which DocType or JavaScript libraries to use. For most projects, though, I usually whip up a quick and dirty SG aimed at formalizing a site’s major elements with the intention of getting front-end content done efficiently, while retaining site consistency.

Branding Guidelines

Traditionally SGs are created for brand protection, and are more focused on building an overall sense of design and experience, rather than just layout and styling. Brand guidelines are made with both internal departments and external partners in mind, creating a consistent style across a range of teams, projects and media.

To get a sense of how SGs operate in tandem with branding in the upper echelons of development, take a look at these SGs: Adobe, Apple, Blackberry, Skype.


Various style guides

During a website redesign process, design agencies will usually produce an SG as a deliverable on a website redesign. These are great, but a design reference can become quickly out of date as the site evolves. What you need is a quick SG for developers getting things done on the ground.

Website Cohesion

In the case of small sites, you probably don’t have large archives of design references. But the reasoning and motivation behind creating corporate brand guidelines and designer-site style-guides are the same. Consistent fonts, layout and colouring help create a more cohesive site. A new page should still feel like part of the site and a new side-bar should fit in naturally. Reusing existing styles and layout helps the look and feel of new features fit in.

After using a few SGs I grew to love them and you will too.

Make Your Own Style Guide

Creating a site SG is easy! Most WordPress themes have a ‘preview’ page which is essentially a SG. For example the popular theme zBench has a comprehensive list of most HTML tags as well as including main section blocks.

zBench
The zBench theme’s elements.

A site will typically have only a few types of pages (home, list, detailed, search, etc.), and it’s easy to mock-up a few layout options. You don’t want to do too much – you want it to be useful without taking up too much time. It should cover typography (fonts, sizes, spacing), layout and colouring with a focus on the areas you will be working on. Don’t forget to include common types of web-specific styles, like a:hover and a:visited.

CSS frameworks like Blueprint have good demo pages where you can quickly become familiar with their main elements. The aim of SGs is the same. See what you want before you implement it.

Blueprint
A sample Blueprint page.

Nothing To Stop You

Having an SG handy will get you up to speed on a project’s elements quickly so you can dive straight into your new project. Confidently create new elements and add functionality, knowing that you don’t need to create specific CSS styles. Do as little or as much as you want, but the most important thing is to create a reference you will use.

Useful Links

Here are some helpful links to get you started on your own style guide: