Do not worry, I have the style guide
As we have already discussed before, design guideline is a guide that (when follow) can improve the design of a system. It provides instructions to help designers and developers understand how to implement a principle.
In this post, I will elaborate more on the creation of the interface by referring to established works, and also by using our guideline that we (Group A8) have created in the beginning.
Design Inspired by Material Design
In designing Document Builder, we use the Material Design guideline as our benchmark to established works. As a gentle reminder for you, the concept of material design was coined by Google with its Google I/O 2014 keynote.
Why Material Design? you may ask. We use Material Design for several reasons, which are:
- It’s been integrated for web-based projects — Material Design is made for adaptive design. All of the design guidelines actually encourage a designer to work with an adaptive or responsive layout.
- It lays emphasis on legibility and accessibility — Material Design is very neat and clean. It makes good use of whitespace which most other guidelines out there not keen on.
- It’s easy to implement— The supporting sources are accessible everywhere. For example, during design process, we use Material Design 2.0 Theming kit and Material-UI: React components in developing our design in Figma. Both UI kits really save us a lot of time for developing the product.
Implementing Our Design Guideline
Before jumping on how we implement design guideline in the development process, try to take a look at our design guideline that I have made a post about (sorry, it’s in Bahasa). This guideline is made in specification for developers to implement and follow so that the product comes out consistent and intuitive.
Color
All the colors that are defined in the guideline are declared in theme.js. This is done in order to prevent defining the hex manually for everything that you’re styling and use a defined global theme instead. With this, we only need to refer to the defined colors.
I think this kind of implementation really helps us a lot to not mistaken the correct colors throughout the application. This also has become very rewarding for our team because when the client gave feedback on our button color on the first sprint review, it was extremely simple to modify it.
Icon
For icons, we use Material UI Icons that provide 1,100+ icons ready to use. The first thing to do for using Material Icons is to install the package in your project directory with:
yarn add @material-ui/iconsNow, it’s time to import the icon that you want to use in your project like:
For my project, I use the imported icons above to make a component called Icon. The purpose of making this component is to make the easier usage of icons by calling the name of the icon.
Component
During development, we always try our best to follow the established guideline. We use the help of Material UI in implementing the guideline. Material UI provides React components for faster and easier web development. It’s parallel to Material Design that we talked about.
The code above is taken from HistoryDocumentPage container that I developed. Thanks to the help of Material UI, I didn’t have to make every component that has already been made. For the sake of example, It is seen that I used the Box, Grid, InputAdornment, SearchIcon, and TextField components from Material UI in developing the interface of HistoryDocumentPage.
To use the Material UI components, all you have to do is to install and save in your package.json dependencies by running:
yarn add @material-ui/coreThen, import the desired elements and implement them in our code. That’s that. Easy right?
After all I said, the use of Material Design is really important because it utilizes every good aspect of design that will be reflected in our application when it finishes. With the help of our design guideline and Material UI, we hope to achieve consistency throughout the development of our product.
Thank you for reading!
