← Back to all tools

Styleguide

Design guidelines ensures a unified visual expression across all systems inline with the brand identity.

Suggested time Whole project
Participants 2+
Fundamentals
Understand
Vision
Make
R&D

You will need: Understanding of key media and touchpoints and needs of your audience, visual design skills

steps

  1. Visual language is like any other language; if it’s not really understood then even small subtleties can mislead and add to confusion. The goal should be to design a living design system that is being updated throughout the project. It can make the technical building faster and the user experience more coherent. The first question the design team should always ask themselves is ‘is it easy to understand’ and ‘is it simple to use’.

  2. Create the guidelines by starting with the screen grids for the right mediums. When doing this, you need to know what font you will be using and what spacing rules the typography obeys. This will give you a great spine to build the rest of the design on. Use a baseline grid to hang all elements off, and use consistent spacing rules to create systematic and consistent rhythm.

  3. Create colour palette rules. Aim to use natural instinct, meaning that if you use red in alerts, the user can instinctively detect that the action needs their immediate attention. Green on the other had is a normal ‘go’ and a ‘yes’ colour. Avoid using tones that harm clear reading. Collaborate with brand stakeholders but always put the user first, never the brand first.

  4. Keep updating the guidelines with all elements that are needed in the design. Think of interaction and motion, often they can solve issues that static graphics cannot alone solve.

See in action