English | MP4 | AVC 1920×1080 | AAC 44KHz 2ch | 84 Lessons (11h 18m) | 2.23 GB
In this project-based course you’ll delve into the realm of advanced Figma features to craft a responsive website for a fictional, AirBnB-like rental service company called “Flexrent”.
This isn’t just any Figma practice project. The project takes you on a journey from initial client brief to a captivating website design, encompassing the entire design process from concept, to execution, to handoff!
WHAT YOU’LL LEARN
- Explore advanced Figma features to design a responsive website, enhancing your UI/UX design skills.
- Experience the complete design process from a client brief to a final digital product, understanding the journey from concept to execution.
- Gain practical experience in designing essential and intricate components, such as buttons and feature-rich cards, for web interfaces.
- Learn to create layouts that are responsive and adaptable across different screen sizes and devices, ensuring a seamless user experience.
- Develop a comprehensive understanding of the design handoff process, preparing you for collaboration with development teams.
- Complete a portfolio-worthy project for a fictional rental service company, showcasing your ability to turn creative ideas into captivating digital experiences.
Table of Contents
1 Project Demo
2 The Brief
3 What We’re Building In This Section
4 Competitor UI-UX Audit
5 User Flows
6 Sitemaps
7 Assignment – Create Your Own Userflows and Sitemaps
8 Wireframes – Assets Overview
9 Wireframes – Home
10 Wireframes – Booking
11 Assignment – Create Your Wireframes
12 Typography
13 What We’re Building In This Section
14 Colors – Primary and Neutrals
15 Colors – Accents
16 Elevations
17 Icons
18 Assignment – Set the Foundation
19 What We’re Building In This Section
20 Badges – Avatars
21 Badges – Review Badges
22 Badges – Simple Location Badge
23 Buttons – Interactive Basic Buttons
24 Buttons – Interactive Icon Buttons
25 Buttons – Interactive Profile Menu
26 Buttons – Interactive Toggles
27 Buttons – Interactive Like Icon
28 Assignment – Create Your Basic Components
29 Data Detail
30 Navigation – Main Navigation Desktop
31 Navigation – Main Navigation Mobile
32 Navigation – Footer Desktop
33 Navigation – Footer Mobile
34 Navigation – Tabs
35 Cards – Image Cards
36 Cards – Image and Button Card
37 Cards – Stacked Search Results Card
38 Cards – Horizontal Search Results Card
39 Cards – Booking Card Desktop
40 Cards – Booking Card Mobile
41 Forms – Messages
42 Forms – Inputs
43 Forms – All Purpose Inputs
44 Forms – Checkboxes
45 Forms – Radio Buttons
46 Action Panels – General Action Panel
47 Action Panels – Callout Panel
48 Action Panels – Search Panel Desktop
49 Action Panels – Search Panel Mobile
50 Action Panels – Reserve Panel
51 Popovers – Desktop Filters
52 Popovers – Mobile Filters
53 Popovers – List Menu
54 Popovers – Guests Menu
55 Reviews – Rating Scale
56 Reviews – Collapsible Card
57 Assignment – Create Your Advanced Components
58 What We’re Building In This Section
59 Homepage – Hero Section
60 Homepage – Locations Section
61 Homepage – Attractions and Rentals Section
62 Homepage – Action Panels and Footer Section
63 Search – Filters and Results
64 Search – Map and Alternate Views
65 Listing – Page Setup
66 Listing – Amenities and Reviews
67 Listing – Policies
68 Listing – Layout and Responsiveness
69 Booking – Booking Creation
70 Booking – Booking Creation Alternate Layout
71 Booking – Confirmation
72 Booking – Confirmation Alternate Layout
73 Assignment – Create High Fidelity Designs
74 Prototyping – Search Interaction
75 Prototyping – Search Results Sticky Header
76 Prototyping – Search Results Filtering
77 Prototyping – Listing Scroll Behaviour
78 Prototyping – Booking Flow
79 Assignment – Create High Fidelity Prototypes
80 The Handoff Doc
81 What We’re Building In This Section
82 Component and Screen Documentation
83 Showcasing Designs
84 Showcasing Prototypes
Resolve the captcha to access the links!