In this tutorial you’ll learn to design a sign-in form, inspired by the aesthetic lessons from Google’s Material Design. We’ll cover some good practices to increase your form completion rates and methods for staying consistent in your designs. To start, download the Archive.zip. Install the Roboto fonts and open the start file.sketch.
Let’s begin by creating our art-board. To do this press A then choose the iPhone Portrait 640x1136px preset. Let’s name it login.
1. The Header
Next, we have to design the header. Our header contain the iPhone status bar and a navigation bar. First, for the status bar, draw a rectangle using R, name it status bar, then apply these properties:
- X : 0
- Y : 0
- Width : 640
- Height : 40
Uncheck the borders, and fill the rectangle with the color you want. You might choose to go with the main color of your brand or application–I choose this blue:
- H : 200, S : 100, B : 80
Let’s do the same for the navigation bar. Press R, draw your rectangle, name it navigation bar then use these properties to position and scale it:
- X : 0
- Y : 40
- Width : 640
- Height : 96
Finally fill it with the same color you chose before :
Note: We’re designing with retina displays in mind here. For that reason our nav bar is 96px high: twice the height of the actual intended height of 48px. 48px is three times the font-size height that I have chosen to use (16px) allowing me to center my icons and stay consistent with the content at the same time.
Back Button
We have almost completed the header. Now we have to add the title of the page and the back button.
Let’s start with the back button. Go to Insert > Symbols > back icon then apply these properties:
- X : 30
- Y : 72
- Width : 18
- Height : 32
You should end up with something like this:
To be sure that the back icon is vertically centred you can select the icon and the navigation bar then click on the Align Vertically icon (top right in the illustration below):
You can use this functionality to position any layer relative to another. Now, add the back label. Type T then write “Back”. Go to the text properties and enter:
- Typeface : Roboto
- Weight : Regular
- Color : white
- Font-size : 24
- Alignment : Left
- Width : auto
- Line : 24
Then position on the art-board using:
- X : 70
- Y : 76
The Title
And finally: the title. Type T then write “Login”. Go to the text properties and enter:
- Typeface : Roboto
- Weight : Medium
- Color : white
- Font-size : 32
- Alignment : Center
- Width : auto
- Line : 32
Then the following coordinates for positioning:
- X : 280
- Y : 72
Let’s put all our layers in a folder together by selecting all the objects and clicking on the Group button. Name it “header” and you’re done!
2. The Form
Let’s continue with the form. This is a login form, the end goal being to get the user to login or signup. To offer encouragement we’ll keep the inputs to a minimum and present the user with some motivational language.
Type T then enter the catchphrase of your choice. Be sure to be concise, for me it’ll be You will get some amazing things, then edit the text properties to be:
- Typeface : Roboto
- Weight : Medium
- Color : white
- Font-size : 48
- Alignment : Center
- Width : auto
- Line : 64
Now let’s place it. We want to apply whitespace to make it readable so I chose to put a 80px margin around the text. To do so edit the following parameters :
- X : 80
- Y : 216
- Width : 480
Inputs
We have our catchphrase, now let’s add the core of our page: the inputs. Our inputs will demonstrate two states: empty and filled. Let’s start with the filled one : Press R and draw a rectangle, name it “input” and apply the following:
- X : 80
- Y : 412
- Width : 480
- Height : 96
Change the gray background to a white one in the Fills section, uncheck the borders and add a shadow with these properties:
- H0 S0 B90 A100
- X : 0
- Y : 2
- Blur : 0
- Spread : 0
You should get something like this:
Note: To simplify the tutorial I’m giving you the exact distance for each layer. They each have a 80px margin. If you want to check the margin between your current layer and the others hold alt and drag your mouse over the other layers.
Now we’ll add a label for the input. Hit T then type “username” in uppercase, giving the text the following properties:
- Typeface : Roboto
- Weight : Medium
- Color : H200, S100, B80
- Font-size : 20
- Alignment : Left
- Width : auto
- Line : 20
- X : 80
- Y : 431
Now for the content of the input. Hit T then type your name, giving the text properties these values:
- Typeface : Roboto
- Weight : Regular
- Color : H0, S0, B0
- Font-size : 28
- Alignment : Left
- Width : auto
- Line : 28
- X : 80
- Y : 461
Then, select the two layers, align them to the left and add a 10px margin between them.
Validation
There is one last step to complete this filled input. Some kind of validation would help our users understand if they’ve filled in the details correctly, or they need to try again.
Let’s add this checkmark by clicking in Insert > Symbols > check icon then place it at
- X : 510
- Y : 450
Select the input layer, the input content and the check icon folder, then group them and call the new folder input filled.
Let’s now add the empty input. Select the input filled folder, right-click it and press duplicate. Rename the folder input. Then move it down by 98px. Delete all the layers inside this folder except the one called input. Type T then write “Password” and add the following properties:
- Typeface : Roboto
- Weight : Regular
- Color : H0, S0, B60
- Font-size : 28
- Alignment : Left
- Width : auto
- Line : 28
Then align your text layer vertically and to the left of the input layer like so :
Password Link
Now we’ll add a “forgot password” link. Click on Insert > Symbols > help icon and place it at:
- X : 499
- Y : 543
Move the help icon folder and text layer to the input folder and you’re done with the inputs!
3. Buttons
To make this form usable we have to add the login button and sign up link. To do so press R, drag a rectangle and name your layer button login with the following property values, including some border radius:
- X : 80
- Y : 646
- Width : 480
- Height : 96
- Radius : 8
- Fills : H200, S100, B80
- Borders : unchecked
Now let’s add the text. Hit T then write “Login” with these properties:
- X : 110
- Y : 676
- Typeface : Roboto
- Weight : Light
- Color : White
- Size : 32
- Line : 32
Finally we’ll add our icon by clicking Insert > Symbols > right icon then positioning it like so:
- X : 517
- Y : 682
Group your last three layers and name it Button login. You should get something like this:
Sign Up Link
Now let’s add our “sign up” link. To do so hit T and enter “No account? Sign up”. Give this text the following properties:
- X : 80
- Y : 784
- Typeface : Roboto
- Weight : Regular
- Size : 28
- Line : 28
Finally we want to make the link itself stand out from the rest of the text. To do so select your text layer and change the color to: H0 S0 B60. Select only the "Sign up" part of the text string and apply your main color (in my case H200, S100, B80).
Congratulations!
Congratulations we are done with the login form! You now have everything you need to design a simple login page for your application, inspired by Material Design aesthetics.
As an extra challenge, why not help your users by adding some social login features? Download the final file to check (as a bonus) the sign up, lost password and congratulations modals.
Thank you for reading the tutorial. Don’t hesitate to ask any questions in the comments below.
