Follow The Design Guideline!
When we are making an interface for an application, one of the things that came to our mind is the design of the interface. Usually, we made the mockup design first and then implement it. But how the designer make sure that people will follow his/her design? How the developer interpret the design?
This is where the Design Guideline helps.
What is Design Guideline?
Before we start, we need to know what is Design Guideline. From the definition of guideline, a guideline is a visual language communicating the design goals to the team, to make sure that everyone can understand it and to enforce its usage.
Quoting from interaction-design.org, Design guidelines are sets of recommendations on how to apply design principles to provide a positive user experience. Designers use such guidelines to judge how to adopt principles such as intuitiveness, learnability, efficiency and consistency so they can create compelling designs and meet and exceed user needs.
Therefore, design guidelines are intended to help designers understand how to implement a principle without restricting their creativity in design.
From the definition, we can seen that designer use guideline to judge how to adopt principles. And from the guideline, the designer make a rule. In short, it will be like this,
- Design Principle represent general points of direction.
- Design Guideline reveal how to approach.
- Design Rule are direct instructions.
So, the designer approaches the design principles and then uses design guidelines to determine the design rules. Keep in mind that designers often apply design guidelines subjectively when they design products. One designer might interpret a guideline differently from another.
Design guidelines fall into several groups, including these:
- Style, about logo and brand
- Layout, about grid and structure
- UI Components, about menus and buttons
- Text, about font, tone, and labels
- Accessibility, about ease of access
- Design Pattern, about consistency
Implementation on BisaGo
Before I write about how we follow the design guideline, these are some images of the design guideline for BisaGo application.
You can see that each guidelines tell us about the color, style, icon, logo, font, and button. With this guideline, we know what kind of color or font should we implement on the application. So we just need to refer to those guideline if we are confused about the interface.
For example, for our sign up form, the guideline provided how should we make the form. Following the guideline, the some fields of the form finally looks like this.
As you can see, the actual form and the form from the guideline is quite similar on how they looks. We also do the same thing when we make the button, insert the images, etc.
That is all from me. Hopefully it will help whoever who reads it.
Well then, cheers~
— A certain person who wants to eat a chocolate cake
