PPL 2020 — Document Builder: Using Google’s Material Design Guideline with Material-UI

This post is written as a part of individual review criteria of Fasilkom UI’s software engineering project course: PPL 2020

Creating or choosing the design guideline that fits your product most should be a priority before your team starts on the coding part. Choosing a good design guideline might be a stressful process because it requires you and your team to think about the good and bad of using an established design guideline and how it compares with creating your own.

In our project, Document Builder, we use the Material Design guideline. Before we dive deep into what is the material design and how we implement it on our project, let’s take a look on the definition of a design guideline itself.

Design Guideline — Definition

“Design guidelines are sets of recommendations towards good practice in design. They are intended to provide clear instructions to designers and developers on how to adopt specific principles.” — www.interaction-design.org

A design guideline is meant to give advice on what design principles to use and how to use them. After we have the guideline, then the next step is to create the design rules that implements the guideline in a more concrete way. Let’s try to understand these terms a little better by looking at some examples:

1. Design principles — “Consistency”
2. Design guideline — “User interface should be consistent across different screens and features”
3. Design rules — “All paddings should be 24px and body font size should be 14px”

Material Design Guideline

In building our product, Document Builder, we use material design guideline, specifically Google’s material design guideline. There are a few reasons why we do this:

1. It’s familiar — Material design is used by Google in all of their products and is familiar for most people
2. A lot of available resources — There are a lot of resources available on how to implement the material design guideline on the internet.
3. It’s clean and neat — Like any products from Google, besides being easy to use, it’s also easy on the eyes.

Implementation in the Mockup Design Process

During the design process, our team uses the material design theming kit and Material UI React Component’s figma kit

Preview of our high-fidelity mockup of Document Builder

Through this design process some defined principles and guidelines that we implement are:

1. “Familiarity” — User should be familiar and intuitively knows how to do tasks in the app
2. “Consistency”—Each of the element and colors displayed in the UI should be uniform and consistent
3. “Alignment” — All elements and text should be properly aligned and adjusted according to its use

Implementation in the Development

In the coding part, we use the help of Material UI with little modification as the foundation of our user interface. Material UI provides ready-to-use React components that closely aligns with Google’s material design.

One of the example of Material UI’s documentation on TextField component

Easy-to-read documentation in Material UI’s webpage and guidance helps us a lot when developing our user interface with the provided elements.

Example use of TextField component from Material UI in our project

Implementation result using Material UI

Besides using Material UI, we also customize some of our components and define our own UI Kits that I’ve talked about in another post. By the help of an established design guideline like material design, and an established and familiar design kit by Google’s material design, we hope to achieve consistency and familiarity in the entirety of our product until the end of its development.

Thank you for reading, I hope it was useful!