User Interface Design Guideline 101

hello peeps, I want to share something about user interface design tips, especially about Design Guideline. Back a few times ago, when I was starting into User interface design I just visualize everything out because I don’t design a whole system screen just for showcase. So for me in that time, Design guideline isn’t a big deal. But when I jump into production, it’s a whole different story.

This article covering:

1. What is UI design guideline
2. Example of UI design guideline
3. Creating UI design guideline
4. What is the advantage of creating UI guideline

What is UI design guideline

When you design a user interface, one of the many things that important is consistency. Especially in the production area, imagine you need to design a hundred screens and collaborate with other designers. How do you make sure they or you design with the same style? how to make sure they use the same font face, font size, even color? or padding?

Second, is about the time limitation. A designer is often racing with a time — Deadline — so how do you make the design process faster? When starting, I often spend the most time thinking about what font should I use? and what size is fit with the design? and it is taking much time. It is fine if you working on a small project that only needs a few screen design.

So here it is what design guidelines for. Cite from Interaction-Design description:

A design guideline is intended to help designers understand how to implement a principle, without restricting their creativity in design, as the commanding inflexibility of a rule might.

In another term, UI design guideline is a set of rules to design a user interface that should be followed by a designer. Here is the scope of UI design guideline:

• Colors — List of colors that can be used.
• Typography — Rules for what typeface to use, font size.
• Spacing/White space— The rules for spacing between an element in the design.
• Button — List of button variation, like a small button, medium button, outline button, etc.
• Grid size — Rules for grid size based on device.
• Imagery — How image design should be.
• Form element — like Input field, checkbox, dropdown, calendar.
• and many more…

Example of UI design guideline

Here is the example of UI design guideline I found on Dribbble.

Steph Jeong from dribbble .com

Allen Jordan on Dribbble.com

Creating simple UI Design Guideline

When I was creating design guideline, I start with creating Colors, Typography, and Component guideline.

Colors

For my self, I usually start with defining color scheme. For the fastest way, I search on adobe color’s explore for main color. There’s plenty of colors on this site.

After I find the one I like, then I paste it on my workspace in Figma then populate to square for every color just like this:

Shading

Then I set which one is the primary color and the secondary. After it, I create the color shade of every color with three states: Normal, Hover, and Pressed. It is important to set up a color variation in the first place so you won’t be bothered choosing color when designing. Take a look at this.

Even I had a primary and secondary color, there’s still another color that I would need, it is Black — (usually I called it with Ink) since it will be used on text mainly — . Then I create Ink color shade, but ink color shade doesn’t have states like many colors before.

And I think there is enough for the colors part. You can add many laters when designing. Next part is typography.

Typography / Font

This is the tricky part. As for myself, I started with creating 1 screen of the design just to make sure the size of the font is correct and balance. Check this for example:

As you can see there is much text with different size. Then I extract it to the outside of the design. and then eliminate the font with the same style (Bold, regular, etc.) and size.

Before sorting

after sorting

After I have the font variation, then I need to rename it as the function. For example, Title, Text, Button text, or Label.

Typography part is done, The next one is the component.

Component

For the component, you can start with defining button, input box, dropdown, etc. but at this time let’s create button.

For the component size, I used 8pt grid system — where every component and spacing is the multiple of 8 like (8, 16, 24, …) — . So let’s define the button.

When defining button make sure the border-radius is consistent, in this case, I use 4px as button border-radius. Then, create every state of button — Normal, Hover, and Pressed — with the color style I’ve defined before.

Oh right, it was the primary button. We also need a secondary button. usually, secondary is less bold, indicating that the button is not as important as the primary.

That’s all.

We’ve created basic UI design guideline. This is the overall look:

Simple UI design guideline.

The advantage of creating UI design guidelines is…

• you can save time when choosing fonts, button, etc.
  you can avoid a question like, “what font should I use for this element?”, “What color should I use for this button”, etc.
• you can be focused on layout design rather than choosing a style.
• consistency
  because everything should be matched with the guideline. The button size, colors, font, and form, they could be the same between any screen design and between designer.
• help developer to create the interface
  designer can take a look at the guidelines if they are not sure about the design.

Conclusion

You may need to design guideline or not. It is based on the project you are working on. but if you work on a large scale and large team, well you need to create design guideline for design consistency.

Design guideline also helps you to work faster. By providing you the boilerplate for elements.

Cheers!