App Screen 1: User Interface ( Hasura Internship 2017 )

Varad Bhatnagar
3 min readJun 30, 2017

--

In this part , I will cover the Front End Development for the First Screen of my application .I’ll keep it short and crisp .For this part of the internship , I had to watch a lot of video tutorials and refer to numerous sources on the internet .

As my app was an Android based mobile app , I designed the Front End using Android Studio . For those who are complete beginners at Android Development , you can refer to the Official Documentation or this course on Udacity. Other than that , there are various other sources that you can refer to on the internet or take help from a friend or a fellow intern. I took help from a classmate of mine , Chanchal Roshan , who is an expert with Android Studio and anything to do with app development ( Owns a macbook ).

There are the actual screenshots of the UI of the first screen :

First we have the Signup/Login Page :

THE SIGNUP PAGE

After signing up successfully , there is the Login Page in Parallel . If the user is signing up then Sign Up + Login is executed simultaneously , otherwise the Login Page is used:

THE LOGIN PAGE

After this , we have the Menu Screen .I tried my best to get as close to the prototype as I could but there were some things that I changed with the actual UI to make it easy to use and more appealing to the user . This is a picture of the prototype which I had made earlier for this screen :

PROTOTYPE FOR SCREEN 1

Here is the actual screenshot of the First Screen :

FIRST SCREEN

For the Front End , I used basic functionalities of Android such as TextViews , EditTexts , Background colors and buttons to give this look to the UI. For the signup and the login part too , I used the basic utilities that are offered by the Android Studio and also inserted images to make it look better.

I will cover the BackEnd Part in my next blog-post !

Here is a link to my Screen 2 UI!

--

--