In this blogpost, I will briefly explain how I designed a login screen for a Mobile app. It contains a logo for the business, a form to enter UserID/Password and also has buttons to login using a Google or Facebook account. Below is my final design.

I created an Artboard with 450*800 dimensions. Then placed a rectangle with same size and filled with #419FF1. I named the artboard as LoginScreen.

I looked for free logos for the business online and grabbed one. “Smart Sketch” is the name of the business and “Learn to earn” is the tag line I chose. Then I added the business name and logo after tweaking the font-size and font-spacing a bit.

I created two text fields to enter User id/Password and a Login button. Below the login button, I added links with text “Forgot your login details?” and “New User : Sign up here”. For the buttons to get a bendy effect, I changed its radius.

Then I added the buttons “Login with Facebook” and “Sign in with Google” to allow users login using their Google or Facebook accounts respectively.

Now for the blur effect, I drew a random shape, changed its opacity and filled with #FFFFFF. Then I activated Gaussian Blur on it and set its values to 40px. The screen is ready.