How to Create a Web Design Style Guide
by Rob Owen
Posted on 7th January 2019
A web design style guide is not the creation of designs for each page of a website, but rather individual components such as typography, colours, forms etc.
Why Create a Style Guide?
Creating a design style guide will help to ensure that you maintain a consistent style across your website, as well as external properties such as your social media profiles.
What to Include in a Style Guide
A web design style guides should contain the following elements.
Do not underestimate the importance of typography. For some people, the type is the most important aspect of a website’s design. You should devote a fair amount of time to getting this part of your style guide right. You can read up on what research says about styling text on your website if you would like to delve into typography deeper.
There are a few key areas you should focus on when defining rules for your website’s type. We will now go through each of these in detail.
There are two types of font family:
- Font family names such ‘Times New Roman’ and ‘Courier’
- Generic font families such as ‘serif’ and ‘sans-serif’
Choosing a font family can be a real challenge as the sheer number of different fonts available can be rather daunting. Choosing fonts becomes an even greater challenge once you start combining multiple font families. Luckily, there are some resources available to help with this.
Google Fonts is a tool that makes some great looking fonts available for free.
Google Fonts makes it easy to filter their fonts, but it can still be difficult to pair fonts together, i.e. choosing different fonts for the heading and body text. If you are struggling to combine two Google Fonts, then you can use resources such as Font Pair or fonts.greatsimple.io.
There are sources for free fonts other than Google Fonts. Typekit from Adobe offers a wide range of very high-quality fonts. They have a free version as well as a paid tier, which you will only need to upgrade to if you want one of their premium fonts or you have a high traffic website.
You can also use many of the free font libraries that are available to search for fonts. Make sure that you check the license of the fonts you are using to ensure that they are appropriate, e.g. a commercial license if you are using them for a website that generates income.
The size of the different typographic elements in your design can have a huge impact on the overall feel of the website, as well as its readability. Not setting clear guidelines can result in a website that looks inconsistent and unprofessional.
I have personally seen websites where the copy is styled differently from one paragraph to the next, and it did not look good. It is also good to remember that choosing the size of various typographic elements is quite difficult, so don’t leave it up to others.
You will want to define the text elements for which you will be setting guidelines. At a minimum, this should be the various heading sizes (H1, H2, H3 and so on) as well as paragraph elements.
To maintain consistency, you should define the font weight for your various typographic elements throughout your design. You should ensure that you are using font weight to differentiate between various typographic elements for a reason.
Bottom of Form
The line height of your typographic elements is vital for the legibility of your copy, as well as maintaining vertical rhythm. Vertical rhythm is difficult to maintain with responsive websites, for example, the height of images resizing on different types of devices. Despite the challenges facing responsive websites, trying to maintain some form of vertical rhythm will help to make your design more cohesive.
You will want to define the line height of each of your typographic elements (H1, H2, H3, p), as well as padding and margins that maintain your desired vertical rhythm.
2. Colour Palette
Choosing the right colours is another vital element of your design. The right colour choice can influence your visitors’ emotions, opinions, and behaviour.
There are several theories on which colours are best to choose, including biology/evolution, gender, and ecological valence. Understanding why colours have the effect they do can help to produce a higher converting site that feels ‘right’ for your visitor. Colour theory is a popular topic, and because of this, there are many tools available such as Paletton and Adobe Kuler.
You will want to define all of the main colours that you will be using (primary, secondary, tertiary and accents) as well as a light and dark shade. Ideally, you will define various intensities of each colour as well as some different shades between your light and dark shade.
Once you have defined your colour palette, you want to provide guidance on how to apply this to the design. You will want to specify font colours, background colours, anchor elements and anything else that you want to remain consistent across your design.
Imagine two very different types of images: one is a photo of a real person at a laptop, the other is a cartoon, vector image of a person. Both are quite different, but if you haven’t set any rules for the types of images to use, people making changes to your website might think that it is perfectly fine to use both.
Defining guidelines for your images can be a little more difficult than specifying fonts and colours. Images can be very subjective; however, you can still define characteristics such as tone, colour, subjects, aspect ratios, and quality.
Many websites will feature icons of some sort. If yours is one that does, then you will want to include icons within your style guide.
If your icons are not custom and you are using a pre-made icon set, then including them in the style guide can be as simple as stating which icon set to use, the sizes, colours and where to use them. If you are using a custom set of icons, and possibly will require further custom icons to be created, then you will need to define more rules for them.
Google provides guidelines for Material Design icons
It’s important to give the elements of your web design breathing room. When determining top and bottom margins and padding, you will want to consider your vertical rhythm as mentioned in the section on typography.
Specify exactly how much space each element should have. You will be surprised how messy and unprofessional a design can start to look without consistent and deliberate spacing.
If you are going to have new pages created, then define rules for new layouts, which is especially important if you will have more than one person working on web page creation.
For example, websites I have worked on that allow admins to create the main content in whatever format they choose, often end up inconsistent and messy over time. A page may start with an intro to what the page is, then go into an FAQ, and then end with a call to action. Someone comes and builds another page for something similar, but this page then has a different layout, introduction, testimonials, FAQs, and then no call to action.
Your design should be strategic, ideally based on testing, and allowing anyone to change that design without knowledge of the strategy behind your decisions is likely to end up in an unprofessional and poorly performing website.
Components can be elements like buttons, lists and text fields. Make sure to create style guidelines for components that are common to your website.
Components’ styles will consist of many of the topics already covered, such as colour, typography, and icons, although it is important to define styling for components explicitly. Imagine how quickly something as simple as button styles could become inconsistent, from the colours used, typography, padding and margins, to borders and drop shadows.
Animations or transitions feature on many websites nowadays. Rather than just eye candy, they provide a practical use regarding user experience. Micro interactions can be a good use of animations for web design.
Don’t forget to include animations in your style guides. To make implementing animations simple, you could use a CSS animation library such Animate.css and specify in your style guide which classes should be used and where.