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.
“Design guidelines are sets of recommendations on how to apply design principles to provide a positive user experience. Designers use such guidelines to judge how to adopt principles such as intuitiveness, learnability, efficiency and consistency so they can create compelling designs and meet and exceed user needs.” — https://www.interaction-design.org/
In short, design guidelines are there to give us advice on how to use design principles. Furthermore, we can use that advice to create design rules. So far, we’ve come to know of three concepts, which are:
- Design principles, which are the the laws and considerations that make a the foundation of a good design, e.g. ‘educational’.
- 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”.
- 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
Style includes brand logos, colors, etc.
Here are some examples of the Style in my project:
Layout is how we present our product, such as using grid or list structure. Below are some examples of the layouts in my project.
Text is the typography used in our product, which includes the types, variations, and sizes of the fonts. In BisaGo, we use Muli as our font(s).
4. User Interface Components
UI components include the elements used in the design of the product, likely the logo, buttons, and forms.
Here are some examples of the components in my project:
Accessibility means whether our design can be used by everyone, especially people with disabilities, as they aid them to access and use our application. They are usually done by using ARIA markups. Since my product is an application based product, we have not implemented ARIA markups.
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.
That is all from me, see you next time~~~~~
What is Accessibility?
Let's examine a topic we often take for granted to understand what it's really about. Doing so, you'll be able to…