What is a Style Guide in Web Design?

Consistency is the key to success, they say. This adage remains true even with web design—albeit in a slightly different context. A consistently designed website has a greater chance of holding a user’s attention and interest, and this is achieved with the aid of a style guide.

A style guide in web design is a document that serves as the basis for the design of a website. It contains specific details and instructions on the application of different site elements, including headers, buttons, colours, and codes. It is especially useful for consistency and continuity when more than one designer is working on a website project, when new designers get involved and need to be brought up to speed on the design direction or when there is a need to turn over the job.

Style guides are typically based on a company’s existing brand manual. A brand manual contains all the essential information regarding the identity of a brand or company such as logo, colour palette, typography, messaging and implementation. It dictates how elements of the brand and everything associated with it should be applied to every company property, product and asset, including its website. That said, a style guide is borne out of the collaborative efforts of both web designers and their clients.

Elements of a Style Guide

Grid

The grid serves as a guide that determines the spacing of elements on a page. It dictates the structure and position of content on the layout. A good way of establishing grids is by creating a wireframe which is your website’s skeletal framework before placing elements on the actual page in a trial-and-error approach.

Taking into consideration the rise in mobile phone and tablet usage in recent years, a style guide should also specify how layouts should be designed across multiple screen sizes and provide corresponding illustrations.

Read more: How Does a Responsive Web Design Work?

Colours

Refer to the brand manual when selecting the primary and secondary colours, as well as complementary and accent colours to be used on the website. Once these have been determined, you are now going to assign them to the different elements of the site—background, text, buttons, links, etc.—keeping in mind their harmonious combination and suitable contrast.

When choosing website colours, keep readability in mind. Make sure the copy stands out against its backdrop. It’s also recommended to use darker colours for the headings and titles, while lighter tones of the same hue are good for the body text.

Although enumerating the colours, their corresponding HEX values and prescribed application in the style guide is helpful, including an actual visual example of the pairings and usage will also be invaluable for web designers.

Read more: How are Colours Used in Web Design?

Typography

Typography involves the size, style, and spacing of all the text found on a website. A style guide must indicate what typeface and in what font size, weight and colour should be used on a specific copy (e.g. titles, headings, body text, captions, etc.). It’s also helpful to define tracking, leading and kerning—or the spaces between words, letters and lines of text—to maintain overall consistency and coherence in your website content.

As always, providing visual examples and context notes will make the designers’ job considerably easier and faster.

Graphics

These are interactive symbols or elements on your website that represent a command or stand in place of a link like logos, buttons and icons. The style guide should illustrate how these graphics should look. As an example, for icons, it should specify whether they are line icons or filled icons. It should also indicate which colour combinations (ideally only up to three) to use based on the determined colour palette.

Photos

Photographs can be a bit tricky because they have their own colours that might not contrast well with all the carefully designed elements of the website. The style guide can establish a rule of thumb for the treatment of coloured photos like adding a filter or gradient or having them converted to grayscale or monochrome so they complement nicely with the rest of the website.

To maintain the visual balance on a page, photos should also have a standard size—a precise width and height—in relation to all the other elements on the site.

Other Elements of a Style Guide

Apart from these first five fundamental elements, other components such as how a cursor behaves or appears when hovering over certain page objects, the presentation of forms and input fields and the execution of other page effects like animation should also be specified. Inclusion of code snippets that can easily be copy-pasted on stylesheets makes building a website convenient for designers and programmers alike.

Advantages of Having a Style Guide

It may take a while to develop a comprehensive style guide but once it’s done, it will make the process of web design and development significantly faster and easier. The approval process becomes quick and efficient as well because everyone involved in a website project—even and especially the client—must adhere to it.

A style guide also helps maintain consistency to your web design project especially if there are many different people working on it. This document serves as an invaluable reference for web designers when they need to replicate the design or create new pages. Web developers will find style guides useful particularly if it has standardised codes and scripts which are easy to copy and paste or tweak to update.

Ever-Evolving Style Guides

As the only constant thing in this world is change, we can expect brands to evolve and technology to keep innovating. That is why it is important to involve the whole team (client-side and designer-side) in updating the style guide regularly to include new product lines, present a refreshed brand and implement the latest trends in web design.

Do you have a style guide and a need a new website? Talk to us, we’re Brisbane’s go-to web design agency.