Service designers, front-end developers and other experts designing and implementing online services must often work without clear instructions and not knowing the vision of the designers in charge of the original appearance or user experience. At the same time, increasing customer expectations constantly raise the bar for the user experience, which produces pressure to create high-quality solutions quickly. Carefully prepared graphic guidelines are then a golden asset when designing online services.
After our 20+ years of experience in the business, we still come across very poorly prepared graphic guidelines. Now more than ever, graphic guidelines should be so clear that the brand experience does not fall short in appearance or service level. Graphic guidelines should not be drawn up in the 2020s without taking digital environments into consideration. Otherwise you will see the snow #F9EE90 instead of #FFFFFF.
If you’re looking for bids from different companies to design and implement your website, good graphic guidelines will facilitate the design process and implementation in a very good way. In addition, the outcome will be of higher quality and more seamless. Guidelines also accelerate technical implementation considerably, and it will be easier to compare different offers if brand lines are clear. As a customer, you can be sure of what you’ll get, and you know from the outset that it’s possible to create the targeted look and atmosphere. If the code must be changed afterwards to improve the visual look, it always incurs additional costs and requires extra effort.
How about design system? Thank God that concept has been invented! Design system is a large component and interaction library which includes a sample of every element that the company’s website could use. Design system is not only a visual guideline, it also demonstrates by interactions how different elements work.
However, design system is a large entity as itself and making one is a big project too. That’s why it is not an optimal solution for everyone, and only a few companies have their own design systems. But there are more alternatives than the traditional graphic guidelines and design systems, which are merely the two extremes. There are plenty of opportunities between them, and every company can find the most suitable solution.
3 tips how to make a good graphic guidelines
1. Assemble a good team
You will need the following experts:
- an experienced AD
- UX designer
- front-end developer
- an accessibility expert
A common problem is that graphic guidelines are often prepared by excellent print art directors on their own, for example. They don’t necessarily have much – if any – experience in digital environments. And after that, digital environments are often completely ignored in the guidelines, or the guidelines are just copied directly from the print world and used as is in digital environments. This means the characteristics of the digital environment and the user experience in practice are forgotten. That’s a pitfall that can easily end up damaging good services and content later. Customers often use online services most. If a brand fails to have high-quality online services, great glitter colour or embossing on a brochure cover will be meaningless.
However, the competence and vision of the original AD is still golden and that should not be ignored. It just needs to be directed to the digital world, with digital opportunities and features.
Most of the time, technical experts must develop services without useful instructions and not knowing the vision of the designers in charge of the original brand. The fewer instructions they have for digital services, the more creative technical experts must try to be. It can sometimes be a blessing, but mostly not. Remember that their job is not visual appearance or user experience design. Their job is technical implementation. If they have to quickly design visual elements or the user interface, it can lead in the wrong direction and increase costs.
In some projects, there is no visual UX designer to instruct technical experts, and in any case, the designer is unfamiliar with the original idea, even if they took part in the project. Designing individual parts without perceiving the big picture produces a visionless design on the internet, which is enough for signing a development ticket, but which doesn’t move the business operations forwards.
2. Focus on the correct matters
Not everything has to be pre-designed, but take the most important matters into consideration. It’s easier to instruct new team members when you have a clear idea of the outcome.
Include the contact person who’s actually capable of answering any questions in the graphic guidelines. Tell instructions when guidelines should be followed, and when not. There should stand at least the crucial user interface and visual elements. Tone-of-voice should also be included, at least on a high level: how do we communicate in the digital world? For example in case of error, which one would be more comfortable for user:
a) “ERROR! Phone number missing!
b) “One more thing: add your phone number”
And not to mention “layman’s terms” – a clear and concise language which avoids for example uncommon vocabulary, long sentences etc.
Mobile first, logos, colours and typography
Mobile is the major way of use, it is self evident, especially in B2C digital services. Also in B2B services mobile use and requirements are increasing all the time. That’s why graphic guidelines, design systems, etc simply can’t ignore mobile use. In many cases digital service design work starts at mobile user experience and appearance.
Does the service have light and dark mode, what they look like? For example, services and softwares used at hospitals should have a dark mode, because the environment is brightly lit. And what does a logo with a long text look like on a mobile device? Will there be room for anything else in the header? If the logo has stunning details, will they be visible in a small size in a social media profile, for example? Does it need a simplified version for the social media profile image? And what about accessibility? What will the page look like when using the colour-blind function, for example?
Can the brand’s main colour be accessible as is? If not, develop an online version for it. Brand purists may resent this idea, but it is sometimes necessary to come up with a variation of “the one and only” brand colour to improve accessibility. For example, it’s extremely difficult to make an online service well-functioning and accessible if the only colours used are blue and grey. Light and neutral percentage tones are appreciated especially when making services that resemble tools.
Even if brand fonts were carefully chosen and sometimes tailor-made far away in London, they aren’t necessarily suitable for use on a small screen in a digital environment. In this case, there need to be alternatives for online use. Study which font works in different environments and is in line with the brand font. Different languages also have different needs. For example, the Finnish language has a lot of really long words because of compound words. And especially in public sector texts, words are even longer than in everyday texts. Then some narrow font version could be better. Don’t forget Cyrillic letters as well.
A good font is not enough. The guidelines should also include information about how to use the font in the online service or app: how to create a hierarchy with it, what special effects should be used, and what should be avoided.
Lines, buttons and white space
- Lines. Every online service should have separating lines. That is a line, for example between two text columns, and it tells the user “context changes here”.
Most separating lines are one pixel thick and so light that people with normal vision find it difficult to see them – not to mention people with presbyopia or other visual impairments. However, this simple and practical element can be used to accentuate the brand and improve the user experience. - Buttons. They are important elements, leading users to the right direction and taking action: subscribe, register, buy, etc. Buttons should stand out of their environment, by colour, shape and position. Graphic guidelines should include all button versions (primary, secondary, large, small, etc) and their different states.
- Text links. Users must clearly see what part of the text is a link. There should also be a different color for the links that have already been clicked. It may remind you of the Amazon of the 90s, but it improves usability and accessibility more than anything.
- Margins, white space. This familiar and efficient design effect has many names. People still do not know how to take advantage of white space – keep that in mind when designing. If white space is not taken into consideration, elements are often left too close to one another in the code.
3. Get technical experts to test your graphic guideline, design system etc
End user testing is also useful when preparing graphic guidelines.
No matter if you ended up with graphic guidelines, design system, or something in between, you should test it with a technical expert, like a front-end developer. See how that expert could produce even one single page, not to mention the whole website. If some things are impossible, problematic, or raise confused questions, complete the guidelines by those elements and topics.
End users of the service want smooth and seamless use. They also want it to meet their expectations, or even exceed them. If this is achieved, the implementation has been carried out skilfully and accessibly, respecting the brand.
Bonus: make the graphic guidelines available to everyone
Companies’ graphic guidelines are often considered like big trade secrets. They are hidden in carefully protected marketing or communication silos, and they can only be accessed on request, with a delivery time of 3 days.
Strong request: please make your graphic guidelines freely available on your website. It will save many people a lot of work, and everyone will benefit – your brand above all.
Get to know the following tools:
