Build Real World Food App In Adobe XD 2021

Create a polished splash screen by applying the theme color, white status bar and home tab, and centering the SPG logo; save color palettes, fonts, and character styles.

Design a current location screen in Adobe XD by reusing the splash screen, masking a map behind a phone mockup, and adding a themed use current location button.

Create the current location screen in Adobe XD 2021 by duplicating the previous layout, adding a map and icons, aligning elements, coloring them, and including a continue button.

Design the home screen for a real world food app in Adobe XD 2021, building category cards, a search bar, and a scrollable all restaurants section with details and ratings.

Design a complete filter screen in Adobe XD 2021, featuring price and cuisines filters, repeat grids, and an apply filter action with a white back arrow and theme colors.

Create the apply filter screen in Adobe XD 2021 by duplicating and repositioning the artboard after screen five, delete popular categories, and set top margin to 30 pixels to complete.

Design a before-login sidebar menu in Adobe XD 2021 for a food app. Assemble rectangles, icons, and text for login, create account, and settings using theme colors and precise spacing.

Design sign up screen 1 in adobe xd by duplicating layouts, creating a rounded signup area, adding a close icon, and adding continue options with Facebook and Gmail icons.

Duplicate screen five to build sign up screen two in Adobe XD 2021, lock the notch, add an email icon via plugins, and adjust top margins, colors, and fonts.

Learn to create sign up screen three by duplicating the previous screen, adding and centering an icon with plugins, and wiring text fields for first name, last name, and password.

Build a login screen in Adobe XD by duplicating a screen, adding and centering login icon, configuring email and password fields, including forgot password text, and reusing screen after login.

Create a restaurant detail screen by overlaying the image with a dark backdrop, adding back and info icons, the name, delivery time, and rating, plus a deals section with cards.

Design a restaurant location screen in Adobe XD 2021 by arranging text, icons, a map, and a status bar, including notch handling and shape masking.

Design a restaurant review screen by duplicating screen, hiding the notch, removing the body text and map image, setting font to 14, and implementing a five-star rating with repeat grid.

Design and assemble the cart screen for a real-world food app in Adobe XD, including pizza item details, price display, quantity controls, and an add-to-cart action.

Build a place order screen in Adobe XD 2021 by duplicating a prior screen, setting the restaurant name, and adding item rows with counters, totals, and a place order button.

Design a payment method screen in Adobe XD by duplicating a previous layout, replacing icons, and adding radio options for credit, debit, and cash on delivery with card logos.

Design and prototype a save card screen in Adobe XD by duplicating a screen, adding name, card number, expiry, and CVC fields, and placing an apply button with a checkmark.

Create an order confirmation screen by duplicating and adjusting elements, showing the subtotal, estimated delivery time, a checkmark icon, customer name, and the total gst and final price.

Duplicate screen 12 to build order home screen, add a 375 by 260 card with a masked map image, and place the location icon and you order from California pizza.

Design the order screen in Adobe XD 2021 by editing icons, text, and shapes; add a preparing food icon, a location icon, and a chat box icon for contactless delivery.

Duplicate the previous screen, adjust the layout and text, swap icons from the exercise files, and finalize the order screen by placing the writer and foodies icons.

Duplicate the order screens 3 and 4 in Adobe XD 2021, resize, place the map, add a location icon, set times to 10 minutes, and align properly.

Create a right-side rider contact message in adobe xd by duplicating the screen, drawing a colored message bubble, and adding a plugin send icon with centered text.

Duplicate screen 21 in Adobe XD 2021 to build the meal delivered screen, paste the delivered icon from the exercise files, resize the rectangle to 320, and align the elements.

Create a logged-in side menu in Adobe XD by duplicating elements, adding user, location, and gift icons, aligning text, applying the team color, and replacing terms with logout.

Create a past orders screen in Adobe XD 2021 by duplicating the layout, editing labels, styling fonts and colors, and building a repeat grid with a reorder button.

Design a contact info screen by duplicating the previous layout, deleting extra cards, and updating text fields for username, email, and phone, while adjusting alignment, color, and spacing.

Edit the user info screen in Adobe XD 2021 by duplicating screen 19, renaming fields to first name, last name, email address, and mobile number, and adjusting layout for clarity.

Learn to build and polish the edit user address screen for a real world food app in Adobe XD 2021, including labeling, notes, and layout alignment with colors and buttons.

Duplicate the previous screen to build the current vouchers screen. Align the tab group, add a 140 by 140 circle with a voucher icon, and display no vouchers yet, centered.

Design a past voucher screen in Adobe XD by duplicating elements, creating labeled rectangles, adding expired and 20 percent off text, and applying repeat grid.

Build a help center screen in adobe xd by duplicating a screen, centering the title, adding a 343 by 500 rounded rectangle, multiline text, and an arrow icon.

Create the help center detail screen by duplicating the previous layout, resizing to 343 by 250, adding a back and close icon, and adding numbered detail items.

Link artboards into a realistic prototype by configuring triggers, time delays (two seconds), and slide and overlay animations across screens, then share the design with stakeholders for review.