Stay the Design on the Right Track!
In designing a User Interface, there is something very important. Branding. It is important to understand what the core values are and what message the product is going to bring. To make a good UI design, there are several things that need attention, one of them is consistency. The better branding is made, the more binding is the attraction emitted by a product.
What are the Design Guidelines?
“A guideline is a visual language communicating the design goals to the team, it is important to make sure that everyone can understand it and to enforce its usage.” — Yuki Gu
Design guidelines are a guide to design a User Interface. This allows a designer to design in a short time and the development team to compile application layouts. Guidelines are very important in a software development process because to meet the principles in making the design of software, it’s needed a design that will be used as a guide. So there is no conception or interpretation miss.
Design Guideline Aspects
There are several components on design guideline you must pay attention to
- Color, choose the that describe the product.
- Typography, choose the font type, size, and typeface
- Headline, the largest text provided for short or important text.
- Button, select a guide to the shape, color, text, and size.
- Input & form, page guides that require user input or form pages.
- Body, write a long section.
- Icon, choose the type and size
- Spacing, the distance between components.
- Error prevention & status, guide on how to display if an error occurs or display the status of a user’s actions.
Design Guideline on My Project
As I said in my previous post, about Visual Designs, we’ve been given the high fidelity mockup from our partner. So, they’ve made their own guidelines and we only implement it for our product. But, here’s I share about the components of the design.
— Colors
There are only 3 main colors in our product.
- The primary color is the color most often used in applications. In our application, the most used color is navy blue or #273E71 on a hex. We use this primary color as the background of the application.
- The secondary color is usually placed on supporting components such as buttons that could be a differentiator with other applications. In our application, we use white or #FFFFFF on a hex and orange or #F55D25 on a hex as our secondary colors. We use white for the card, font, icon, and question detail page. Meanwhile, we only use the orange color for the buttons.
Other than primary and secondary colors, we also use complementary colors such a grey in the dark, medium, and light.
— Typography
In typography, the guidelines are in the fonts type, size, and thickness. We use the main fonts given by our partners, Lato. There is one different font we use, for the placeholder sign in field, Open Sans. Regarding font faces, we only use Lato but with different formatting applied, such as regular, bold, and italics, to differentiate the importance of different things.
Here’s the guideline for our fonts.
Here’s our fonts implementation.
— Buttons
In making buttons, the guidelines are done by registering the types and behavior in the buttons. There are only 2 types of buttons in our application, the exact button and TextView button which is a Text that function as a button.
Referring Established Works
Based on the given mockups, I remembered some similar designs. Here are the examples
Onboarding Page
For this page, we design by ourselves. In designing these pages, there were a few aspects that we designed based on the experience of established works.
An onboarding page is the first page that comes up when first opening the application. Their primary purpose is to show people what they are using and how to use the application.
The design on onboarding pages is similar to other major applications, which consists of icons, titles, and explanations. There is also an indicator dots that show where you are and on the last onboarding page, there is a button to start the applications.
Sign In Page
The sign-in page is also similar to other applications. The purpose is when the user first sees this page, their view is fixed on the sign-in button. Like other established works, this sign-in page consists of a logo, input field, and button.
Implementing Our Design Guideline
Our design guideline is coming from our partner and already shaped in a mockup. We use Figma for our mockup. This mockup is used to ensure cohesive and consistent experience among the created product. During the coding process, there are a few things we did to make sure everything is consistent with the guidelines.
In Android Studio, we stored our design assets in /res/ folder or you can say resources folder. It contains all things about the UI.
For the colors and fonts are imported to the values folder.
- Colors
All the colors that are defined in Figma are declared in our colors.xml file. The file is a built-in from Android Studio, you stored all your color in the values folder. This is done in order to make the colors correct and consistent throughout the application and prevent defining hex manually. With this, we only need to refer to the defined colors.
Here’s the declaration colors in /res/values/ folder.
- Fonts
All the fonts we used that are defined in Figma are imported to the font folder as a .xml format and declared in our preloaded_fonts.xml file on the values folder. We didn’t import any font outside of the guideline to make sure no confusion will arise during the coding phase. With this also, we only need to refer to the defined fonts.
To import fonts from outside the Android Studio, follow this steps
- Right-click the res folder and go to New > Android resource directory
- Select font in the Resource type list, and then click OK
- Add your font files in the font folder
That’s it, and your font folder will look like this.
Here’s the declaration font in /res/values/ folder.
- Assets
All assets and images are all placed into the drawable folder. Assets and images are imported to .xml format to make sure it won’t look blurry when scales. We import the SVG or PSD assets and images as Vector Assets, rather than Image Asset because Vector Assets looks more HD than Image Assets.
To import images or assets to the Android Studio, follow this steps
- Right-click the res folder and select New > Vector Asset
- Choose Local files in the Asset Type
- Specify an Image file by clicking … in Path
- Click Next and Finish
That’s it, and your drawable folder will look like this.
Below is an example from our Sign In Page
The sign-in page is quite a simple layout to design. The page only contains a logo, input areas for the email and password, and the sign-in button.
Each feature and aspect are designed according to our guideline. Background color uses the primary color, which is #273E71. The input areas for the email and password use Open Sans font, and for the button use Lato font. The design for the button is just like the one set on the guideline, which is a simple button with rounded corners.
On the implementation, everything is kept exactly the same except for the writing on the button because it cannot be implemented as a normal text, it must be capitalized for the button.
Here’s our sign-in page code.
Conclusions
In Android Studio, you design the layout in .xml formatted file and using all resources from /res/ folder. So, you can not input manually on the layout but you must import the assets from fonts, colors, images, and even the strings. That’s my new lessons from using Android Studio. Using design guidelines helps me to enforce best practices. It saves time and also keeps both design and implementation consistent.
Happy guided!
References
https://www.interaction-design.org/literature/topics/design-guidelines
