Web Development: How to Design a Car App Design UI in Sketch

How to Design a Car App Design UI in Sketch

Final product image — What You'll Be Creating

In this Sketch tutorial you will learn how to design a car app UI.

To begin with you will learn how to create the starting components of any car app design. You will learn

how to create a basic navigation bar,
how to save and use symbols,
how to incorporate images, icons and text in a car app

All these little features will ease your work throughout this iOS app.

Using basic shapes, paths, and vector shape building techniques, you will learn how to create flat icons and buttons.
Using subtle shading techniques and some text, you will learn how to make any car app design stand out.
Finally, you’ll learn how to add a stock image to this iOS app.

For more inspiration on how to adjust or improve your final car app deisgn you can find plenty of resources at GraphicRiver.

What You Will Need:

You will need the following resources in order to design this car app. Most of these are available from Envato Elements, where a single subscription allows you unlimited downloads. You can also find alternatives to work with if you prefer:

San Francisco font
Studio Photo Of An Orange Sedan In A White Background image

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. Now, let's start the work on this car app.

2. How to Add a Navigation Bar in a Car App Design

Step 1

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

Use the X & Y input boxes to numerically place this new shape as shown in the following image. Enter 0 in the X box and 49 in the Y box and your shape will move to the top side of the artboard, as shown below.

Keep focusing on the Inspector panel, move to the Style section and simply disable the existing Border.

Step 2

Go to Insert > Shape > Oval from the toolbar or menu (or press O). Hold down the Shift key to create a perfect 12 px circle, make sure that it stays selected and focus on the Inspector panel.

Use the X & Y input boxes to numerically move your selection to the left side of that grey rectangle, as shown in the following image.

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

Step 3

Make sure that your circle is still selected and double click it to activate the Edit mode. Select the bottom point and double click it to turn it into a straight point, and then drag it 4 px down, as shown in the third image.

Step 4

Go to Insert > Shape > Oval (O), create a perfect 12 px circle and place it as shown in the first image.

Select this new shape along with the one lies in the back and click the Subtract button from your Toolbar.

Step 5

Focus on the right side of your grey rectangle. Go to Insert > Shape > Rectangle (R) and create a 12 x 2 px shape. Use the X and Y input boxes to numerically position this rectangle as shown in the following image.

Make sure that this shape stays selected and focus on the Style section from the Inspector panel. Disable the Border and change the Fill color to #2C2E43.

Step 6

Make sure that the tiny rectangle made in the previous step is still selected. Hold down the Option key and simply drag your selected shape to duplicate it. Hold down the Shift key while dragging the copy to constrain its movement to a single direction (horizontal or vertical). Drag the copy down and leave a 3 px gap between the two shapes. Repeat the same techniques with this newly added rectangle.

Step 7

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 San Francisco Compact Display font and be sure that the style is set to Regular. Set the size to 20 and the color to #2C2E43, change the text alignment to Center, and then type the "Available Car" piece of text. Place it as shown in the following image.