Web Development: How to Design a Travel App Login Screen in Sketch

How to Design a Travel App Login Screen in Sketch

Final product image — What You'll Be Creating

In this Sketch UI tutorial you will learn how to design a travel app login screen design.

For starters you will learn how to create simple buttons, how to copy style attributes, and how to save and use symbols or nested symbols. All these little features will ease your work throughout this Sketch UI design tutorial.

Next, using simple shapes, paths, and vector shape building techniques, you will learn how to add pixel perfect icons to your Sketch UI design. Finally, you’ll learn how to add text content and image fills to your Sketch design.

Sketch UI Templates on GraphicRiver

For more inspiration on how to adjust or improve your final Sketch UI design you can find plenty of resources at GraphicRiver.

What You Will Need:

To recreate exactly what I walk through during this tutorial you will need the following resources available from Envato Elements. Alternatively you can substitute these assets with free fonts and images from elsewhere.

Auro font
Alma Mono font
Web and social icons vector set
Aerial view of rocks and blue sea lagoon in Greece photo

1. How to Set Up the Artboard

Go to Insert > Artboard from the toolbar or menu (or press A) and the Inspector will reveal a list of artboard templates. Click the iPhone 11 template to create a 414 x 896 px artboard. Once you’re done, hit Escape to deselect your artboard.

2. How to Save and Use Symbols in a Sketch App Design

Step 1

Go to Insert > Shape > Rectangle from the toolbar or menu (or press R). Create a shape the size of your artboard (282 x 150 px), make sure that it covers your entire artboard and that it stays selected.

Go to the Inspector panel and focus on the Style section. Uncheck the Borders checkbox to disable the border applied to your rectangle and keep the default Fill color.

Step 2

Go to Insert > Shape > Rectangle from the toolbar or menu (or press R). Create a 320 x 60 px shape, make sure that it stays selected and focus on the Inspector panel.

First, let’s use the X & Y input boxes to numerically place this new rectangle. Enter 47 in the X box and 730 in the Y box and your shape should move to the bottom side of the artboard, as shown in the following image.

Keep focusing on the Inspector panel, drag the Radius slider to 30 and then move to the Style section. Disable the existing Border and change the Fill color to #F9732E.

Step 3

Go to Insert > Text from the toolbar or menu (or press T). Click once on your artboard and focus on the Text section from the Inspector panel.

Select the Alma Mono font, set the size to 20 and the color to white (#FFFFFF), and then simply type the "SIGN UP" piece of text. Place it as shown in the following image.

Step 4

Select your orange rounded rectangle along with the "SIGN UP" piece of text and click the Create Symbol from the toolbar, or choose Layer > Create Symbol in the menu. Name your symbol "Button Orange" and click OK. This will create a master symbol separate from your artboard. If you make a change to a master this will also show in any instances of that symbol in your document.

Step 5

Go to Insert > Shape > Rectangle from the toolbar or menu (or press R). Create a new 320 x 60 px shape, make sure that it stays selected and focus on the Inspector panel.

Again, use the X & Y input boxes to numerically position your selection. Enter the values shown in the following image and then drag the Radius slider to 30.

Keep focusing on the Inspector panel and move to the Style section. Disable the existing Border and change the Fill color to #4FD44E.

Step 6

Make sure that your green shape is still selected and save it as a symbol using the same Create Symbol button from your toolbar. Name this new symbol "Button Green" and click OK.

Step 7

Focus on your two master symbols as you’re about to create a simple nested symbol.

Go to Insert > Document > Button Green to add an instance the green symbol. Place it perfectly above the "Button Orange" master symbol and then click the Backward button from your toolbar to move the newly added symbol instance behind the text. In the end things should look like in the second image.

Step 8

Return to your artboard and notice that the bottom button is now green. This simply happened because of the changes that were made to its master symbol in the previous step.

Select this symbol instance and focus on the Overrides section from the Inspector panel. Open that Button Green drop-down menu and select No Symbol to remove the "Button Green" symbol override and return to the original instance of the symbol.

Step 9

Move to the top button, right click it and go to Replace > Document > Button Orange. Move to the Symbol section from the Inspector panel, enter "SIGN IN" in the text override box and keep the "Button Green" symbol override.