Design Guidelines: Efficient, Consistent Design
By: Wilson Hadi
Tags: Design Rule, Design Patterns, Design Guideline

Worried about a messy or inconsistent design? This is where design guidelines step in to save the day. Design guidelines help you have efficient and consistent design throughout your application. They help guide the overall style and flow so that you don’t repeatedly think about things like, what colour should this button be? or what size font should I set this text?

What is it exactly?

As defined by interaction-design.com, design guidelines are guidelines on how to implement design principles such as learnability, efficiency and consistency in order to let your application have designs that meet and exceed user needs. These guidelines fall into these categories:

Style

Refers to matters such as the colour palette, logos, etc.

Refers to matters such as the colour palette, logos, etc. Layout

Refers to the placing or structure of components, such as using a grid structure.

Refers to the placing or structure of components, such as using a grid structure. UI Components

Refers to the components of the design, such as buttons, icons, etc.

Refers to the components of the design, such as buttons, icons, etc. Text

Refers to all text aspects of the design, such as font, text content, etc.

Refers to all text aspects of the design, such as font, text content, etc. Accessibility

Refers to the ease of access of a feature or service provided, such as how this page can be navigated into.

Refers to the ease of access of a feature or service provided, such as how this page can be navigated into. Design Patterns

Refers to the use of recurring components to enhance consistency in the design, such as the use of breadcrumbs design pattern in forms.

Design guidelines are different from design principles and design rules. Design principles is more of the general directions. Design guidelines talks about how to approach those directions and use them to decide the design rules. Then, design rules are straightforward, direct instructions. Design guidelines can be viewed subjectively and are used differently when moving to the rules. Different designers might have different interpretations of the guidelines. Here is an example taken from interaction-design.org:

Design principle : Provide plain-language error messages to pinpoint problems and likely solutions.

: Provide plain-language error messages to pinpoint problems and likely solutions. Design Guideline : Write large-lettered, jargon-free text in web-safe font. Use short sentences and draw users’ attention to causes and remedies.

: Write large-lettered, jargon-free text in web-safe font. Use short sentences and draw users’ attention to causes and remedies. Design Rule: Use 20-pt, black Georgia on lavender background (#e6e6fa Hex). Put instructions in bold.

Why is it helpful?

Consistency

By following a standard design guideline, design of the application will remain consistent. This consistency leads to other benefits.

By following a standard design guideline, design of the application will remain consistent. This consistency leads to other benefits. Usability

Consistency not only adds aesthetic, but improves flow. This is because the users will be able to be familiar with the application faster and recognize elements such as buttons faster. This ultimately improves usability.

Consistency not only adds aesthetic, but improves flow. This is because the users will be able to be familiar with the application faster and recognize elements such as buttons faster. This ultimately improves usability. Efficiency

The development team will be able to have faster workflow since having standard guidelines means having to spend less time thinking about the style and more time implementing the code.

The development team will be able to have faster workflow since having standard guidelines means having to spend less time thinking about the style and more time implementing the code. Productivity

Since more time is spent on code implementation, the amount of work and product progress will be faster. This means the workflow becomes more productive since more work is done, instead of going back and forth in confirming the design specifications.

Implementation in bisaGo application

Since this topic is about following design guidelines, it is best that we dive into how I follow my team’s application’s design guidelines

When doing front-end tasks from each Sprint PBI, I always refer to existing designs from already established components or following the provided application’s UI design kit which is made using figma. Our existing design guidelines and rules includes (but are not limited to):

We use Comfortaa and Muli as our fonts, with a defined colour palette and designed icons

Our components such as logo, button designs and form designs are also there

Other ways I follow the design guidelines when implementing the design and features of the application is by using and/or referencing existing components in the codebase.

Using the colours and spacing that have been defined already

defined styles

code snippet of defined styles usage

Using existing form components. In the left, there are already created widgets that act as form components. When making a form page, instead of creating new widgets inline, those form components are used in order to keep forms consistently designed.

right: code snippet of form components usage