Wireframe Basics
Figma Introduction
Design first wireframe for Gmail app
Design second wireframe for YouTube Studio app
Design third wireframe for Instagram
Design fourth wireframe for Linkedin
Design Wireframes for Food Delivery App
Intro to design wireframe for food delivery app
Design home page wireframe for food delivery app
Design search page wireframe for food delivery app
Design single food page for food delivery app
Build cart page for food delivery app
Build order confirm popup for food delivery app
Design add to cart popup for food delivery app
Do final touch up to wireframe before convert to prototype
Create prototype of food delivery app
Create prototype of food delivery app – Part 01
Create prototype of food delivery app – Part 02
Test food delivery app prototype
First Assignment
Assignment details
UX Visual Design – Select Colors
Introduction to UX Visual Design
Selecting Colors Using Color Psychology
Selecting a Primary Color
The 60-30-10 Rule
Creating the Color Palette
Color Accessibility Check
Bonus Lecture – Easy Ways to Select Colors
UX Visual Design – Typography
Fundamentals of Typography
Message and Emotion in Typography
How to Use the Google Fonts Website
Selecting Fonts for a New Food Delivery App
UX Visual Design – Iconography
Iconography
UX Design Basics
Design System
UX Principles and Laws
Information Architecture (IA)
UI Design with Figma
Creating a Figma Account
Grid Layout
Auto Layout Basics
Brand Logo
Designing a Brand Logo
Hi-Fi Mockups with Figma
Sticker Sheet
Hi-Fi Mockups Introduction
Designing the Header
Improving the Header
All About Components
Hi-Fi Mockups Design – Homepage
Designing the Search Box
Designing the Category Section
Adding Content to Categories
Designing Popular Foods Section
Making Changes to Food Item Component
Adding Content for Food Items
Designing Recommended Foods Section
Hi-Fi Mockups Design – Search Page
Designing Search Page
Designing Search Results Section
Pro Tip to Improve UI Design Skills
Hi-Fi Mockups Design – Single Food Page
Designing Single Food Page
Designing Dollar Amount Preview and Star Rating
Creating Count Controller and Adding to Cart Button
Adding Description Section
Creating Reviews Section
Hi-Fi Mockups Design – Cart Page
Designing Cart Page
Changing My Cart Design
Designing Cart Items Summary Section
Adding Content to the My Cart Section
Designing Cart Page – Part 05
Designing Cart Page – Part 06
Fixing UI/UX Issues and design footer menu
Fixing UI/UX Issues in the Design
Designing Footer Menu
HI-FI Prototype
Prototype Introduction
How to Use the Prototype Tab to Make Design Interactive
Prototyping – Part 2
Making Carousel Scroll
Adding Footer Menu to Frames
Adding Connection to Popup
Adding Horizontal Scrolling to Review Section
Making the Search Box Interactive
Using Variables to Remove Cart Items
Second Assignment
Assignment and Thank you!
enrol now
enroll now