What is a Style Guide?
A style guide is a group of elements that act as a guideline for a design to give it a personality. It also helps achieve consistency. In branding, it is called a brand style guide. Hubspot defines it as “the collection of specifications that help you present a consistent visual brand [design] to the world. It’s the guardrails that you share both externally and internally that help you say who and what your brand [design] is. It’s how you communicate (both implicitly and explicitly) what your brand [design] stands for.”. Since we’re talking about design, we’ll just replace ‘brand’ with ‘design’.
Simply put, a style guide is a documentation of all the key elements of your design.
What’s the general process for creating a style guide?
A style guide typically comes after the creation of a mood board. But as we know, the design process isn‘t always linear. Anyway, one way to begin your style guide is to cull ideas from your mood board and matching them with yours to create something unique.
What should a style guide look like?
Like this 👇
Like this 👇
It should contain things like:
- Brand logo
- Colour palette
- Iconography
- Typography
- UI elements — size, spacing, etc.
How’s a Style Guide different from a Mood Board
Let’s get straight down to a list:
- A mood board is created to organize creative ideas for a design. A style guide is an established guideline for a design drawn from those creative ideas.
- A mood board inspires the thematic feel of a design. A style guide clearly outlines this
- Creating a mood board will help save time by addressing design issues early, and see what changes can be made. All issues addressed in a mood board are used to create a style guide which is not often altered.
- Mood boards are a collage of images, patterns, colour swatches, fonts, logo ideas, etc., that are drawn from other sources. Style guides are created specifically for a design, the real logo, colours, fonts, buttons as well as rules on how to use them. You could use established sites like Pinterest or Evernote to convey your style ideas.
- A mood board could be done either physically or digitally. A style guide for a UX design is usually done digitally.
