Autoplay
Autocomplete
Previous Lesson
Complete and Continue
Design a Responsive Airbnb Website with Figma
Introduction
Project Demo (2:52)
Project FAQ
Project Resources
Exercise: Meet Your Classmates and Instructor
Set Your Learning Streak Goal
Let's Get Started!
The Brief (8:44)
Research and Approach
What We're Building In This Section (2:21)
Competitor UI/UX Audit (8:16)
User Flows (5:40)
Sitemaps (11:57)
Assignment - Create Your Own Userflows and Sitemaps (1:14)
Wireframes - Assets Overview (3:20)
Wireframes - Home (9:44)
Wireframes - Booking (12:36)
Assignment - Create Your Wireframes (1:22)
Visual Design and Foundation
Typography (13:12)
What We're Building In This Section (1:21)
Colors - Primary and Neutrals (7:18)
Colors - Accents (5:49)
Elevations (6:08)
Icons (1:59)
Assignment - Set the Foundation (1:32)
Responsive Reusability
What We're Building In This Section (3:16)
Badges - Avatars (8:10)
Badges - Review Badges (11:00)
Badges - Simple Location Badge (3:42)
Buttons - Interactive Basic Buttons (15:48)
Buttons - Interactive Icon Buttons (7:02)
Buttons - Interactive Profile Menu (7:46)
Buttons - Interactive Toggles (10:43)
Buttons - Interactive Like Icon (9:45)
Data Detail (10:32)
Assignment - Create Your Basic Components (1:37)
Navigation - Main Navigation Desktop (13:29)
Navigation - Main Navigation Mobile (9:21)
Navigation - Footer Desktop (11:42)
Navigation - Footer Mobile (3:28)
Navigation - Tabs (9:16)
Cards - Image Cards (12:18)
Cards - Image and Button Card (7:23)
Cards - Stacked Search Results Card (14:03)
Cards - Horizontal Search Results Card (8:35)
Cards - Booking Card Desktop (8:48)
Cards - Booking Card Mobile (7:23)
Forms - Messages (4:53)
Forms - Inputs (8:59)
Forms - All Purpose Inputs (14:08)
Forms - Checkboxes (9:37)
Forms - Radio Buttons (8:53)
Action Panels - General Action Panel (8:21)
Action Panels - Callout Panel (4:50)
Action Panels - Search Panel Desktop (7:27)
Action Panels - Search Panel Mobile (9:47)
Action Panels - Reserve Panel (9:06)
Popovers - Desktop Filters (10:34)
Popovers - Mobile Filters (4:58)
Popovers - List Menu (7:38)
Popovers - Guests Menu (8:15)
Reviews - Rating Scale (9:15)
Reviews - Collapsible Card (9:44)
Assignment - Create Your Advanced Components (2:30)
High Fidelity Designs and Prototypes
What We're Building In This Section (2:45)
Homepage - Hero Section (11:15)
Homepage - Locations Section (13:43)
Homepage - Attractions and Rentals Section (9:56)
Homepage - Action Panels and Footer Section (11:40)
Search - Filters and Results (14:20)
Search - Map and Alternate Views (10:35)
Listing - Page Setup (9:19)
Listing - Amenities and Reviews (12:40)
Listing - Policies (9:31)
Listing - Layout and Responsiveness (12:36)
Booking - Booking Creation (19:30)
Booking - Booking Creation Alternate Layout (5:30)
Booking - Confirmation (8:15)
Booking - Confirmation Alternate Layout (4:28)
Assignment - Create High Fidelity Designs (2:09)
Prototyping - Search Interaction (11:51)
Prototyping - Search Results Sticky Header (7:04)
Prototyping - Search Results Filtering (9:06)
Prototyping - Listing Scroll Behaviour (6:08)
Prototyping - Booking Flow (13:00)
Assignment - Create High Fidelity Prototypes (2:28)
Handoff and Portfolio
The Handoff Doc (6:51)
What We're Building In This Section (1:57)
Component and Screen Documentation (8:50)
Showcasing Designs (4:18)
Showcasing Prototypes (7:24)
Where To Go From Here?
Review This Project!
Assignment - Create Your Advanced Components
This lecture is available exclusively for ZTM Academy members.
If you're already a member,
you'll need to login
.
Join ZTM To Unlock All Lectures