How to Create a Web Design Style Guide
Designing a website can be a challenging process. Finding inspiration for a design that is both aesthetically pleasing and also functional isn’t always straightforward.
Maintaining a consistent style across various web properties and pages can make things even more difficult. It is especially true after the launch of a site, when there may be multiple teams working on it.
At this point, a web design style guide can be really useful.
What is a Web Design Style Guide?
A web design style guide details the design of each element of a website. A style guide is not the creation of design proofs for each page template, but rather more specific components, such as typography, colors, and padding.
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.
Style guides become particularly useful when multiple teams are working on your website. For example, you may have an agency building some new pages. By giving them your style guide, you can ensure that the design of the new pages will be consistent with the rest of your website.
Examples of Design Style Guides
Let’s take a look at some existing web design style guides. You will get an idea of the different approaches you can take, as well as some of the common elements most style guides will include.
Here are two web design style guides we will look at more closely:
Looking at Material Design, we can see the following main areas included in the style guide:
- Style (includes color, icons, imagery, typography, writing)
- Components (such as buttons, cards, lists, and tabs)
- Growth and Communications
MailChimp’s Pattern Library covers the following areas:
- Grid System
- Form Elements
- Helper Classes
These are both comprehensive style guides, and we can see some common elements between the two such as typography, icons, layouts/grids, and components.
We will not be covering everything that Material Design and MailChimp’s Pattern Library include, but instead detailing the important elements to include in most style guides.
What to Include in a Style Guide
You have just seen some examples of web design style guides and common elements that they contain. We are now going to go into some of the common elements in more detail.
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. Unless you have never used the internet before (how are you reading this?!), then you would have surely seen fonts such as ‘Open Sans’ and ‘Roboto’; two of the most popular Google Fonts.
Google Fonts makes it fairly 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.
Line height / vertical rhythm
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. Color Palette
Choosing the right colors is another vital element of your design. The right color choice can influence your visitors’ emotions, opinions, and behavior.
There are several theories on which colors are best to choose, including biology/evolution, gender, and ecological valence. Understanding why colors have the effect they do can help to produce a higher converting site that feels ‘right’ for your visitor. Color 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 colors 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 color as well as some different shades between your light and dark shade.
Once you have defined your color palette, you want to provide guidance on how to apply this to the design. You will want to specify font colors, background colors, 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 colors. Images can be very subjective; however, you can still define characteristics such as tone, color, 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, colors 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.
You can find out how to quickly add Font Awesome icons to your WordPress site here.
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 take into account 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 color, 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 colors 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. Microinteractions 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.
Do’s and Don’ts
Something you will notice in Google’s Material Design guidelines is their ample use of do’s and don’ts as practical examples. Do’s and don’ts are useful to ensure you have communicated how to put the style guide into practice.
Below is an example from Google’s Material Design guidelines. As you can see, it makes it much easier to understand concepts that could be difficult to explain with text alone. Add do’s and don’ts to your style guide to communicate more effectively.
You now have the tools to go and create your own web design style guide. Put into practice the tips here and you will ensure that your future web projects look great by having a consistent style, no matter how many people are working on the project.
WIN a Share of $5K
Subscribe to our blog this #hostingmonth for a chance to win one of 5 prizes of $1,000 WPMU Dev credit! Learn More.