Design Better with Design Kit and Guidelines
When designing an application be it mobile or online it is imperative that you design a user interface that are not only usable, simple, intuitive, and most importantly it must also communicates what’s happening to your user. Often in a team there are different ideas on what your application should look like so it is important that beforehand that your team should come up with a design guideline. The examples I provide in this article comes from a project I’m currently working on.
What are Design Guidelines?
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. — interation-design.org
Design guidelines are predetermined set rules to realize intended design principles and serves as a guidebook for designers and developers alike when developing products. Design guidelines help maintain consistency and experience for the product you’re creating.
Why use design guidelines?
With a design guideline in hand it helps you and your team maintain a consistent and coherent experience for your users. Design guidelines act as reference for you and your team in process of building your product such adding features, pages, buttons, etc. Your design guidelines should be universal across your product or product to maintain consistency which in turn also increase usability and enhance the experience of your product.
There are several benefits that comes with having a design guideline, to name a few:
- Hastens production time by having designers referring to the guidelines instead of creating new specifications.
- Accelerates learning process for newer team members to adapt them to the team’s standards and practices.
- Ease of updating the guidelines based on present standards and trends allowing you to updating your design accordingly.
Types of Design Guidelines
Over the years psychologist have defined the foundations of design guidelines through their studies. To mention some of the groups these design guideline fall to:
Style
Style guidelines represent the visual expression of the product or organization that it’s trying to tell the world, this includes logos, colors, icons, etc.
Layout
Layout guidelines define the structure of the interface and also contain behaviors for responsive design.
Text
Text guidelines cover the tone and style of the text in the UI of your product. Text guidelines include fonts, sizes, colors, and various settings.
UI Components
These guidelines define the specs of UI components that appear on display and behaviors when users interact with them. These include inputs such as buttons and text fields, windows, dialogs, etc.
Design Kit
Now that we have the required design guidelines, there are many tools out there to implement them. For a project I’m currently working on we use the following tools:
Figma
Figma is a web-based tool for collaboratively design and create user interface. For designing and prototyping a project I’m working on we use Figma with most of the design coming from our stakeholders.
Material-UI
Since we are using ReactJS to create the frontend of our application, we are also using material-UI as our UI library. It provides with a myriad of ready to use and customizable UI components which quickens our production process.
