Web style guides – a detailed design concept for your website

A unique and instantly recognisable presentation style is basically the be-all and end-all of website design. This usually isn’t too much of an issue though, as most businesses and individuals just work alone on one project. But when it comes to large-scale web projects – such as creating and editing a business website – there’ll often be several teams of employees taking care of design and maintenance. The only solution to a harmonious working relationship and a common focus between different teams is to have a style guide. So what does this term actually refer to? What should be included in it? And how can you create a style guide quickly and easily?

What is a style guide?

A style guide is known in online marketing as a set of rules for the uniform designof an online presence. Your online presence isn’t just your website – it also accounts for social networks and apps. A style guide works in partnership with corporate design and corporate identity to represent a company. It ensures that the visual identity of a company is immediately recognisable online. Web style guides are necessary to help a company present a united front across all communication channels – be it on social media, in e-mails, via the company website, or through online publications. It offers a guideline for all employees to understand how the business should be represented graphically and textually, so that potential customers can instantly recognise publications.

We’re going to take you through a digital style guide for websites, demonstrating that this is much more than just creating a pretty logo and a company colour scheme. In addition to deciding upon the fonts and colours that you’ll use, the style guide also determines image design and the arrangement of elements, while additionally containing information on the tonality of texts. If followed properly, a solid web style guide will provide your website with a uniform presentation on all fronts – even if there are different web designers responsible for different areas of the website.

Why is a style guide so important?

Those responsible for a company are sooner or later faced with the question of how their website best reflects their company – and how site visitors can instantly spot the company from their website. The answers to these questions are the foundations of the style guide – a document that summarises design concepts and forms the basis for the design of a website. A style guide is crucial for communicating these design concepts and ideas to a whole team (and in some cases several teams) of web designers, to ensure that an entire web presence has the same feel. The idea behind this is to make a brand instantly recognisable online. As a result, the ideal concept for a website should be one that helps site visitors quickly identify the brand and remember it long after leaving the site.

A uniformly-designed website gives your company a level of professionalism and seriousness. Customers and users are much more likely to feel attracted to your site and typically spend more time on it as well.

Creating the ideal style guide

When building a good style guide, it’s imperative to think about your website’s target market. To illustrate the importance of this, here’s an example: A funeral director would never use informal language to approach or write to customers. In this industry, using formal and serious language is more befitting the needs of the customer and will offer more sensitivity towards the subject of the exchange. These face-to-face behavioural standards should also be applied to the content of a funeral director’s website: if the aim is to show customers the utmost respect, then this has to be outlined in the style guide. On the other hand, if you’re planning a portal for younger people, it makes sense to talk to them in a more informal style so as to help them feel at ease and comfortable, while adding a level of familiarity and respect to the interaction.

Analyse your target markets and determine your corporate philosophy

One of the first things to consider before writing your style guide is to make sure your corporate philosophy, otherwise known as corporate identity, matches your target market. To assess this, you’ll need to carry out an extensive analysis: It’s important to define the age, gender, educational background, living situation, and interests of your target group as precisely as possible. This is because you can only ensure your website displays content in a way that resonates with your target audience if you actually get to know them. The style guide should also describe the corporate philosophy as well as the objectives and wording style: What does the company stand for and which words can/should be primarily used on the website in order to convey the company’s ideals to customers and readers?

Define your wording, choice of colour, and font style

Your corporate image and the data you gather on your target group should be incorporated into your website’s design guidelines. In order to increase the chances of being recognised and remembered, most websites use the same colour scheme as for the company logo. But your target market can also influence your choice of colour: Websites targeting a younger audience, for example, will typically have bolder and more striking colours than sites designed for an older target market. Websites for older target markets usually stick to simpler designs with muted colours. The same can be said of font choice, too – websites aimed at younger people are more likely to opt for unusual and risqué fonts to arouse interest, while traditional and classic fonts tend to be the choice for websites visited by older internet users. However, always remember the importance of readability: No matter how nice a fancy font and colour scheme might appear to be, if your website is difficult to read then it will deter all site visitors, regardless of demographics.

The style guide should also contain information on which particular colours, words, icons, etc. should not be used. There are bound to be certain words or images that arouse negative connotations that you and your business wish to avoid and distance your brand from, so it’s important to make note of these so that all employees are aware. The same may be true of colours – which colour combinations do you want to avoid? Which image content should never be posted from the company social media accounts?

Some of these may sound really obvious, but including guidelines about content that you don’t want to feature is also crucial for a good style guide.

Don’t forget about the details!

The more exact and precise that your web style guide is, the more money and time you’ll save in the long run. You should detail the guidelines as closely as possible: Colours should be clearly defined with hex codes, RGB values, and associated mapping, for example. A short description can also be useful to explain why the given colour(s) were chosen and the effect that they’re supposed to have on the viewer. It’s also crucial to outline which colours have been chosen for which element. You’ll also need to specify where to place icons, button elements, banners, and logos, as well as determining their colours of course.

All this information means it can sometimes be easier to offer a graphical overview rather than just a descriptive text. This graphic can also contain specific information about column width and line height etc. In doing so, the designer is given direct instructions about how all elements should appear on the finished page. Sizes for images, icons, and logos are also useful.

Font choice, size, and purpose of use should also be defined in your web style guide: how, when, and where should particular fonts be used? A good style guide will also ideally include direct examples for usage (designed to clarify which font should be used for which section, heading size, etc.). It’s also important to include information about line spacing, indentation, and distances between individual page elements.

Style guide examples: Here’s how to do it right

So how does an actual finished style guide for a website look? There are some free examples online – including the Channel 4 identity style guide and the web style guide for the internet giant Mozilla. Since these style guides themselves are either websites or PDF files, you can click through the different chapters and get a good overall impression of the level of detail needed for a comprehensive style guide.

The lengthy guide to branding for Channel 4 television focuses on a range of important details, including font choice, images, and corporate identity. The opening few pages are an introduction to the whole concept behind Channel 4, designed to inspire readers to understand the importance of their core values. Tone of voice is a key topic for Channel 4, with a clear indication of the way in which they’d like their employees to talk to their target audience. The style guide is broken into two basic sections – off-air and on-air – with the visual identity guidelines vary slightly between the two. However, the biggest focus of the style guide is the logo, with many details including a minimum size and exact proportions illustrated. They also showcase their distinctive ‘centre right’ positioning for their logo, outlining that this conflicts with other brands, who tend to place their logos in either the top or bottom corners of the page. There’s also a number of ‘don’ts’ regarding logo display, such as don’t place the logo in a frame, a box, or an outline.

A similarly comprehensive style guide is the digital style guide offered by Mozilla: Here, the focus is placed on the logo and its proper application. As you’ll see below, the current logo differs slightly from previous versions (but only the most up-to-date version may be used). Despite this, the creators of Firefox allow considerably more flexibility regarding the usage of coloured varieties of their wordmark ‘Mozilla’. This can basically be used in any solid colour, although unusual colour combinations, such as the rainbow colour scheme illustrated in the screenshot, are not permitted.


Section of the style guide

Main questions to answer

Basic design principles

What does the company actually stand for? What are the main aims of the web presence? Which design principles can be used to underline the business philosophy and corporate identity?

Target groups/personas

Who is the website/social media account/web presence aimed at? Who’s in the target group? What are their preferences, desires, and interests?

Tonality and wording

How should customers, readers, and visitors be spoken to? Which words/expressions should be used and which are banned?

Logos and wordmarks

How should logos and wordmarks appear in display? When, how, and where should/must they be used?

Basic website structure

How should your website be put together? How wide are different columns and how large should line breaks be? How should elements be ordered on individual pages? Which menu structure should be implemented?

 Colours

Which colours underline the intention of the website and speak to the target market most effectively? What are their RGB values and Hex codes? Which colours can be combined and which are best left out?

Font style

Which font style should be used for which texts and elements? How big should the font be and which colour(s) can it have?

Icons

Which icons can/should be used? Where should they be implemented and what do they stand for?

Content

Which content should be used to fill your website/web presence? How should this be implemented using graphics, text, and multimedia elements?

Maintain and update

Once you’ve created your style guide, your focus has to turn to updating and editing your web presence accordingly. This is the only way to ensure a united front across all communication channels in the long run. A uniformed approach is essential for branding and corporate identity. But this doesn’t mean that the style guide for a company should never be changed. In fact, quite the opposite: You should regularly maintain and update your style guide. Are your designs still current? Is your choice of font still modern? Our Mozilla example shows that logos can change a lot over the course of time – in most cases, this is a necessity for brands to remain modern. Lastly, remember that the tastes of your target group may change, too. So while it’s important for your web presence to remain consistent and true to your pre-defined style guide, you still have to pay attention to changing trends and update your specifications accordingly to make sure your target group doesn’t lose interest in your branding.


Wait! We’ve got something for you!
Get your .co.uk domain now, the first year is free.

Enter the web address of your choice in the search bar to check its availability.
12 month for £0/year
then £10/year