BisaGo Design Guideline
By: Surya Nirvana
Tags: Guidelines, UI Design, Design, Material Design, UI

Color

Color Palette for bisaGo

The main color that we used in the application is Green, White, and Black. Additional four more shades of green are for border or accent color, while the two shades of red are for the warning text and ‘Disabilitas’ button, and the other three colors, grey is for a placeholder text color, blue and purple are for ‘Disabilitas’ button. For colors, we store the hex number of it in ‘styles.dart’ so we can reuse it again and again.

Typography

Typography for bisaGo

Typography guidelines include rules on font use, font size, and font-weight. Two main fonts that we used are Comfortaa and Muli. We chose that font because we think that it’s easy to read from those two fonts, and Muli is a popular font to use.

Component

bisaGo Components

Our team has created components such as text field, button, dropdown, ‘special button’, icon, etc., which later on we can use in the application. The existence of this special button is for the ‘Tentang Disabilitas’ page, where use can choose between four disabilities to know more about that disability. As I’ve mentioned before, our goal of creating this components is for reusability. Therefore, we store this component in one place, in the utils directory.

For the usage of this Design Guideline itself, you can see through this image below.

Detailed Version

Material Design as Benchmark

In 2014, Google launched Material Deisgn. Material is a design system created by Google to help teams build high-quality digital experiences for Android, iOS, the web, and Flutter, yes Flutter since Google who also launched Flutter too. The base component of a Flutter project is actually a MaterialApp widget. By using that, we can access through different types of widgets. Therefore, it’s no question for us to benchmark to Material Design. Here are some of the result after doing a benchmark:

bisaGo and Material Design

As we can see, it’s more or less the same component. Like the App Bar, the icon is located at the left, and the title is centered. The same goes for buttons, has an outline-only button and a fill-in button.

Lesson Learned

Creating a design guideline really speeds up the application development process. We don’t have to continually declare which color we’re going to use since we can define a constant. We also don’t have to have a brainstorming session to pick what kind of button we should use. We can use the design guideline. Our team can strive for consistency among pages. Therefore, it can be aesthetically pleasing when routing from one page to another. Using a provided ‘special button’ helps us to develop the page for that button. We don’t have to go back and forth between Figma and Android Studio.

Struggles

One of the struggles is a longer time needed when coming up with a design guideline. We have to discuss everything from a color scheme, typography, and many more. It’s also exhaustive. Not only that but also we have to pre-defined a constant for all components in the design guideline. This again can be exhaustive and a very, very long time.

In conclusion, Design Guideline is very helpful when we’re trying to develop an application. We can strive for a consistency, faster-pace development process. For someone who works mostly on the front-end side, this guideline is very helpful, I just need to see the guideline without having a confusion.

Source: