Design Guidelines in BisaGo
In this term, I am taking Software Project course. During this course, I have a chance to learn mobile development by contributing in the development of BisaGo. BisaGo is a mobile application that aims to help people to find facilities and activities for disabled people easily. In this project, I learn how to design mock-ups to be implemented in the front-end development. According to Justinmind, in the context of software design, mock-up is a high-fidelity simulation of how a website will look. To create mock-ups, the development team used Figma. Figma is a web-based editor that allows people to design mock-ups collaboratively. It is available as a desktop application that supports offline development in MacOS and Windows. It provides software prototyping, so designers can simulate the design and the flow of the application.
In designing mock-ups, there needs to be a guideline that the developers follow. In the BisaGo front-end development, these are the example of the guideline:
- Logo
The logo has to be in the header of every page of the application. It also has to be in the launch screen of the application.
2. Color palette
Every part of widgets in the application have to be colored by one of colors in the color palette. To use the color in the styling of the mock-ups or front-end development, developers open the project’s Figma, click on the color palette,
look at the tab in the right side,
copy the hex color that they want to use,
and paste it to where they want the color to be implemented. For example, in the detail kegiatan page,
the colors used (except the color for the link color) are generated from the color palette.
3. Text
Every text in the application has to follow the text guideline. To use the text styling in the mock-up development in Figma, developers can create a text
and modify it in the text section in the right side of the application according to the text guideline.
4. Button
Buttons in every pages in the application have to follow the button guideline. To create a button according to the button guideline, developers can click on an example that have the same purpose as your button,
copy the property,
paste it, and rename it.
Conclusion
The guideline that the developers follows maintain consistency in all styling and assets in the application. It also makes designing mock-up easier since the developers don’t have to research every time they want to decide the color or the font of the mock-up, they just need to follow the guideline. I hope my article can help you understand the design guideline of BisaGo.
