Design Things: Design Kit and Guidelinesđź“Ź
When making a website or application, what do you do first?…. That’s right, we design it first, but how should we design it? where do we even start? Well… designing could be quite difficult unless we have design guidelines. Design guidelines will help us in designing our website and it also makes sure that our design will be consistent throughout the development.
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.” — https://www.interaction-design.org/
A design guideline plays a role as a manual book for both the developer and designer in developing their product. This guideline is important because it will help them to maintain the consistency and the efficiency of the product design.
Why Design Guidelines?
When developing our product it is important to keep the design of our product consistent as it will improve the usability of our product. With design guideline, we can always refer to that whenever we want to add a feature, a new page, etc. Without design guideline, our new feature might end up looking different than all the previous designs, which is of course, bad. Hence, if you want to design a cohesive and consistent experience among your products, then you must set of guidelines with you.
Other benefits include:
- Faster development time.
- Involvement of stakeholders.
- Prevent Disagreements.
- They make learning easier for new team members.
Types of Design Guidelines
1. Style
The style includes brand logos, colors, etc.
Here is the example in my project:
Brand logo
Colors
2. Layout
Layout means the how we present the app or feature, example for this includes list structure and grid structure. In my project, we use grid as our structure.
3. Text
Typography includes the type, variations, and sizes of the font used in the product. For my project, we use Sk-Modernist as our font.
4. User interface (UI) components
This includes the components or elements that are used in the design of the product, such as buttons and forms.
Here are the variations of the button and form component that I use in my project for its own purposes:
5. Accessibility
Accessibility means whether our design can be used by everyone and that includes people with disabilities. Accessibility exists to aid people with disabilities to access and use our application and it is usually done by using ARIA markups.
My project hasn’t implemented this but it’s something that has to be considered in the future.
Design Kit
We use tools to make our design such as the prototype and the wireframe, these tools are called design kit. For my project, we use Figma as our mockup tool and we implement it in our website using the Material-UI framework.
Figma
Figma is a vector graphics editor and prototyping tool which is primarily web-based. We use this website to create our design, with the design mainly created by the stakeholder while considering feedback from us (developer team).
Material-UI
Material-UI is a ReactJs UI framework that implements google’s material design. It provides a lot of ready to use and easy to customize components such as buttons and forms, which accelerates our development process.
That’s all for this article, have a great day!
