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?
Design Guidelines are an important part of the design that can be used as a guide in designing a user interface (UI). In addition, you will be more consistent when designing a project as a whole such as UI elements, colors, typography, icons, and so on.
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
First, you need to determine the color so that you can have the right direction. The color scheme must be precise, with certain colors used only for certain objects, for example, the button must be green, the background must be white, and the restrictions on which colors can be used are side-by-side. The most important area in the color section is the task of determining the right color to use. There are 3 parts to the definition of color, namely Primary, Secondary and Accent 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.
2. Layout — e.g., grid or list structure
Layout talks about how we properly arrange the elements on a page. A web document generally has elements such as header, navigation, sidebar, content, and footer.
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.).
3. User interface (UI) components — e.g., menus, buttons, icons
It is very important to classify buttons according to their function. By letting the user know the function of each button based on the design, it will reduce unwanted interactions caused by pressing the wrong button. Therefore, it is very important to differentiate the buttons. The structure and labels of your navigation also can have a huge impact on results.
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.).
4. Text — e.g., font, tone, labels/fields
Typographic elements that are very important in UI design are the font, font size, and color. Headings must have one size and font, subtitles have different sizes and fonts, and other elements as well (image captions, copyright information, menu text, lists, etc.). A commonly suggested best practice is simplicity or simplicity in typography for the sake of legibility and readability.
Here are the steps for defining typography.
Selecting Font Family: You can use google fonts or use default fonts.
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.
What are the benefits?
- A consistent user interface, which can lead to familiarity and predictability.
- There is no need to include explicit usage instructions in each application to explain how to use it.
- The web is clearer, more efficient, and looks better.
