When the same team is in charge of designing all the elements of a brand (web, logo, carton …) It is often not necessary to create a style guide, since the designer will be the same in all points and knows perfectly how to design each one of them. In fact, the most common is that it is designed thinking from the beginning on each of the elements that have been commissioned as a whole and then individually.
However in other cases, where work is not global, the design of a style guide can help the client to explain to another team what the original designer intended to convey.
Either way, a style guide, as its name suggests, is still a guide, and in no case the philosopher’s stone. That is, if, for example, we start with the logo, it will help to create other elements such as cards, web signage …, but in no case with the guide will be fully defined. It should be noted that only some details are specified and advised to be transmitted, but that the overall design of the new element will be determined by the new designer.
So, it is convenient to say that a style guide is a free document, that is, we will give you advice on some elements to include, but in no case is the absolute truth. If the designer believes that you should include others or remove some of the ones we propose, go ahead! But with this sample we try to explain those that we consider are important to appear, to understand the good meaning of the work.
1. Defining the brand image
Every style guide has to start from the brand image. It is difficult to design or know how to design the other corporate elements if we do not know how the logo will be.
This is usually the basis of the style guide; so to start with, we have to study the branding and the competition and know where we are going to go. It is time to investigate, to study and to have in our mind ideas of how we can develop the image of the company.
Once we have it developed, we can take the first step to design our style guide, in which the logo will be the starting point.
2. Finding different logo options
Once we have defined our logo with its corporate colours, we have to take into account the different options in which the logo can appear, so it is appropriate to specify how the design will appear depending on the situation (on a white or black background, in responsive ….)
As well as determining different measures of recommendation. Obviously the logo is editable and we can enlarge or reduce it, but depending on the design we can reach a point where we resize it so much that it loses its essence, and this is what we have to decide at this point.
3. Defining your font
Once we have defined our brand image, we have in turn to decide several elements such as colours or fonts. The colours will be fixed for the other elements, but the font that we use in the logo may or may not be maintained for the different elements of the web.
It is the first decision that we have to take into account: where are we going to use the font of the logo? And in case we do not use it, what will be the chosen font, taking into account the combination between them.
So well, we must create a guide in which to determine the fonts that are used with the different sizes of text depending on the place in which they are, so that the hierarchy of the font and also its colour is defined.
This section has to give us an idea of how fonts will appear in the different elements that compose the brand. Obviously they cannot all be represented, because we can find an element that needs a specific typographic design, but it has to be a general guide of the different sizes and colours of text that are used in the brand.
4. Defining the colour
Just as we must define fonts, we must also make clear what the corporate colours are. As we know, the colours have a code that makes them unique and these are the codes that we have to give, so that regardless of the support, we use the colours we have designed.
We are going to extract these colours from the main logo and also from the different options of it, although it is also a good idea to take other secondary colours that combine with these, mainly neutral tones that allow extending the range of options.
The more options of combinations we offer the more versatile will be our guide and for more elements can serve.
5. Defining general elements
It is very difficult to be able to define the general elements that may be needed for the development of the brand, unless we, a priori, had an idea of them. What we can define in the guide are recommendations for use, so that they can serve as a starting point for the design of it.
This is complicated, I know, but there are some factors that can be determined, such as the size of images, hue, colour of the icons… They are general specifications but they can serve us as starting point for the design of these elements.
6. Defining the spacing
This is a point that usually goes unnoticed but that is very important. Sometimes the spacing is responsible for a poor readability of the text. It can also be intermingled with other elements so we do not understand the meaning of the design.
In this way, the decision of spacing, whether the logo with its borders, the hierarchy of the text or the general elements will help us to know how we want the global design to be.
In addition, a spacing that is repeated in all the elements gives a more serious and professional aspect.
7. What to do / not to do
Clearly this is not a mandatory element but it can be of great help in any style guide. This point consists in giving some slight guidelines of what we can or cannot do with each of the elements, such as logo, icons, images…
That is to say, although we have defined each of the elements in the 6 previous points, we can find ourselves in the doubt of whether or not we can change them. Well, at this point we should talk about those actions that we best ignore and do not repeat under any concept.
For example, we have defined all the colours that should be used in the icons, but when we talk about social icons one of the options that are shuffled is that they appear with their characteristic colour; well, if we are clear that we do not want it to happen, this is the point we must include.
It is very useful to include actions that we do not want to use, because they can detract from the overall design.
Wao a great article! So an informative article and I really appreciate your interest. As a typographic designer, The section “Defining your font” is so helpful for me. Thank you.