Food Ordering APP UI using Sketch.

In this blogpost, I will show you how I designed an iPhone app for ordering food. For this design, I used the iPhone8 artboard. This design will display a short description about a food along with an image, name and price. I also included few icons, status bar and indicators.

This is my final design.

After creating the iPhone8 artboard, I gave a dark grey background. Next I used few items from IOS UI Template and added status bar and some icons.

In this step, I created a card which represents the current food item which is being browsed among a list of items. For that, I created a big rectangle that goes within the menu and cart icons, and changed the corners to be smooth. On top of the rectangle, again I created a small rectangle and masked it with the big one, to display the image.

Here I created 3 sections in this card. Section 1 displays the image of the food which I included from Craft plugin provided by Invision. Section 2 describes the title and price of the food. Section 3 has button to display more information about the order. I will keep this card as the base design for my UI.

In this step, I created indicators. Basically I am going to create 3 cards for my UI. So these indicators will help me to know in which card I am currently on. To add that, I created a small white oval beneath the card, and placed it center aligned. Made few duplicates and placed it on left and right of an oval. Then changed their colour and size to differentiate it.

Finally I created 2 more cards, also changed the opacity and size of the cards, then placed them to left and right of the main card. So that if I scroll left or right, then that image and indicator will change as main card.

And that’s how I designed this screen.