Unlimited WordPress themes, graphics, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Web Design
  2. Sketch
Webdesign

How to Design a Food Ordering iPad App UI in Sketch

by
Difficulty:IntermediateLength:LongLanguages:
Final product image
What You'll Be Creating

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

To begin with you will learn how to create the starting components of any food mobile app. You will learn:

  • how to create a basic navigation bar,
  • how to save and use symbols and nested symbols,
  • how to incorporate images, icons and text in a food mobile app,
  • and how to create a smart layout.

All these little features will ease your work throughout this restaurant app UI tutorial.

  • 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 food app design stand out.
  • Finally, you’ll learn how to add a stock image to this food app design.

UI Templates on GraphicRiver

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

Choose from over 1800 UI templates
Choose from over 1,800 UI templates on GraphicRiver

What You Will Need:

You will need the following resources in order to complete this restaurant menu app design. 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:

1. How to Set Up the Artboard and Change its Color

Go to Insert > Artboard from the toolbar or menu (or press A) and the Inspector will reveal a list of artboard templates.

Click the 12.9" iPad Pro template to create a 1366 x 1024 px artboard and then go to the top of the panel and switch from portrait to landscape mode. Now, let's start the work on this food ordering app UI.

artboard

Step 2

Make sure that your artboard is still selected or reselect with a simple click on its name.

Go to the Inspector panel and check the Background color box. Click that color well and replace the existing color with #F7D4A6. Once you’re done, press Escape to deselect your artboard.

artbaord color

2.How to Add a Navigation Bar in a Food Ordering App UI

Step 1

Go to Insert > Shape > Rectangle from the toolbar or menu (or press R). Click and drag to create a 1366 x 100 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 50 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 and move to the Style section. Disable the existing Border and change the Fill color to white (#FFFFFF)

rectangle

Step 2

Go to Insert > Shape > Rectangle from the toolbar or menu (or press R). Hold down the Shift key to easily create a 50 px square and place it as shown in the following image (X:50 Y:75). You can go to View > Canvas > Show All Guides to enable the Smart Guides which will make it easier for you to align shapes in Sketch.

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

rounded square

Step 3

Focus on the rounded square made in the previous step. Go to Insert > Shape > Rectangle (R) and create a 10 x 16 px shape. Place it as shown in the following image, make sure that it stays selected and go to the Style section from the Inspector panel. Change the Fill color to #644032 and disable the Border.

Return to your shape and double click it to activate the Edit mode. Select the top-left point and drag it 8 px down and then select the bottom-left point and simply delete it. This should turn your rectangle into a triangle, as shown in the fourth image.

arrow shape

Step 4

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, change the style to Light, set the size to 30 and the color to #644032, and then simply type the "Back" piece of text. Place it as shown in the following image.

text

Step 5

Go to Insert > Shape > Rectangle (R) and create a 50 px square. Place it as shown in the following image, drag the Radius slider to 10, and then go to the Style section from the Inspector panel. Change the Fill color to #4DCA5D, disable the Border and then delete it using that Trash button.

green rounded square

Step 6

Make sure that your green rounded square is still selected and keep focusing on the Style section from the Inspector panel.

Click that Shadows section to activate the shadow effect. Enter the numbers shown in the following image and then click the color well of this effect. Change the color to #46CC57 and lower the Alpha to 50.

green shadow

Step 7

Go to Insert > Text (T), add the "2" piece of text and place it as shown in the following image.

Use that same San Francisco Compact Display font and change its style to Semibold. Set the size to 30, the color to white and the text alignment to Center.

text

Step 8

Select your light brown rounded square and duplicate it (Command-C > Command-V). Drag the copy to the right side of your artboard and place it as shown in the following image.

duplicate shape

Step 9

Keep focusing on the rounded square made in the previous step.

Go to Insert > Shape > Oval from the toolbar or menu (or press O). Hold down the Shift key to easily create a 24 px circle, place it as shown below (X:1204 Y:102) and make sure that it stays selected. Disable the existing Fill, change the Border color to #644032 and set the Width to 4.

Double click this new shape to activate the Edit mode, select bottom point and simply delete it.

circle border

Step 10

Make sure that the shape made in the previous step is still selected and press Command-Option-C to copy its styling.

Go to Insert > Shape > Oval (O), create a 14 px circle and place it as shown below (X:1209 Y:88). Make sure that this new shape is selected and press Command-Option-V to apply that copied styling.

copy paste style

3. How to Use Symbols and Nested Symbols in a Food Ordering App UI

Step 1

Go to Insert > Text (T), add the "Standard BBQ Angus" piece of text and place it as shown in the following image.

Use the Odudo Mono font and change its style to Bold. Set the size to 60, the color to #644032 and the text alignment to Left.

text

Step 2

Go to Insert > Text (T), add the "SIZE" piece of text and place it as shown in the following image.

Use the San Francisco Mono font, change its style to Bold, set the size to 15 and the color to #BB986A.

text

Step 3

Go to Insert > Shape > Rectangle (R) and create a 92 x 50 px shape. Place it as shown in the following image and focus on the Inspector panel. Drag the Radius slider to 10, change the Fill color to #EDCA9C and disable the Border.

rounded rectangle

Step 4

Hold down the Option key and simply drag the rounded rectangle made in the previous step to add a copy. Additionally, you can hold down the Shift key while dragging the copy to constrain its movement to a single direction (horizontal or vertical). Drag the copy to the right and leave a 10 px gap between the two shapes. This is where the Smart Guides will ease your work.

duplicate rounded rectangle

Step 5

Select the left rounded rectangle and click the Create Symbol button from the toolbar, or choose Layer > Create Symbol in the menu.

Name your symbol "Button.Inactive", select a Left to Right Layout and click Create. 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. That Left to Right Layout will help you later to create a smart layout.

save symbol

Step 6

Select the other rounded rectangle and focus on the Style section from the Inspector panel. Change the Fill color to white and add a Shadow. Enter the numbers shown in the following image and then click the color well. Change the color to #644032 and lower the Alpha to 25.

edit style

Step 7

Make sure that your white rounded rectangle is still selected and click the Create Symbol button from the toolbar, or choose Layer > Create Symbol in the menu.

Name this new symbol "Button.Active", select a Left to Right Layout and click Create.

save symbol

Step 8

Go to Insert > Text (T), add the "SMALL" piece of text and place it as shown in the following image.

Use the San Francisco Compact Display font and change its style to Light. Set the size to 20 and the color to #2A2A2A, and then make sure that the text alignment is set to Left.

text

Step 9

Select that "SMALL" piece of text along with the rounded rectangle that lies in the back and click the Create Symbol button.

Name this new symbol "Button", select a Left to Right Layout and click Create.

save symbol

Step 10

Right click on your white rounded rectangle and go to Replace With > Button to quickly replace your selection with the "Button" symbol saved in the previous step. Make sure that it stays selected and focus on the Symbol section from the Inspector panel.

Let's edit those Overrides to change the content and the appearance of this symbol instance without affecting the master or the other instances. Type in "MEDIUM" in that input box and simply select "Button.Inactive" from the drop-down menu. In the end your symbol instance should look like in the second image.

replace with symbol

Step 11

Go to Insert > Document > Button to add a new instance of your "Button" symbol. Place it as shown below and edit the Overrides as shown in the following image.

add symbol instance

Step 12

Select the three instances of your "Button" symbol and create a new symbol. Name it "Buttons" and don't forget to select Left to Right Layout from the drop-down menu.

neste symbol

4. How to Create a Smart Layout

Step 1

Go to Insert > Text (T), add the "BUN" piece of text and place it as shown in the following image.

Use the San Francisco Mono font, change its style to Bold, set the size to 15 and the color to #BB986A.

text

Step 2

Go to Insert > Document > Buttons to add a new instance of your "Buttons" symbol. Place it as shown below and edit those Overrides as shown in the following image.

smart layout

Step 3

Go to Insert > Text (T), add the "TOPPINGS" piece of text and place it as shown in the following image.

Use the San Francisco Mono font, change its style to Bold, set the size to 15 and the color to #BB986A.

text

Step 4

Go to Insert > Document > Buttons to add a new instance of your "Buttons" symbol. Place it as shown below and edit those Overrides as shown in the following image.

smart layout

Step 5

Add a new instance of your "Buttons" symbol. Place it as shown below and edit those Overrides as shown in the following image.

smart layout

Step 6

Add a new instance of your "Buttons" symbol. Place it as shown below and edit those Overrides as shown in the following image.

Now, here’s how that Left to Right Layout option will help you. Let's say that you decide to remove one of the buttons from your symbol. All you have to do is go to the Overrides section, find the button that you want to be removed and select No Symbol from the drop-down menu. This will immediately remove the undesired button and the space that it covers. Having the Layout set to None instead of Left to Right would remove the button, but keep the space that it covers empty.

smart layout left to right layout

5. How to Add Several Stand-alone Buttons in a Food App Design

Step 1

Go to Insert > Shape > Rectangle (R) and create a 50 px square. Place it as shown in the following image, drag the Radius slider to 10, and then go to the Style section from the Inspector panel. Change the Fill color to #EDCA9C and disable the Border.

rounded square

Step 2

Keep focusing on the rounded square made in the previous step and make sure that the Rectangle tool is still active. Creat a 2 x 20 px shape and place it as shown in the first image. Set its Fill color to #2A2A2A and disable the Border.

Duplicate this thin rectangle (Command-C > Command-V) and select the copy. Click the Rotate button from your Toolbar and rotate the selection 90 degrees as shown in the following image.

rotate shape

Step 3

Go to Insert > Document > Button to add a new instance of your "Button" symbol. Place it as shown below and edit the Overrides as shown in the following image.

add symbol instance

Step 4

Go to Insert > Shape > Rectangle (R) and create a 140 x 80 px shape. Place it as shown in the following image, drag the Radius slider to 10, and then go to the Style section from the Inspector panel. Change the Fill color to white and disable the Border.

rounded rectangle

Step 5

Go to Insert > Text (T), add the "$8.99" piece of text and place it as shown in the following image.

Use the San Francisco Compact Display font and change its style to Semibold. Set the size to 30, the color to #2A2A2A and the text alignment to Center.

text

Step 6

Go to Insert > Shape > Rectangle (R) and create a 100 x 80 px shape. Place it as shown in the following image, drag the Radius slider to 10, and then go to the Style section from the Inspector panel. Change the Fill color to #EDCA9C and disable the Border.

rounded rectangle

Step 7

Go to Insert > Text (T), add the "1" piece of text and place it as shown in the following image.

Use the San Francisco Compact Display font and change its style to Semibold. Set the size to 30, the color to #2A2A2A and the text alignment to Center.

text

Step 8

Go to Insert > Shape > Rectangle (R) and create two 14 x 2 px shapes. Place these thin rectangles as shown in the following image and then go to the Style section from the Inspector panel. Change the Fill color to #644032 and disable the Border.

Select only the right rectangle and duplicate it (Command-C > Command-V). Select the copy and rotate it 90 degrees, as shown in the following image.

plus minus symbols

Step 9

Go to Insert > Shape > Rectangle (R) and create a 220 x 80 px shape. Place it as shown in the following image, drag the Radius slider to 10, and then go to the Style section from the Inspector panel. Change the Fill color to #4DCA5D, disable the Border and then remove it.

rounded rectangle

Step 10

Make sure that your green rounded rectangle is still selected and keep focusing on the Style section from the Inspector panel.

Activate the existing Shadow, enter the numbers shown in the following image and then click the color well of this effect. Change the color to #46CC57 and lower the Alpha to 50.

button shadow

Step 11

Go to Insert > Text (T), add the "ORDER" piece of text and place it as shown in the following image.

Use that same San Francisco Compact Display font and change its style to Semibold. Set the size to 30, the color to white and the text alignment to Center.

text

6. How to Add an Image in a Food App Design

Step 1

Focus on the top side of your artboard, select that white rectangle and simply delete it.

delete rectangle

Step 2

For this step you will need this Burger with cheese and bacon image. Open it in Photoshop, crop that white background with a simple layer mask and then save your burger image as a PNG file.

mask burger image

Step 3

Drag the burger image inside your Sketch document, shrink it to 955 px and place it as shown in the following image.

add image

7. How to Add a Simple Ribbon to Your Food Ordering App UI

Step 1

Go to Insert > Shape > Rectangle (R) and create a 170 x 80 px shape. Place it as shown in the following image, change the Fill color to #F93232 and disable the Border.

red rectangle

Step 2

Double click your red rectangle to activate the Edit mode. Focus on the left side and use a simple click to add a new point as shown in the first image. Select this new points and drag it about 20 px to the right, as shown in the second image.

add point

Step 3

Go to Insert > Text (T), add the "NEW" piece of text, place it as shown below and use the text attributes shown in the following image.

text

Congratulations! Your Food Ordering App UI is Finished!

Here is how it should look. I hope you’ve enjoyed this food inspired app tutorial and can apply these techniques in your future projects. Don’t hesitate to share your final result in the comments section.

Feel free to adjust the final restaurant menu app design and make it your own. You can find some great food app inspiration at GraphicRiver, with interesting solutions to improve any restaurant app UI.

food ordering app ui

Want to Learn More?

We have loads of Sketch UI tutorials on Tuts+, beginner to intermediate level, take a look!

Advertisement
Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.