Build Real World Uber App In Adobe XD 2021

Create a splash screen in Adobe XD 2021 for an Android app, set up a grid with 17-pixel margins, add guides, and center a 160 by 160 logo placeholder.

Duplicate the onboard frame to create the sign up screen. Add a blue rectangle behind the status bar and include phone, country code, and social sign-up options.

Design a signup screen in Adobe XD by adding a back icon, a mobile number input with a line, helper text, and a circular action button.

Build a sign-up verification screen by creating an artboard, entering a four-digit code, and styling the phone number. Align and group items, and use a repeat grid for spacing.

Design the home screen frame for a ride-hailing app in Adobe XD, placing map blueprint, user pickup point, moving cars, and a location pin with a search field and icons.

Design a select location screen by building a wireframe in Adobe XD, adding rectangles, shadows, lines, and text fields, and inserting location icons and map elements for swapping locations.

Design a wireframe for the choose a ride screen by adding source and destination addresses, times, car types, calculated fares, and a payment method with a confirm button.

Build the confirm ride screen wireframe for a mobile app by adjusting car details, aligning elements, and displaying cash as the current payment method.

build the confirm pickup location screen by composing a map pin with ellipse and rectangles, adjusting colors, opacity, borders, and text alignment for a ready-to-use screen.

Duplicate the onboarding frame, keep the map, add a centered 100x100 circle with a light fill, and place 'confirming your ride' in font size 16 to create a loading screen.

Connect the driver screen frame in Adobe XD 2021 by adding pickup point, address, driver image placeholder, and the text 'connecting you to a driver' with the drop off time.

Design the driver arriving screen for a real-world Uber app in Adobe XD 2021, building the layout with an arrival timer, vehicle info, rating, pickup notes, and a call button.

Build the driver messaging screen in adobe xd 2021 by assembling frames, text fields, location details, six minutes away, arrive by 4:09 p.m., and cancel and safety buttons.

Design the rider messaging frame in Adobe XD, add driver name, date and time, predefined and custom message bubbles, and a chat input with a close icon.

create the driver arrived screen by updating onboarding, changing the notification bar to 'your driver has arrived', aligning text with its box, and placing the car at the pickup point.

Design a driver rating screen in Adobe XD 2021 by adding a center heading and rating stars from a plugin, then add 80 by 80 compliments and a submit button.

Learn to build a five-frame rating submit screen in Adobe XD by duplicating elements, resizing and centering circles, and adding a plus icon via a plugin with color tweaks.

Builds a five-frame off-canvas sidebar menu for a ride-share app, featuring onboarding, a user profile with name and rating, and navigation items like trips, help, wallet, discounts, and settings.

Design the edit account screen for the real-world Uber app in Adobe XD 2021, including profile image, edit icon, separator line, and fields for name, phone, email, and password.

Design the trips screen for a real-world Uber app in Adobe XD 2021, creating a scrollable trips view with date, car model, driver rating stars, and a map.

Design a trip details screen for a real-world uber app in adobe xd 2021, including maps, pickup and drop-off addresses, driver icon, ratings, and payment options.

Build the receipt screen frame by duplicating the onboard layout, adjust the color scheme, add the trip fare breakdown, and insert the date and time to complete the receipt view.

Edit the payment screen in Adobe XD by duplicating the previous frame, replacing the back arrow with a close icon, adjusting margins, and adding a need help and done button.

Edit the star rating in the Uber app mockup by creating 16x16 star tiles, styling borders and colors, arranging four stars with a repeat grid, and adding a checkmark via a plugin to finalize.

finalize the star rating screen by duplicating the previous frame, replacing the back arrow with a close icon, and updating the next button to done; include a feedback prompt.

Build a wallet screen in adobe xd by constructing the vi frame, adding icons, currency symbols, auto renew and auto refill sections, and detailing payment methods, vouchers, and promotions.

Frame the wallet area on the payment method screen, replace text with 'credit or debit card,' add a credit card icon via plugins, and adjust color, font size, and alignment.

Build the ad card screen by adding card number, month/year, and cvv fields, a camera icon for capture, and country details with United States flag, then add a next button.

Create five-frame get discounts screen by duplicating the layout, updating titles to get discounts, get a free ride, and refer a friend, and add an invite code with a copy button.

Design a five-frame account settings screen in Adobe XD 2021 for a real world Uber app, featuring user profile, trusted contacts, payments, saved places, privacy, and two-step verification.

Copy the UI color palette from the exercise files, replace the VI frame colors with UI colors using Eyedropper, and design splash screen with a themed background and centered logo.

Design signup screen UI in adobe xd by applying a yellow header, gradient overlay for the background image, 40% opacity, and social icons (US flag, Facebook, Google) with font tweaks.

Design the sign up with mobile number screen, using regular font and the third color. Switch the sign up button to yellow and set the arrow color to black.

Design the signup verification ui by setting text to 18 regular and phone number to 16 bold, then color the text, button to yellow, and arrow to finish the screen.

Design the ride screen UI in Adobe XD by creating and styling circular elements, adjusting opacity and position behind the pin, and updating fonts, icons, and line colors.

Turn the upper rectangle yellow; set address text to 18 regular. Make the first field white at 40% opacity; second field white at 100%; pin: yellow outer, black inner.

Design the select ride screen ui by customizing colors for pinpoints, texts, icons, and buttons, applying black, white, yellow, and green to reflect app styling.

Design the confirm ride screen in Adobe XD by reusing elements from the previous screen, updating font weight to bold, replacing icons and buttons, and setting the line color.

Design confirm pickup location screen by changing colors, applying 30 percent opacity to the circle, updating font to 16 medium, and replacing button text with 'confirm pickup now'.

Design the pickup location and confirming ride screen in Adobe XD by adjusting fonts, placing icons, and layering a yellow circle behind the car to complete the ui.

Design the connect to drive screen for a real-world Uber app in Adobe XD, adjusting colors and typography and adding a driver image with the user profile plugin.

Design the driver arriving screen for a real-world Uber app in Adobe XD 2021. Adjust colors, fonts, and icons to yellow and black, and refine the arrival text and rating.

Design the driver message screen with a yellow background, black text, font tweaks, a replaced image placeholder, and a black rounded button with white text, duplicating it as safety.

Design the driver messaging screen by setting the header bar to yellow, making icons and text black, resizing and aligning the text, and applying a yellow background with black text.

Duplicate screen 12 for the driver arrived screen, set text to 'driver has arrived' in regular weight, and place the car near destination so users see the driver has arrived.

Redesign the rating screen UI by setting the upper bar and button to yellow with black text, adjusting font size, and placing rating images into the circles.

Design the rating submit screen in Adobe XD, reuse elements from the previous screen, set colors to yellow and black, and set font to 16 with yellow stars.

Design the side menu UI for the real world Uber app in Adobe XD, applying yellow to the header and using 18 regular font for text.

Edit the account screen by changing background to yellow, text and back arrow to black, replacing the placeholder with a yellow user image, and adding a flag from screen two.

Design the choose a trip screen ui by updating colors: header yellow, text and back arrow black; rating stars yellow; map circles yellow with black inner circles on all maps.

Design the trip details UI in Adobe XD 2021 by adjusting colors (yellow, black, white), adding a driver image, aligning elements, refining shadows, and setting text weights for clarity.

Design the receipt screen ui by duplicating the previous screen portion and updating colors: headings and underline yellow, help white, bar black, money column third color.

Design the added payment screen UI by styling colors and buttons: set background to yellow, text to black, apply medium font weight, and use black and white button text.

Design the star rating screen user interface by applying color and font adjustments: yellow background, black text, medium and regular weights, yellow checkboxes, and a black-on-yellow button.

design the edit star rating screen by applying color and typography changes—yellow header, black text, medium font weight, and yellow button with black text—following the previous module workflow.

Design the wallet screen by applying color and typography changes. Implement yellow upper portion, black text, yellow move rectangle with black text, green icons, and headings in the third color.

Design the add payment method screen UI in Adobe XD by setting the background to yellow, text color to black, and applying a 14 medium font with third palette color.

Design the ad card screen by setting the upper background to yellow and the text to black, then replace the placeholder flag with the actual flag.

Design the debt discount screen UI for the Uber app in Adobe XD, applying yellow and black, medium title and price weights, and a yellow discount button with black text.

Design the account settings screen in Adobe XD with a yellow background, black text, and a user image; adjust font, add rectangles, and prepare prototype linking.

Link screens across artboards in the prototype view to define interactions, triggers, and animations, creating a realistic app flow, then share designs with team members and stakeholders.