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.
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:
- Burger with cheese and bacon image
- San Francisco font
- Odudo Mono font
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.
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.
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)
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
Step 3
Drag the burger image inside your Sketch document, shrink it to 955 px and place it as shown in the following 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.
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.
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.
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.
Want to Learn More?
We have loads of Sketch UI tutorials on Tuts+, beginner to intermediate level, take a look!
SketchHow to Design a Fitness App UI in Sketch
SketchHow to Design a Money Management App UI in Sketch
SketchHow to Design a Travel App Login Screen in Sketch
SketchQuick Tip: Recreate Apple Watch’s Activity Rings in Sketch
SketchA Walkthrough of the Prototyping Tools in Sketch
Responsive Web DesignTips and Tricks for a Responsive Design Process in Sketch
Sketch10+ New Sketch Plugins to Improve Your Design Workflow
SketchHow to Organize Your Sketch Styles and Symbols Like a Pro
SketchSketch in 60 Seconds: Resizing Element Groups
No comments:
Post a Comment