Design Guidelines: SOP for your Design

Image Source from Unsplash

What are Design Guidelines?

  • 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?

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 :

Writer with a Big Dreams