Web style guides – a detailed design concept for your website
A unique and instantly recognizable 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?
- Why is a style guide so important?
- Creating the ideal style guide
- Define your wording, choice of color, and font style
- Style guide examples: Here’s how to do it right
- Maintain and update
What is a style guide?
A style guide is known in online marketing as a set of rules for the uniform design of 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 recognizable 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 recognize 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 color scheme. In addition to deciding upon the fonts and colors 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 summarizes 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 recognizable 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 behavioral 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.
Analyze 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 color, 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 recognized and remembered, most websites use the same color scheme as for the company logo. But your target market can also influence your choice of color: Websites targeting a younger audience, for example, will typically have bolder and more striking colors than sites designed for an older target market. Websites for older target markets usually stick to simpler designs with muted colors. 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 color 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 colors, 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 colors – which color 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: Colors 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 color(s) were chosen and the effect that they’re supposed to have on the viewer. It’s also crucial to outline which colors 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 colors 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 Boy Scouts of America’s brand identity 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 the Boy Scouts of America (BSA) focuses on a range of important details, including font choice, badges, branded products, and corporate identity. The opening few pages are an introduction to the whole concept behind the BSA, designed to inspire readers to rally behind the project. One big recurring feature throughout the style guide is the use of full stops. The BSA’s main slogan is Prepared. For. Life. ™, and their style guide regularly highlights the importance of the period marker to add weight and power to sentences and statements. The BSA also offers a lot of information on brand positioning and the importance of maintaining a good brand image across all fronts.
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 colored varieties of their wordmark ‘Mozilla’. This can basically be used in any solid color, although unusual color combinations, such as the rainbow color scheme illustrated in the screenshot, are not permitted.
Both examples here show two different approaches to style guide presentation, though neither is particularly wordy: Good illustrations and short descriptions are the best way to make sure your style guide is clearly understood. Most important of all is maintaining a logical structure: The Boy Scouts of America utilize an effective contents page for their PDF format, while the Mozilla web style guide has a menu structure on the left-hand side that can be used to quickly navigate pages.
Of course, not every company is able to include an effective style guide on their own website, which is why we’ve included the BSA’s PDF style guide to show how you can create a well-structured handbook that could even be given to employees and designers in a physical format. A benefit of this is that it will encourage employees to read and fully absorb the style guide before they start working.
The following table offers a useful summary of the most important points to cover in any good style guide:
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?
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?
Which colors underline the intention of the website and speak to the target market most effectively? What are their RGB values and Hex codes? Which colors can be combined and which are best left out?
Which font style should be used for which texts and elements? How big should the font be and which color(s) can it have?
Which icons can/should be used? Where should they be implemented and what do they stand for?
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.