Design Guidelines: The Rules of Thumb

Design, the front and foremost thing to do when creating a product, whether it is an application, website, or anything else. A question arises, how does one design their product? which design would be best used? That’s where design guidelines come into play. They will help us in creating a consistent design throughout our development. They are the rules of thumb for us to create work which never frustrates users.

What are Design Guidelines?

To get started, we first need to understand what design guidelines really are. They are often mixed up with design principles and design rules, when infact, they are different.

  1. Design guidelines, which tells us how to apply principles such as giving recommendations on how to convert principles to rules, e.g. “Educational tutorials contain well explained visuals”.
  2. Design rules, which are the ones that define the product, as they ensure consistency and can be documented in styleguides or design systems, e.g. “Every visual contains a title in comic sans, 84 pixels in size”.

Why do we need Design Guidelines?

Design guidelines provide many benefits in developing our product. They helpkeeping the design of our product consistent, which will also improve the usability of our product. It also makes it easy for us when adding new things(features, new pages, etc) to our product, because we can just look up the design guidelines so it will stay consistent and won’t end up different from the rest.

Types of Design Guidelines

1. Style

BisaGo Brand Logo
BisaGo colors
Layout of the “Tentang Disabilitas” Page
Layout of the “Profile” page
The Typography used in BisaGo
Button components in BisaGo
Form components in BisaGo

UI Design Kit

A UI Design Kit is a collection of graphic files and resources that help designers with the task of building UIs for their applications. We use these tools to make our design wireframe and prototype. In my project, we use Figma to create the mockup.

Figma used to create the prototype for BisaGo

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store