Design Guidelines 101
This article is made for the Software Project course assignment, Faculty of Computer Science, Universitas Indonesia
When designing a product in a team, we want to make sure the design must be consistent. On the other hand, everyone in the team has their own way to design something. Of course, we don’t want something like this, for example there are 2 page (page A and page B) using same button component. Both pages using the same button component but the buttons have different margin size, font size, border size, padding size, and many more on each page. It’s gonna be pain if we must check every page design to make sure its consistency after the design is done because it will take so much time. So to prevent that, we should make a design guideline right before we want to design the product.
Design guidelines is a set of design principle for a certain product that must be applied to the design so the product can achieve a good user experience. Design guidelines consist of these groups:
All of the example is from my product’s design guidelines for my Software Development course.
- Styles
Styles consist of brand logos, color, and many more that related to the design type. Here is the example of the color palette for my design guideline.
Color palette helps a lot during the design process, color palette is a set of colors that can be used in any situation. From example above, we see that there is a color named ‘primary’, it means we can use those colors for primary color of our product, for example we can use it for heading text, color of the component like header, button, and many more.
My product is a platform to buy aquaculture things, so choosing tosca green as the primary color is the perfect fit for the product because tosca green can represent the aquatic nature. Colors for danger tint and warning tint is chosen based on the standard color for danger and warning.
- Layout
Layout is about how the components or element is presented, either in grid or list structure. My design is using both of them based on the purpose. I’m using grid layout in list item page with the purpose is to make user discover more items so they don’t have to scroll to much. Beside that, I’m using list layout in cart page because each item need many element to show and it is not fit if I use grid layout. Here is the example of the page using grid and list layout.
- User Interface (UI) components
Consist of many components that frequently used, for example button, header, navbar, card. Each of the component has defined size (margin, padding, etc.), color, and many more as you can see in the example of button component down below. Also, each component has many subtype based on their purpose, for example of my button component below, it has some subtype that use for certain purpose, there is button for logout, secondary button that use for button that should not be more stand out than the primary button, and many more.
- Text (typography)
Consist of font type, font size, font weight that must be used for a certain purpose. Usually the text is devided to two groups, heading and body. Heading is used for like title of the page, title of a section, and many more that need to be stand out more than body. Body is used for the content of the page or a section. Each of the groups contain a set of fonts that have its own font type, size, and weight like the example down below.
For the typhography sizing, the heading size should in range from 18px to 29px based on the rules for perfect typhography in UI so the H1 size is 28px. H2 is the secondary heading so I need to make it smaller than H1 so I set it to 18px.
For body size, Body1 is 16px. The Body1 is set to 16px also based on the rules for perfect typhography in UI. Then the secondary Body like Body2, Body3, and the others should be 2px smaller than the bigger Body so the Body2 size is 14px and Body5 is 12px (Body3 and Body4 have the same size as Body2, the different is just on the font weight).
- Design pattern
Design pattern is a pattern of a component which designer use to solve common problem in UI design. For example, for navbar component, it must be a horizontal bar consist of menus in the form of button to navigate user to other pages. In addition, the selected menu should be highlighted to indicates current location. You can see the example of my navbar component by implementing those design pattern down below. If you want to see more about other components design pattern, you can check it in here.
And that’s about it for this article, I hope this article helps you to understand more about design guideline and you can implement it for your next design. Thank you.
