Design Guideline: Your Product “Fingerprint.”
Every human must have their own fingerprints. Of course, each of them is different. Each difference has its own characteristic, which can be used to distinguish who the person is. For example, when opening a cellphone or identifying who we are in somewhere that needs fingerprint as the key. So, a fingerprint can ease anyone to recognize our identity. But what does the fingerprint means in Design Guidelines?
The Definition
A good product needs a good design too. But, can you imagine when the team trying to create designs for their product? Surely there will be a great many thoughts from each head. What if each of them is stubb with their opinion and doesn’t want to budge? Such a disaster, right?
Design guidelines are a collection of recommendations or rules designed to form a product that is able to show the value or characteristic of the product. Design guidelines are used by the designers to define how the product implements the principles such as intuitiveness, learnability, efficiency, and consistency, so they can create a wonderful and “unreplicated” design that meets the user’s needs. Well, thus, we will no longer need to bother taking care of things that don’t need to be taken care of.
Since I’ve written about the principles, let me explain how they can influence the implementation of the design guidelines.
- Intuitiveness, means that when a user sees it, they know exactly what to do.
- Learnability, means that users easily learn about how the design of the product works.
- Efficiency, means that users able to do tasks after they have learned the interface. Feels as same as the learnability, right?
- Consistency, means that the product should limit the number of ways actions that are represented and ensuring that user don’t have to put a lot of effort into understanding it.
But do you know guys what is the reason why we need to start using design guidelines?
Why?
“User interface is easy to make a mess out of. You can start a project with one style and end with another. It doesn’t matter if you are a guru or just dabbling, inconsistencies in the design will most probably arise. Don’t Worry! There is an easy solution: UI guidelines.” — Yuki Gu
From Yuki Gu, we knew that the common mistake in designing is the consistency of the design. Design guidelines can help solving the problem easily. Besides that, implementing design guidelines in our product can provide some other advantages, such as:
- Guidelines would make learning easier. New members are trained about standards and behaviors with little effort.
- Designers don’t have to create the initial design when designing new features.
- So that makes the developers won’t longer receive the designs.
The Steps
In creating design guidelines, we need to ensure these aspects should have in the guidelines. Those are:
1. Style
Style includes brand logos and colors. In the beginning, you need to determine what are the colors of your product. Colors are divided into 2 types, Primary Color, and Secondary Color.
- Primary Color, the main Color of the product. In our product (Gerobak App), the primary Color is #F9BF3B. This Color has a slightly yellowish characteristic.
- Secondary Color is the complementary color of our product. We use #1C2A39 as our secondary Color — a light black.
- Accent Color is the Color that will be used to show some additional information.
2. Layout
After determining the colors, you need to decide the layout format that will display the information. For example, in our product (Gerobak App) we displayed the same table format in the list order of the app, so those table won’t have much differences.
3. User Interface (UI) Components
Components consist of buttons, fields, icons, logos, and some art designs that will enhance the application’s appearance. We also need to decide the button behaviors when clicked and how the screen will react after tapped. This means that we need to make sure how the reponse of each component, which is also a way to apply consistency to the design. Here are the examples of Gerobak App UI Components.
4. Text
Besides buttons, text is also noteworthy in design guidelines. Text includes the font type, size, style, spacing, and alignment. You may find it tricky here because each element may be different. But it is very worth doing since text is an essential aspect that affects the user attention.
Conclusions
Design guidelines are a collection of rules which is used as a guide in designing a product. Design guidelines cover almost all aspects and components of the product. Implementing design guidelines can reduce the time used, so it will give efficiency while designing process. In addition, we will be able to create a wonderful and “unreplicated” design that meets the user’s needs.
Thanks For Reading!
Follow my medium for more articles.
Also, if you want to browse other content, here are my Social Media😁:
