How To Craft The Perfect UI-Style Guideline: Dummies Edition

Tanya is a 40-year-old woman who works at a computer repairs shop. Tanya’s spent the last five years or so collecting stolen computer parts from the shop. All this, in the hope, that one day she’d be able to assemble the perfect computer system for her teenage daughter.

Unfortunately, as Tanya starts to put all her pieces together, she realizes that most of the parts are incompatible with each other. And that’s because some crucial design features have transformed over the past few years.

With the knowledge that she has, Tanya still manages to make it work, but it’s nothing like she thought it’d be. It’s barely working and not the futuristic PC she envisioned for her daughter.

UI designers off late have been facing a similar problem to Tanya’s. When it comes to UI/UX design, time can be the most formidable arch-nemesis. Given how rapidly trends evolve and change, web design stays vulnerable to innovation in leaps and bounds.

If you’re a creative working at a UI/UX design agency, not having a concise style guide in place can lead to a lot of problems. Think visual inconsistencies, user experiences that are not quite there, and your reputation as a brand can take a nosedive.

What Is A Brand UI Style Guide?

Put simply, a brand UI style guide is a guidebook to everything that an organization or brand stands for, and how it presents itself to customers. These could be logos, colors, photography and font. It’s a powerful tool that ensures consistency in your design work and easy synchronization between marketing, design, sales and support teams.

Talking about consistency, here’s a simple example.

Say you have a favorite burger joint that you’ve been going to for years. All of a sudden, one fine morning, in its place you notice a new outlet with a different logo and color scheme. You’d feel puzzled. You’d probably hesitate to buy a burger. That’s because you’re used to a different style and way of doing things. This is exactly what brand inconsistency means. Style guides help to eliminate this.

So why are UI style guides essential? For starters:

  • These provide a ready reference for developers to use and work on their code snippets.

Most people form their first impression of a brand from how it looks visually. So a style guide helps to codify every necessary detail and how designers can use these assets.

So, How Do You Create A Brand UI Style Guide?

Striking the right balance with your style guide can be a very tricky affair. Most organizations are incredibly fussy about how they approach the brand design process — for example, Spotify.

At first glance, the style guide for Spotify looks seemingly easy to understand, sketched in green and white monochrome. But look deeper, and you’ll notice diverse color codes, variations in logo and album artwork.


So how do you go about creating your very own brand UI style guide? Here’s what you need to include:

  1. Responsive Layouts

Modern UI design is incomplete without responsive layouts and grid systems. A staple in web design for quite a while, responsive layouts help delineate how interface layouts will look on different screens. This also means adding footnotes, examples of padding, placement, alignment and spacing.

With responsive layouts, you can do away with the need for repetitive screen designs. Ollo, the credit card company went all out to incorporate responsive design in its style guide. The result? A game like experience that demonstrates that you can always get very creative with your design but still stick to the basics in terms of colors or font.


2. Typography

UI design style guides are incomplete without typography. It’s the most common and yet an essential design element, so it makes sense to focus on it. Your style guide should clearly mention instructions for every kind of text: whether its the Title or the Headings or the Body Texts.

Style Guide by Unified Infotech

3. Buttons

Details matter. Iconography matters. How you represent the brand through social media icons matters too. Whether it’s website UI design you’re working on or mobile UI design, make sure your style guide includes ample documentation for buttons, their colors, sizes and placement, among others.

Style Guide by Unified Infotech

Some Additional UI Design Components

In addition to the ones we mentioned above, your style guide may also contain these:

  • Tabs
Style Guide by Unified Infotech

Brand Guidelines And Building A Solid Visual Identity

Besides the usual UI/UX components, style guides should contain precise guidelines that make it easier for design teams and organizations to refer to, incorporate and mull on.

Here’s what we think is important:

  1. A Table of Contents

Before you start to craft your brand UI style guide, make sure you integrate an organized table of contents. Not only can everyone quickly find their way around, but it also helps you to keep track of what you have included.

Style Guide by Unified Infotech

2. Spacing Instructions

Most style guides usually cover the spacing instructions, in the beginning, so make sure you include your general thumb rules right in the page layout section. You can take a cue from Atlassian’s style guide here.


3. Winding Up

Image: Search | unDraw

So now you know how to create a visual style guide for your brand UI and what components you definitely must include. Before you get started with your style guide, make sure it’s easily accessible and housed on a platform everyone can use.

UI design software such as Figma or InVision offer cloud-based services that the entire design team can use. These platforms provide an excellent way to house multiple style guides and also pave the way for feedback exchange and brainstorming.

Thinking of giving your brand image a makeover? Or need someone to do a style guide for you? How about availing UI/UX design services?

Going DIY might seem like a great idea, but the magic always lies in teamwork and collaboration. Get in touch with us today.

CEO & Founder Unified Infotech

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store