Any website must have a homogeneous, coherent, and easily recognizable presentation. It is not very difficult to achieve this, as long as it is a small web project.
On the other hand, for larger projects, many players are usually involved. So, in order to work around the issues and foster a consistent approach from each team member, style guides are a simple solution.
So, what is a style guide? And how do you set up a style guide?
That’s exactly what we’ll try to explain in this blog article.
What is a style guide?
A style guide in digital marketing designates a synthetic document giving the keys to homogenize its presence on the Web. This of course concerns websites but also any accounts you may have on the Internet, such as social networks or applications.
A style guide is therefore at the heart of the visual identity of a company. It ensures the company is recognizable on the Internet. The style guide is therefore useful for presenting the company in a regular and logical manner on its various communication channels (whether social media, emails, websites, or any other publication). It provides guidelines for the employees of a company, with regard to the graphic charter and the editorial elements, so that ( potential ) consumers can immediately identify the company.
Thus, a digital style guide for a website encompasses much more than a simple logo and organization plan: it also defines the font to be used, the colors, the location of the images, or the placement of the various content, and even gives indications on the style and tone of the texts. The guide must be respected so that Internet users do not notice that several collaborators have worked on the same part of the project.
Related: Favicon sizes (The complete guide)
Why is a style guide so important?
How is the website going to best reflect the business, and how can it be directly recognizable to its visitors? These are questions that will sooner or later come to the minds of the leaders of a company.
The style guide, therefore, aims to answer them: it indeed constitutes the basis for knowing the concepts of presentation of the Web project. It is thanks to this style guide that it will be possible to best match your target and to communicate harmoniously.
Ideally, a website is designed in such a way that it makes it easy for the user to identify the brand and creates a desire to be recommended.
A uniform website helps convey an impression of seriousness and professionalism. Users or consumers must also feel that we are talking to them; this allows them to be retained on the site.
Develop your ideal guide style
In order to develop a proper style guide, it is first of all essential to consider the audience of your website. For example, a banking services site would in no case allow itself to address its customers.
What indeed applies in face-to-face meetings with customers also applies to the content of websites. While familiarity or address may seem obvious in your niche/sector, clarifying this point in a style guide can still avoid the odds, especially if you regularly welcome new employees. Style guides can complement their training.
Analyze the target group and respect the company’s philosophy
In establishing a style guide, it is vital to define the philosophy of the company by questioning its values.
In order to achieve this, some data are worth noting and analyzing: age range, gender, level of education, the standard of living, interests of the target, etc. It is only by knowing your audience that you will be able to develop suitable content.
The style guide will then explain the philosophy of the company, clarify its objectives and define the wording: ask yourself in particular what is the raison d’être of the company and what are the most appropriate keywords to use on the site to convey an idea to customers.
Define wording, colors and writing style
The identity of the company and the conclusions drawn concerning your audience should be incorporated into your style guide.
In order to make a business easier to recognize, web administrators often choose to grab the logo’s colors. But your audience should also influence the choice of the colors: thus, websites aimed at a young audience will often use more conspicuous color codes than on websites for older people who may prefer sober colors and an uncluttered website.
In addition, a somewhat unusual writing style can arouse curiosity in artistic sectors, while a more classic style will have more impact for sectors wishing to convey an image of seriousness. However, be careful with overly original writing styles that are difficult to read and that will make customers want to leave your site.
The style guide will therefore at the same time indicate which colors, keywords, icons, etc. must not be used under any circumstances. Certain words with negative connotations can favor associations that your company would like to do without. The same goes for colors and graphics: what are the inappropriate color combinations? What visual elements should be avoided?
In short: the guidelines of your style guide should state what you want on your site but also what to avoid.
Style guide: don’t skimp on the details
The more specific you are, the less time and money you will have to spend on picking up inconsistent parts of each other’s work. The style guide should therefore not hesitate to go into details. The colors must for example be entered with their Pantone and can be assigned to types of content elements.
The location of icons, buttons, banners, or logos will generally be established with indications of the colors required. Finally, we advise you to add short paragraphs explaining the impact sought by the use of your colors.
Therefore, a graphical overview is much clearer than any textual explanation. From this representation, it is possible in particular to indicate the width of the columns and the height of the rows: the designer can thus directly see what the whole site should look like. Indications on the resolution and size of images, illustrations, and logos are also welcome.
Likewise, the intended writing style should be explained: where and how should the various company-specific fonts be used (if there are several)? Ideally, the style guide has concrete examples for their use: these examples will show what the font, size, and colors are for the main headings, subheadings, body text.
In the same way, one will find in the guide of the instructions for the spacing, the spaces between the elements of the page, the paragraphs etc …
Guide style examples: how does it work?
What exactly does a guide style look like? Some examples are available online like on the Website Style Guide Resources or more precisely that of Mozilla. The style guides of some companies are indeed accessible to all and available as a website, which is convenient to navigate between the different instructions.
The Mozilla group’s style guide is particularly comprehensive: it explains in particular how its logo should appear and what its possible uses are.
It can be noted that the old logo is also presented, even if it should not be used anymore: this is used to sharpen the eyes of the collaborators and to avoid possible errors. The use of colors for the “Mozilla” brand name, on the other hand, is more flexible. It will indeed depend on your page background.
Multicolored logos should be avoided (like rainbow-colored logos).
Thus, we notice in the examples that it is not necessary to have a lot of text in order to make a good style guide. For most guides, a short description and good illustrations are sufficient. However, a logical structure is important: with Mozilla, the navigation menu is on the left.
Of course, not all businesses have to create a website with their style guide. In general, a well-structured user manual is put in place, for example in the form of a PDF document. It can thus be communicated to new employees before they get to work.
The table below summarizes the most important points that a good style guide should clarify:
| Highlights of the style guide | Core questions |
|---|---|
| Fundamental principles of design | What are the values of the company? What are the goals of the website? What design principles make it possible to highlight the company’s philosophy? |
| Target / People | What is the target to be reached on the site? What are its characteristics? What are their preferences, wishes, interests? |
| Ton and wording | How to address customers/readers/visitors? What are the catchy words or which are taboo? Which ones to use? |
| Logo and brand name | What does the logo and brand name look like? When, how, and where should they preferably be used? |
| Basic website structure | How should the website be built? What is the size of the columns and text boxes? How are the different pieces of content organized? How are the menus arranged? |
| Colors | What colors best underline your site’s intentions and match the target? What Pantone colors do they correspond to? |
| Writing style | What writing styles should be used and for what editorial elements? What is the font size and color? |
| Icons | Which icons should I use? How should they be arranged and what do they mean? |
| Contents | What type of content should the final site contain? How should this be translated graphically, textually? |
Monitoring and updating
Once the style guide is established, it is necessary to keep maintaining and updating the website. This will permit you to guarantee the homogeneity of all communication channels in the long run.
Consistency is essential for branding. This does not mean that the style guide of the company should not be changed. On the contrary, the challenge is more to check that it is well suited to the context: for example, is the design still trendy, or should the logo be updated? The Mozilla example shows that the logo can change over time and even that it may be necessary.
The tastes of your audience may also change. It is therefore essential to figure out the trend and therefore naturally update your website at their pace, to ensure a good web presence.