Porteliér’s Design Guidelines & Design Kit
To develop an application, we need to make User Interface for our application. Moreover, we have to code the UI design. But how to make and develop the UI easier? Design guidelines are here to help you!
Design Guidelines
As this source said, “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.”. So, we can use design guidelines to help us develop our UI interfaces!
Why Design Guidelines are Important?
The importance of design guidelines is to fulfil the 10 Nielsen’s general principles for interaction design, which is the number 4th principle: Consistency and Standards. If we feel like the application starts to be inconsistent, we can see our design guidelines to turn the design into the right path. There are things why design guidelines are important:
- Keep the code and design consistent and enforce the standards
- Faster time to develop the application
- Easy to understand the application flow
- Designers don’t have to create specs each time they design a feature.
- Developers don’t have to wait for specs because they can refer to guidelines and build interfaces.
- Enhance communication among all the stakeholders involved in developing the interface (designers, developers, product managers, etc.)
Types of Design Guidelines
Based on this article, there are several types of design guidelines:
- Style — e.g., brand logos, colours
- Layout — e.g., grid or list structure
- User interface (UI) components — e.g., menus, buttons
- Text — e.g., font, tone, labels/fields
- Accessibility — e.g., Aria markup for disabled users
- Design Patterns — e.g., forms
and here are some guideline examples of our application:
Brand Logo
Here is our brand logo. It is available in different shapes.
Colour
The colours that we use in our project is black, light red, green, and orange. The primary colours of the app are black and it is expanded to make lighter colours.
Layout
Instead of using list structure, we use grid structure in our project.
Typography
In our project, we use Sk-Modernist font. It is available in fontsme.com. Here is our typography guideline:
Button
Here is our guideline for button. It is grouped by its behaviour.
Component
We have created components already in our application such as forms, button, and input fields. It is already combined into our application pages. Here are the sneakpeaks:
Design Kit
To design Porteliér’s User Interface web-application, my team use Figma web-application and Material UI framework for ReactJS. We use those application and framework to escalate our design process and development of our application. Here are our design kits that we use:
Figma
“Figma is a vector graphics editor and prototyping tool which is primarily web-based” (wikipedia)
We use Figma to make our application’s mockup. We use Figma because it serves a feature where we can do our work together.
Material-UI
“Material-UI is an open-source project that features React components that implement Google’s Material Design” (source: https://www.freecodecamp.org/news/meet-your-material-ui-your-new-favorite-user-interface-library-6349a1c88a8c/)
To design and develop our application easier, we use Material-UI framework for ReactJS. The benefit of using this framework is that so many components that can be reused such as button, form, modal, etc.
That is all for me. Hope the article will help you to make your own design guidelines and also improve your knowledge about design kit! Good luck x
