Design Guidelines: Improve the Efficiency of Designers and Developers.

Rather than repeatedly building similar components from scratch, it is better to use ✨Design Guidelines✨ that allow designers & developers to reuse components that can increase efficiency.

What are Design Guidelines?

How do you define your design needs? — Since I have to design apps for clients, I need to understand and translate other people’s sketchy ideas into real creations. In my case, I define the app design according to the persona. I see what personas need, and their difficulties in using a similar application. In addition, there are also inputs from clients regarding colors as well and how achievable features, interface, etc.

What are the steps for making Design Guidelines?

1. Style — e.g., colors

Primary color: the color most frequently displayed on all screens and application elements.

Secondary Color: used for actions such as sliders, navigation, progress bars, or links.

Accent Color: used as the color for error, success, warning, or information markers.

The color palette on PPL project

2. Layout — e.g., grid or list structure

The layout and grid sections should show:

  • The value for the margin border
  • Value for space between different elements (for example between text and image, between the header and top navigation bar, etc.)
  • Positioning of global elements (logos, copyright information, etc.)
  • Procedure for columns, if applicable (how many columns, column width, spacing between columns, etc.).
The layout on the PPL project

3. User interface (UI) components — e.g., menus, buttons, icons

Navigation menu bar on ppl project

Icons are one of the most common design elements. The iconography section can display all the available icons in one place for easier selection, way of setting (eg size, position, etc.).

Icon resources on the PPL project

4. Text — e.g., font, tone, labels/fields

Here are the steps for defining typography.

Choosing a Font Weight: Font weight is the weight setting on the font to determine the level of thickness. There are two ways to determine font-weight in design and coding. The font-weight used is in the form of terms such as Thin (Light), Regular, Medium, Bold, or Black.

Typographic elements on the PPL project

What are the benefits?

  1. There is no need to include explicit usage instructions in each application to explain how to use it.
  2. The web is clearer, more efficient, and looks better.


Computer Science Student at University of Indonesia