Intro And Course Structure
UX Design Basics
Design Briefs
Project Proposals
-
SECTION 3 - Project Proposals (0:56)
-
What is a project proposal (2:00)
-
When should you send it (2:41)
-
Creating a project proposal in Adobe Xd (6:02)
-
Proposal cover (4:29)
-
Project details (8:32)
-
Project pricing (9:10)
-
Terms and conditions (9:15)
-
About You (7:15)
-
Project Proposal in Figma (8:26)
-
Project Proposal Resources
-
SECTION 3 ASSIGNMENT (0:27)
User Research and Personas
-
SECTION 4 - User Research and Personas (0:40)
-
What is a User Persona (2:57)
-
Types of research methods (2:45)
-
Quantitative VS Qualitative (5:17)
-
Choosing your participants (5:35)
-
Visualising your data (2:43)
-
Creating Your User Persona (9:41)
-
User Persona in Figma (6:28)
-
User Research and Personas Resources
-
SECTION 4 ASSIGNMENT (0:39)
Competitive Analysis
User Flows
Paper Wireframes
-
SECTION 7 - Paper Wireframes (0:53)
-
What are paper wireframes (1:30)
-
Which elements to include (3:44)
-
Wireframe styles (7:32)
-
Equipment you need (6:56)
-
Drawing on plain paper (14:49)
-
Drawing on dot grid paper (13:45)
-
Using printable templates (6:29)
-
Sharing your wireframes (2:16)
-
Paper Wireframes Resources
-
SECTION 7 ASSIGNMENT (0:41)
Layout and Grids
-
SECTION 8 - Layout and Grids (0:29)
-
What is a layout (1:29)
-
What is a grid system and why it's important (1:57)
-
How to set up grids in Adobe Xd (5:14)
-
Working with Bootstrap (18:03)
-
Working with 8px grid system (5:23)
-
Horizontal rhythm in Adobe Xd (8:21)
-
Layout and Grids Resources
-
SECTION 8 ASSIGNMENT (0:44)
Typography and Font Pairing
Iconography
Color Selection
Images
Mood Boards
UI Kits
-
SECTION 14 - UI Kits (0:20)
-
What are UI Kits and why are they useful (2:39)
-
Types of UI Kits (7:13)
-
Which components are important (6:23)
-
UI Kit structure in Adobe Xd (7:57)
-
UI Kit creation in Adobe Xd (14:35)
-
UI Kit VS Design Systems (3:43)
-
Premium VS Free UI Kits (3:19)
-
Creating and selling your UI Kit (12:05)
-
UI Kits Resources
-
SECTION 14 ASSIGNMENT (0:35)
Design Systems
Website Design in Adobe Xd and Figma
-
SECTION 16 - Website Design in Adobe Xd (0:43)
-
Design Brief (16:27)
-
Project Proposal (10:26)
-
User Persona (6:07)
-
Competitive Analysis (15:04)
-
User Flows (16:56)
-
Sitemap - Content Architecture (15:58)
-
Paper Wireframes (27:54)
-
Project Images (11:49)
-
Mood Board Creation (9:51)
-
Grid, Typography and Colors (15:50)
-
Home Page Design (18:52)
-
Home Page Design Part 2 (19:17)
-
Home Page Design Part 3 (13:14)
-
Home Page Design Part 4 (11:39)
-
Cars Page Design (11:55)
-
Car Details Page (17:17)
-
Car Details Page Part 2 (19:07)
-
Lightbox Design (6:17)
-
Loans Page (13:02)
-
Contact Us Page (3:14)
-
Animating The Design (6:53)
-
Exporting The Assets (9:33)
-
Designing For Responsive (9:15)
-
Future Of Adobe Xd (5:36)
-
Website Design Project Files
-
Website Design In Figma Introduction (3:28)
-
Mood Board And Sitemap (16:45)
-
User Flow (16:12)
-
Creating Style Guide (14:20)
-
Creating Style Guide 2 (20:07)
-
Design Page Setup (7:56)
-
Home Page Design Part 1 (30:50)
-
Home Page Design Part 2 (16:33)
-
Cars Page Design (12:18)
-
Selected Car Page Design (23:06)
-
Loans, Contact Us and Lighbox Pages Design (14:24)
-
Creating Prototypes in Figma (4:58)
-
Export Assets From Figma (5:44)
-
Figma To Webflow Plugin (9:33)
-
SECTION 16 ASSIGNMENT (1:03)
Webflow Build
-
SECTION 17 - Webflow Build (0:31)
-
Introduction To Webflow
-
Setting Up The Project (20:47)
-
Creating Style Guide (19:48)
-
Navbar Build (16:34)
-
Home Hero Section (15:18)
-
Who We Are Section (9:07)
-
Car Selection Section (16:07)
-
Offer Section (11:06)
-
Benefits Section (10:35)
-
Contact Form (17:31)
-
Map Section (16:26)
-
Footer Section (15:47)
-
Creating CMS Collection (19:08)
-
Using CMS Collection (10:57)
-
Cars Page Build (12:41)
-
Cars Template Build (16:14)
-
Cars Template Build Part 2 (15:10)
-
Cars Template Build Part 3 (15:29)
-
Cars Template Build Part 4 (27:01)
-
Linking Car Cards (6:49)
-
Loans Page (15:42)
-
Contact Us Page (1:54)
-
Adding Links (14:42)
-
Responsive - Tablet (31:27)
-
Responsive - Mobile Landscape (10:41)
-
Responsive - Mobile Portrait (16:08)
-
Animations in Webflow (26:52)
-
Publish And Code Export (5:56)
-
SEO Optimization (12:04)
-
SECTION 17 ASSIGNMENT (1:09)
Case Studies
Finding A Job
Course Conclusion And Next Steps
