HOW TO DESIGN A FOOD ORDERING APP UI/UX IN CORELDRAW

Effectual Designs
By -
0

  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:

  1. Home Screen (food selection)
  2. Product Detail Screen (focused on a selected item)


Step 1: Set Up Your Canvas

  1. Open CorelDRAW.
  2. Create a new document with dimensions:
    • Width: 1080 px
    • Height: 1920 px (standard for mobile mockups)
  3. 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.

Post a Comment

0 Comments

Post a Comment (0)
3/related/default