Another Day, Another User Interface Related Post!
As the hipster of the team, it is part of my duty to design PsychoTip’s user interface, and make the interface as friendly as possible for the users. In previous posts, I have discussed about establishing guidelines, and using design heuristics.
In this post, I will elaborate more on the creation of the interface by referring to established works, and also by using our guidelines that we have created in the beginning.
Referring Established Works
In designing PsychoTip, there were a few aspects that we designed based on the experience of established works. Here are a couple of examples.
#1 Splash Screen
A splash screen is the first page that comes up when first opening the application. Their primary purpose is to show people what they are using and reinforce the brand image, while remaining a kind of placeholder that people look at while they wait for the application to start up.
The design on the splash screen is very similar with other major applications, which consists of the application’s logo.
#2 Sign In / Sign Up Page
The sign in / sign up page is also similar to other applications. The goal is that when the user first sees this page, their view is fixed on the sign in and sign up buttons.
Implementing Our Design Guideline
As mentioned in a previous post of mine, we have established a design guideline for PsychoTip. This design guideline is used to ensure cohesive and consistent experience among the created product.
During development, we always try our best to follow the established guidelines. These guidelines proved to be very useful during PsychoTip’s development, especially back when we were still creating prototypes, and even now when we code the interfaces.
During the coding process, there are a few things we did to make sure that everything is consistent with the guideline.
#1 Colors
All the colors that are defined in the guideline are declared in our colors.xml file. This is done in order to make the colors correct and consistent throughout the application.
With this, we only need to refer to the defined colors.
#2 Fonts
During the initial setup of the application, we imported all the fonts used in the guideline. We did not import any font outside of the guideline to make sure no confusion will arise during the coding phase.
#3 Assets
All assets and images are all placed into the drawable folder. Assets are imported to a .xml format, to make sure it won’t look blurry when scaled.
With this, below is an example from PsychoTip:
Login Screen
The login screen is quite a simple layout to design. The screen contains a title, input areas for the username and password,the button to log in, and a “forget password” text button.
Each feature and aspect is designed according to our guideline. Background color uses both the set primary and secondary color for the gradient, which is #01C1C6 and #D7F5B5 respectively. Muli is used for the text fonts, and text weights are different between the title and content. 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. The “forget password” text button is not yet implemented, hence the nonexistence in the current version of the application.
Thanks for reading, and see you on my next post!
