Design Guidelines: SOP for your Design

Rabialco Argana
4 min readMay 21, 2021
Image Source from Unsplash

What are Design Guidelines?

Design guidelines are sets of guides and recommendations on how to apply design principles to the product. The purpose of design guidelines is to make a uniform design between all designs of the product. The guides usually divided into several organize a group of an attribute which is style, layout, UI component, text, interaction and behavior, platform, accessibility, design patterns, and resources. Here is the explanation of each group of guides.

  • Style

Style guidelines define the visual expression of an organization that describes the characteristic to the user. Every designer or organization has its own style guide which they use to build color, logos, icons, and typography.

Example of color guidelines for our PPL project
Example of typography guidelines
Example of icons guidelines for our PPL project
  • Layout

Layout guidelines define the position and structure of the interface placement. UI can be designed using grid layout or list layout. This section of guidelines also contains the behavior of the responsive design.

Example of layout design guidelines
  • User Interface Component

The user interface component usually organizes the specs and usage of the component that is shown in the interface. Usually, this section is to think about user interaction with the interface to maximize the experience. Examples of UI components such as windows, dialogs, controls, panels, menus, views, scrollbars, buttons, and many other similar items.

Example of buttons guideline for line app
  • Text

Text design guidelines organize the tone and style of text that being used in the user interface. Usually, the purpose of text design guidelines is to be easy to understand for all kinds of users. Examples of text design guidelines such as font size, color, and style. All of the text that is displayed in the interface are being arranged by these guidelines.

Example of font guidelines for our PPL project
Example of font size guidelines
  • Interaction and Behavior

Interaction and behavior organize all types of interaction that a user performs with a design, and system response. Examples of this interaction that being organized such as click, gesture, and voice.

Example of gesture design guideline
  • Platform

Platform design guidelines organize all types of supported platforms. Examples of this platform that is organized such as resolutions and platforms.

Example of resolution guidelines
  • Design Patterns

Reusable design patterns are included in UI guidelines. These patterns define behavior for certain controls. Examples of this accessibility that is being organized such as navigation, search, forms, data formats, states, and pagination.

Example of navigation design guidelines

How to implement Design Guidelines?

Implementing design guidelines in your project can be done by design it based on the requirement and the business model of our project in the Product Requirement Document (PRD). The content in the PRD includes persona, feature, objective, user flow, and design. From this content, you can create your project design correspond to the goal that is achieved.

PRD Example for our PPL Project

Disclaimer :

This is my article for my Individual Review for PPL course at the Faculty of Computer Science, University of Indonesia.

Resources :

--

--