Can I get a buzzed beater on articles before the last sprint deadline?

This time we’ll be talking about UI guideline, what it is, why it’s important, and how my team created (well, technically adapted one) for our project. I said adapted because the project is actually a proof-of-concept MVP for an extension of an existing product (that was way more verbose written down). It means that we’ll be basing our UI on an existing application’s UI so it feels like an extension of it.

What is UI Guideline?

UI design guidelines are sets of recommendations on how to apply design principles to provide a positive user experience¹. It provides instructions to both designers and developers alike in developing an intuitive, efficient, and consistent product. The content usually consists of color palette, typography guidelines, component guidelines, interaction guidelines, and more.

Why We Need UI Guideline

A project’s UI design guideline will be the single source of truth the dev team can refer to whenever they’re working on the product². Here are some reasons why a UI guideline is needed.

Consistency

This is the biggest reason for a UI guideline to exist.

Imagine you’re shopping on a well-known e-commerce site whose signature color is green. Then you clicked into some page in the site and you found a page with entirely purple interface, would’t you be bamboozled for a second?

The above scenario wouldn’t happen if a UI design guideline exists and the site’s developer follow it to the letter.

Faster Workflow

Having a guideline also makes workflow faster. By having a single source of truth, a large portion of thinking and preparation is done beforehand, so designers and developers only need to execute the work according to the guideline. You wouldn’t need to create a beautiful form input design on the fly because it’s all documented on the guideline.

Focus on Solution

Similar as above, faster workflow also means that designers can focus on creating solutions. They wont have to decide whether to add border to the card or not, or which button state to use for cancellation. Everything is decided beforehand in the design guideline. Therefore, the designers can focus on other important things, like the page layout and how informations are arranged within the page.

Design → Code

UI guidelines also help developers translate visual designs into code. With consistent design, the implementations done by programmers also become slightly easier. There would be reusable components and there wouldn’t be any need for visual decision-making on the spot by the programmer.

When We Need UI Guideline

But here’s the thing, you don’t always have to create a UI design guideline for every project. It really depends on your team’s priorities. Some may prefer to get the work done ASAP without putting too much attention to consistency as it will be fixed later down the line. Some others may want to create the UI guideline since the beginning so the design process is more streamlined and consistent.

The articles I’ve read² suggests that we start to need a design guideline when:

your project has a lot of pages or screens – some of these pages are likely to have repeating component, say, a form. It would be a hassle to look through the existing pages to see how the form looks like (or whether or not it’s been implemented before).
your project involves multiple designers – especially true if the team of designers are working together for the first time. Each may have their own style and preferrence. A guide is certainly needed to make the designs uniform and consistent.

Creating a UI Guideline

Another article I’ve read³ also describes how to create a UI design guideline step by step. But, since those wasn’t the steps my members went through, I’ll just tell you about our process.

Sketch Design

The client we worked with provided us with some sketches as to how they want the pages to be laid out. We took this sketches to Whimsical and started doing more sketches and flowcharts to further develop the designs.

From these sketch alone, we knew we would need buttons, form inputs, a tabbed interface, and a card to hold a token’s information.

Define Colors

source: https://ajaib.co.id/

As for the colors, we know that we want our project to match the visuals of its parent. We took a lot of screenshots and started picking the colors from said screenshots.

The UI library that we were using, native-base, actually have a defined color palette that comes along with it. It was very lucky for us that apparently their color blue.500 matches almost perfectly to ajaib’s blue. So, to save time, we only used the default colors that came with the library and ran along with it.

So far (as far as I remember), aside from black and white, we only used that one blue color blue.500, a lighter shade blue for some accents, and somewhere around three shades of gray for the entire project. It didn’t really take a lot of colors.

Typography

For typography, we also based our guide on the default typography that came with native-base library. Since everything is already there, we essentially have our guide made for us.

Moral of The Story

Having a design guide really helps when you’re doing bulk page designs and there are a lot of pages you need to work on. It lifts up the burden of having to decide things on the spot and looking up what you did before when you need to do the same thing a second time.

I can't really say this for myself because I’m a very much a visual-design-enthusiast kind of frontend developer. Some of my friends who prefer backend but was obliged to do frontend stuff are usually grateful to the existence of a design guide. The reason is usually something along the lines of, ‘I’m not good at design’, or ‘I’m not a design guy.’ Since everything is decided on the guide, they only need to follow the guide to the pixel and not have to worry the output would look horrid.

TL;DR

UI design guide helps designer to work faster by completing the decision-making process beforehand
The guide may also help programmers who feel clueless about design
Having a guide as the single source of truth provides consistency tho the project

That’s it for today. See you on the next one~