HOW TO DESIGN A FOOD ORDERING APP UI/UX IN CORELDRAW
If you're a UI/UX designer who prefers working with CorelDRAW
instead of tools like Figma or Adobe XD, you're not alone. CorelDRAW offers
excellent vector design capabilities that can help you create high-fidelity
mobile app mockups. In this tutorial, we’ll walk through designing a food
ordering app interface — like the one shown in the image — directly in CorelDRAW.
Tools You’ll NeedCorelDRAW (Version X7 or newer recommended)
- Basic
understanding of vector shapes and layers
- Reference
image (like the one above)
- UI
icons (you can download free icon packs from websites like Flaticon)
UI Structure Breakdown
The UI consists of two main screens:
- Home
Screen (food selection)
- Product Detail Screen (focused on a selected item)
Step 1: Set Up Your Canvas
- Open CorelDRAW.
- Create
a new document with dimensions:
- Width:
1080 px
- Height:
1920 px (standard for mobile mockups)
- Set
the color mode to RGB.
Step 2: Design the Home Screen Layout
Header Section
- Draw a
rounded rectangle for the top section.
- Add a circular
profile image placeholder on the left.
- Insert
a title: “Choose Your Favorite Food”.
- Use
the Text Tool (F8) to add text.
- Add a notification
icon on the right.
Search & Filter
- Create
a search bar using the rectangle tool.
- Add a
magnifying glass icon.
- Add category
filters using pill-shaped rounded rectangles: "All",
"Pizza", "Burger", etc.
Food Cards
Each food item is inside a card:
- Draw a
rounded rectangle with a subtle shadow.
- Inside,
place:
- A
food image (import or placeholder)
- Food
name (e.g., “Hamburger”)
- Price
(e.g., "Rs. 250.0")
- Favorite
(heart) icon
Duplicate the cards for consistency and align them using Object
> Align and Distribute.
Step 3: Design the Product Detail Screen
Top Image Section
- Use a half-circle
or rounded rectangle filled with deep red.
- Import
or draw the burger image — center it with slight shadow for depth.
Details Section
- Add
the product name ("Hamburger") and price ("Rs.
250.0").
- Create
pill buttons for "Details" and "Reviews"
using rounded rectangles.
- Use
the Text Tool to add the product description. Adjust line spacing for
readability.