UI style guide

A style guide focuses on the main building blocks of the UI, such as colour, typography, buttons, forms etc, providing a foundation for building a coherent user interface and ensuring consistent implementation.

A style guide is a document that describes the design standards of a digital interface.

It provides examples of different elements that form the interface, notes on their responsive behaviour and instructions for when and how each element should be used.

It can be a stand-alone document or a part of a wider design system where it sits alongside a pattern library and provides instructions for content creators. Most commonly, a style guide is created as a part of the user interface design process and serves as an instruction manual giving rationale to the UI examples. Alternatively, it can be an output of a UX Audit created after all the building blocks of the current interface have been documented, reviewed and refined.

Unlike a complete design system, the style guide does not aim to document every instance of every element. Instead, it focuses on the main building blocks of the UI, such as colour, typography, buttons, forms etc, ensuring consistent implementation. As a result, a style guide is a lot quicker to create and easier to maintain. It can be used by everyone in the company from designers, developers to project managers, content creators and even external contractors. 

A style guide provides a foundation for building a consistent user interface that can scale and adapt to future requirements without needing constant maintenance from a dedicated team.

 

Our process

At Make it Clear, we typically follow the structure below to create a style guide:

  1. Discovery: identify and review existing principles, standards or brand assets that should be included.
  2. Definition: at this stage, we will work with you to define the exact requirements and the format the guide should take. Typically, we use Figma to create the guide, as this provides an excellent link between design and development 
  3. Solution: the guide is created in an iterative process with feedback and approval from your internal teams. The outputs are developer-friendly and form the basis of an ongoing structure that will define your digital presence.

 

What should a typical style guide include?

Depending on the interface type, a style guide typically covers the following areas:

  • Colour
  • Typography (including links)
  • Grid
  • Buttons
  • Forms
  • Controls and selectors
  • Icons
  • Images
  • Navigation
  • Search
  • Help
  • Cards
  • Lists
  • Modals
  • Responsive principes

 

Where possible, it should include examples of default and responsive states and notes on use and implementation.

 

Can we help you create your style guide?

Make it Clear has extensive experience in creating style guides. Why not book a free 30 minute Clarity Consultation with our team and we can help you achieve your goals.

 

March 9, 2022

UX Glossary

A glossary of commonly used UX terms to help designers, researchers and developers communicate with clients, stakeholders and fellow team members.

November 22, 2022

A guide to UX surveys

Discover how UX surveys collect qualitative and quantitative insights from a group of users on their experiences using a digital product.

November 16, 2022

UX/ UI tips: A guide to the grid

Unpack how grids provide structure and guidance which ensures your UX is seamless and enjoyable for all screen sizes.

November 10, 2022

Winning Gold in the London design awards

We've won the Gold award in the 2022 London Design Awards for our Reputation Portal UX/UI project with Spamhaus.