Design Guidelines
This article is written as an Individual Review Assignment for PPL CSUI 2021
When you are to make a Design for your product, have you ever used a Design Guideline? Do you know what it is? If you don’t, here is a brief explanation.
Design guidelines are set of rules that was created to be applied on the product. Design guideline is an important thing to be applied on a product, the product identity itself was shown by them. Ideally, a product design is using a consistent design, such as the same font, color-palate, etc. Without a proper Design Guideline, there is high possibly that the product is a mess where a design in one part were totally differ with the others. By following the design guidelines, such event can be avoided. Instead, the design on the product will be consistent as thing should be. If a product design is inconsistent, it is bad if one part is worse than the others. The good part will be forgotten and only the bad one will be known by people, so it is important to make a consistent design.
Implementing Design Guideline in my PPL CSUI 2021 Group Project
During creating the Design Guideline for the group project, our group choose to use Figma as the tools to create the product Design Guideline and the Mockup. The Design Guideline we made for the product were the typography, color-palate, and component.
Typography
For the typography used in our group project, it is consisted by two part: Headlines, Bodies. The headlines were used as page title or a title of successful action in a page. Meanwhile, Bodies were used in most part of the product design. The font used for our design guidelines were Poppins and Mulish.
The reason we choose this guideline for the product font is caused due to this app is meant to be used for marketplace. Most of the user is going to be someone that was used with technologies. So, we choose Poppins and Mulish, since this font is very readable and casual. It’s easy to read and at the same time it’s good looking too.
Color-Palate
The product we created for the PPL CSUI 2021 Group Project were having a Aquaculture theme. So, we are using blue color as our primary color. Gray color were used in many term such as placeholder, inactive navigation bar, outlines for input field, non standout text, and etc. Black and White were used as as well where White were the background color, and Black were the color for most of text. Meanwhile the Danger Tint were used for a warning notification, button that will make you losing some information like deleting an item or blocking and distributor account.
Component
The Page Title Bar Component were used to indicate what page are user currently in, furthermore this component can be used to do some action like back to previous page, editing an item, deleting an item, or even downloading an image.
The Navigation Bar Component were used in a page where there is no action that can cause data change for both Admin or Distributor. This component can be used to navigate to other page easily.
The Filter Component were used in a page that having a list of item that can be filtered. Furthermore, there is a status filter added so it is possible to search other than using the item name.
Product Card Component were used to represent the Product mini summary. There is different design for this component due to different information shown. For example, the first component were used in product list in admin page, where only admin can see the current status of the product like active or not. Meanwhile, the second component were used in cart where it is possible to tick and changing the value of how much product wanted to be bough. The third component were used in a page based on transaction, so the distributor can see the amount of item they bough, and sub total of each items. While the last component were used as component in distributor page product list.
The Input Field Component were used to make sure that every input field were based on this component. The first two were used for register and login page, where the first one is used to store an insensitive data, while the second one is used for sensitive data like password. The third component were used as template input field. While the last one is used for input field that need to select a value from given value.
The Button Component were used as a reference to kind of button available to be used for the product. There is many possible thing can be done using the button. Like, primary and secondary button were used to do some important action that can change the state of product or page. The Log Out button is for sure used only to logout the users. The medium button were usually used to open a page or editing a details for some page. While the small button were used to do some action like buying an item where there is no space available to use a primary button. The last one is used as a button to block an distributor.
The Status Component were used to show certain status of a transaction like transaction created, transaction verified, transaction sent, etc.
Example of Implementation
Conclusion
By using a Design Guideline, it is really helpful as it was possible to create a product design faster and of course more consistent. By using one, we don’t have to think much anymore like how is this should be looks like? Instead, just use one given from the Design Guideline. It will be a slow start but worth the pain in the end, especially when there is a lot of part need to be made.
That’s all I wanted to talk about in this article. I hope you guys found that this article useful. Have a nice day :D
Reference:
What are Design Guidelines? | Interaction Design Foundation (IxDF) (interaction-design.org)
