How to Create and Use a Web Style Guide

4 years ago

Staying on brand is one of the most important aspects of visual marketing and content creation for your business. Your brand should be recognizable on your website, your social media and your printed materials.

There are a few practical ways to keep things in check while creating content at all levels. Graphic designers have visual style guides for advertisement, social media managers have message and wording style guides to keep the brand message on point. Web designers have web style guides to keep websites looking unique, branded, and perfect.

Source: https://bashooka.com/inspiration/40-great-examples-of-ui-style-guides/

What is a web style guide

A web style guide is a visual document that lays out all the graphic aspects of a website. The basic aspects of a guide are the branding assets; specifically the logo, colours, and fonts. These are further analyzed for the website guide with logo variations, colour combinations depending on the sections, button shapes, and sizes, margin sizes, separation parameters, animation guidelines, loading graphics, and general scrolling effects.

Web style guides are sometimes kept as an in-house folder, but many companies are so proud of theirs that they share it in a blog post or newsletter. Other times, designers and branding strategists post web style guides they have worked on in their Behance portfolio. As designers, these are a great visual inspiration for future work.

Air BnB Style Guide. Source: https://dribbble.com/shots/1669299-Airbnb-UI-Toolkit-Web

How to use a web style guide

The web style guide is usually put together by the UX/UI designers, sometimes alongside the web and graphic designers. The best web style guides are designed to look amazing. What’s the point of creating a design guide if it’s not going to look it’s best right? The first visual of the web style guide is the collection of all the graphics visuals included in the website.

This first visual is like an index. On subsequent folders, each element should have a file with the .html code and CSS styling so that there is no guesswork when creating new pages. It is common to have lots of people working on a website, that is why having the code for each element is so important.

The Web Style Guide should be available to all team members working on the website or app. It should be easy to search through the files for the right graphics asset. Remote teams need these type of guides to be able to build sites and other online visuals together.

Source: https://bashooka.com/inspiration/40-great-examples-of-ui-style-guides/

What needs to be included in a good web style guide

As we mentioned before, the basics of a web style guide are the branding assets. Nevertheless, every single thing is explained to the last little detail of how it needs to be used.

Grids, margins, and spacing

The most important aspect of how a website or app looks and maintains a unified feel is to follow a grid. The grid needs to be available for all instances of the design, landing pages, information pages, sales pages, blog posts, shopping carts, mobile variations, all of them. These need to be shown visually with all measurements laid out to be able to recreate by any developer on the team.

The grid must also definite the size of the margins around the logo, the buttons, the titles, etc. The spacing between two lines in a title, the paragraphs in text, the distance between the title and subtitle, etc.

Logo do’s and don’ts

A really important part of your brand style guide is your logo and the web style guide is no different. Every single aspect of how your logo is placed, coloured, sized, and aligned should be defined inside your guide. Give lots of visual examples of how things should or should not be done. Explain the permitted colour variations and visually explain what won’t work and what will. Include files of all font variations so that there is no double guessing.

Font weights and sizes

Your brand probably has two or three fonts assigned to it. As you know, all fonts can have different weights; thin, bold, and ultra bold. And they can also have styles; italic, all caps or other novelty styles which some fonts have. The web style guide must visually show which font at which weight and point size should be used for most instances on the design. Titles, subtitles, and main text are the main points, but you can also define the styling of the text in button or image captions

Include files of the fonts so that developers can download them if necessary.

Buttons, edges, and shadows

The buttons throughout the site or app need to maintain a visual consistency. For that, all buttons need to have a visual explanation regarding the rounding of the edges, and the drop shadows if there are any. All the .html code and CSS styling for the buttons need to included in easy to access files.

Other effects like hovers and animations

Any other effects that can be used inside the website or app need to be identified beforehand. This might need video examples so that it’s clear. The CSS styling or any kind of code needed to achieve the interaction effects need to be added and easily found.

Forms

Last but not least, forms also need to keep a visual style throughout. Just how other aspects of the visual style are depicted visually, so should the forms. A general guideline to what size the text should be, how big the fill-in boxes are, how the form reacts to the user, etc.