Please ensure Javascript is enabled for purposes of website accessibility
UX/UI Design Mastery - From Theory To Live Website In Adobe Xd And Webflow

Learn the basics of UX/UI design, from theory to live website using Adobe Xd, Figma and Webflow. Read more.

No ratings yet
Course Skill Level
Beginner
Time Estimate
28h 17m

My mission is to improve the lives of others and to pass on my knowledge back to the community and to all those who want to learn about design.

Access all courses in our library for only $9/month with All Access Pass

Get Started with All Access PassBuy Only This Course

About This Course

Who this course is for:

  • Beginners who are just starting out with UX/UI design
  • Mid level designers who didn’t learn the fundamentals and want to perfect their craft
  • Designers interested in getting started with Webflow
  • Experienced designers who don’t have a defined system of work
  • Graphic designers looking into changing careers
  • Anybody interested in learning UX/UI design, Adobe Xd and Webflow

What you’ll learn: 

  • Understand UX Design and its importance
  • Define goals and personas for your project
  • Ask the right questions to define the niche and objectives
  • Craft user flows to define right paths
  • Wireframe rough ideas and concepts
  • Design and prototype great user experiences
  • Develop and publish websites without code using Webflow
  • How to develop, prepare and target your portfolio
  • Where to find UI/UX and Webflow jobs

Requirements: 

  • No previous UX/UI experience required, you will learn everything you need to know in this class
  • Basic understanding of Adobe Xd required
  • No previous Webflow knowledge required, we will cover everything you need to know in this course.
  • Any pen and paper you have for paper wireframes.
  • Ability to open ZIP files. Project files are stored in ZIP files so make sure you can open them on your computer.

Most designers, when they learn, just skip the fundamentals and move straight to their favorite software and start designing. And then they realize that something is wrong with their design, but because they skipped the theory, they don’t know what the issue is and how to fix it.

That is the reason I asked over 60,000 of my students and turned the answers I got into the biggest online UI/UX design course ever created.

Over two years of work went into making this course and over 15 years of learning and working with clients. There is over 28 hours of video content inside, plus templates and practice files are included as well so you can kickstart your career and your learning process much faster.

By the end of this course, you will make better design decisions, know which problems to solve, who you are designing for and why as well as how to structure and organize your files for faster work and delivery. 

Finally, you will gain new valuable skills that employers are looking for in a UI/UX designer, so you will be able to find a better job more easily.

I look forward to seeing you in class!

Our Promise to You

By the end of this course, you will have learned UI/UX design.

10 Day Money Back Guarantee. If you are unsatisfied for any reason, simply contact us and we’ll give you a full refund. No questions asked.

Get started today!

Course Curriculum

Section 1 - Intro And Course Structure
Course Intro 00:00:00
Course Structure And Project Files 00:00:00
Downloadable Course Resources 00:00:00
Figma Course Updates 00:00:00
Section 2 - UX Design Basics
UX Design Basics 00:00:00
What Is UX Design 00:00:00
What Does UX Designer Do 00:00:00
Is UX The Same As UI 00:00:00
Skills UX Designer Needs 00:00:00
In House Vs Freelance UX Designer 00:00:00
Tools For UX Designers 00:00:00
Assignment 00:00:00
Section 3 - Design Briefs
Design Briefs 00:00:00
What Is A Design Brief 00:00:00
Creating A Design Brief In Adobe Xd 00:00:00
Design Brief In Figma 00:00:00
Assignment 00:00:00
Section 4 - Project Proposals
Project Proposals 00:00:00
What Is A Project Proposal 00:00:00
When Should You Send It 00:00:00
Creating A Project Proposal In Adobe Xd 00:00:00
Proposal Cover 00:00:00
Project Details 00:00:00
Project Pricing 00:00:00
Terms And Conditions 00:00:00
About You 00:00:00
Project Proposal In Figma 00:00:00
Assignment 00:00:00
Section 5 - User Research And Personas
User Research And Personas 00:00:00
What Is A User Persona 00:00:00
Types Of Research Methods 00:00:00
Quantitative Vs Qualitative 00:00:00
Choosing Your Participants 00:00:00
Visualising Your Data 00:00:00
Creating Your User Persona 00:00:00
User Persona In Figma 00:00:00
Assignment 00:00:00
Section 6 - Competitive Analysis
Competitive Analysis 00:00:00
What Is A Competitive Analysis 00:00:00
Types Of Competitive Analysis 00:00:00
How To Do A Complete Analysis 00:00:00
How To Do A Feature Analysis 00:00:00
Which Tools To Use 00:00:00
Things To Look Out For 00:00:00
Assignment 00:00:00
Section 7 - User Flows
User Flows 00:00:00
What Are User Flows 00:00:00
Different User Flow Types 00:00:00
When Are They Used 00:00:00
Creating User Flows In Adobe Xd 00:00:00
Working With Flowcharts In Adobe Xd 00:00:00
Sharing Your Flows 00:00:00
Assignment 00:00:00
Section 8 - Paper Wireframes
Paper Wireframes 00:00:00
What Are Paper Wireframes 00:00:00
Which Elements To Include 00:00:00
Wireframe Styles 00:00:00
Equipment You Need 00:00:00
Drawing On Plain Paper 00:00:00
Drawing On Dot Grid Paper 00:00:00
Using Printable Templates 00:00:00
Sharing Your Wireframes 00:00:00
Assignment 00:00:00
Section 9 - Layout And Grids
Layout And Grids 00:00:00
What Is A Layout 00:00:00
What Is A Grid System And Why It’s Important 00:00:00
How To Set Up Grids In Adobe Xd 00:00:00
Working With Bootstrap 00:00:00
Working With 8Px Grid System 00:00:00
Horizontal Rhythm In Adobe Xd 00:00:00
Assignment 00:00:00
Section 10 - Typography And Font Pairing
Typography And Font Pairing 00:00:00
Typefaces Vs Fonts 00:00:00
Font Types 00:00:00
Font Weights And How To Use Them( 00:00:00
Choosing Fonts 00:00:00
Font Pairing 00:00:00
Font Scale 00:00:00
Assignment 00:00:00
Section 11 - Iconography
Iconography 00:00:00
What Are Icons 00:00:00
Different Types Of Icons 00:00:00
Icon Libraries, Packs And File Formats 00:00:00
Free Vs Premium Icons 00:00:00
Tips For Best Results 00:00:00
Assignment 00:00:00
Section 12 - Color Selection
Color Selection 00:00:00
Why Color Is Important 00:00:00
Which Colors Exist 00:00:00
Color Combinations 00:00:00
Color Selection Tools 00:00:00
Style Guides For Developers 00:00:00
Assignment 00:00:00
Section 13 - Images
Images 00:00:00
Why Are Images Important 00:00:00
3 Types Of Project Images 00:00:00
How To Choose Niche Images 00:00:00
Free Vs Premium 00:00:00
Image Optimization 00:00:00
Naming Structure 00:00:00
Assignment 00:00:00
Section 14 - Mood Boards
Mood Boards 00:00:00
What Are Mood Boards And Why Use Them 00:00:00
Which Elements To Consider 00:00:00
How To Do Your Research 00:00:00
Create Mood Board In Adobe Xd 00:00:00
Share Or Export Your Mood Board 00:00:00
Assignment 00:00:00
Section 15 - UI Kits
UI Kits 00:00:00
What Are UI Kits And Why Are They Useful 00:00:00
Types Of UI Kits 00:00:00
Which Components Are Important 00:00:00
UI Kit Structure In Adobe Xd 00:00:00
UI Kit Creation In Adobe Xd 00:00:00
UI Kit Vs Design Systems 00:00:00
Premium Vs Free UI Kits 00:00:00
Creating And Selling Your UI Kit 00:00:00
Assignment 00:00:00
Section 16 - Design Systems
Design Systems 00:00:00
What Is A Design System 00:00:00
Structure Of A Design System 00:00:00
Design System Examples 00:00:00
Creating A Design System In Adobe Xd 00:00:00
Design Tokens 00:00:00
Scaling Your Design System 00:00:00
Assignment 00:00:00
Section 17 - Website Design In Adobe Xd And Figma
Website Design In Adobe Xd 00:00:00
Design Brief 00:00:00
Project Proposal 00:00:00
User Persona 00:00:00
Competitive Analysis 00:00:00
User Flows 00:00:00
Sitemap – Content Architecture 00:00:00
Paper Wireframes 00:00:00
Project Images 00:00:00
Mood Board Creation 00:00:00
Grid, Typography And Colors 00:00:00
Home Page Design 00:00:00
Home Page Design Part 2 00:00:00
Home Page Design Part 3 00:00:00
Home Page Design Part 4 00:00:00
Cars Page Design 00:00:00
Car Details Page 00:00:00
Car Details Page Part 2 00:00:00
Lightbox Design 00:00:00
Loans Page 00:00:00
Contact Us Page 00:00:00
Animating The Design 00:00:00
Exporting The Assets 00:00:00
Designing For Responsive 00:00:00
Future Of Adobe Xd 00:00:00
Website Design In Figma Introduction 00:00:00
Mood Board And Sitemap 00:00:00
User Flow 00:00:00
Creating Style Guide 00:00:00
Creating Style Guide 2 00:00:00
Design Page Setup 00:00:00
Home Page Design Part 1 00:00:00
Home Page Design Part 2 00:00:00
Cars Page Design 00:00:00
Selected Car Page Design 00:00:00
Loans, Contact Us And Lightbox Pages Design 00:00:00
Creating Prototypes In Figma 00:00:00
Export Assets From Figma 00:00:00
Figma To Webflow Plugin 00:00:00
Assignment 00:00:00
Section 18 - Webflow Build
Webflow Build 00:00:00
Introduction To Webflowstart 00:00:00
Setting Up The Project 00:00:00
Creating Style Guide 00:00:00
Navbar Build 00:00:00
Home Hero Section 00:00:00
Who We Are Section 00:00:00
Car Selection Section 00:00:00
Offer Section 00:00:00
Benefits Section 00:00:00
Contact Form 00:00:00
Map Section 00:00:00
Footer Section 00:00:00
Creating CMS Collection 00:00:00
Using CMS Collection 00:00:00
Cars Page Build 00:00:00
Cars Template Build 00:00:00
Cars Template Build Part 2 00:00:00
Cars Template Build Part 3 00:00:00
Cars Template Build Part 4 00:00:00
Linking Car Cards 00:00:00
Loans Page 00:00:00
Contact Us Page 00:00:00
Adding Links 00:00:00
Responsive – Tablet 00:00:00
Responsive – Mobile Landscape 00:00:00
Responsive – Mobile Portrait 00:00:00
Animations In Webflow 00:00:00
Publish And Code Export 00:00:00
SEO Optimization 00:00:00
Assignment 00:00:00
Section 19 - Case Studies
Case Studies 00:00:00
What Is A Case Study 00:00:00
Elements To Include 00:00:00
Creating Case Study Structure 00:00:00
Awesome Case Study Examples 00:00:00
Content Writing 00:00:00
Presentation Tips 00:00:00
Assignment 00:00:00
Section 20 - Finding A Job
Finding A Job 00:00:00
Freelance Vs Agency 00:00:00
Design Contests 00:00:00
Gig Platforms 00:00:00
Digital Nomads 00:00:00
Design Platforms 00:00:00
Webflow Jobs 00:00:00
Portfolio Tips 00:00:00
Section 21 - Course Conclusion And Next Steps
Course Conclusion And Next Steps 00:00:00

About This Course

Who this course is for:

  • Beginners who are just starting out with UX/UI design
  • Mid level designers who didn’t learn the fundamentals and want to perfect their craft
  • Designers interested in getting started with Webflow
  • Experienced designers who don’t have a defined system of work
  • Graphic designers looking into changing careers
  • Anybody interested in learning UX/UI design, Adobe Xd and Webflow

What you’ll learn: 

  • Understand UX Design and its importance
  • Define goals and personas for your project
  • Ask the right questions to define the niche and objectives
  • Craft user flows to define right paths
  • Wireframe rough ideas and concepts
  • Design and prototype great user experiences
  • Develop and publish websites without code using Webflow
  • How to develop, prepare and target your portfolio
  • Where to find UI/UX and Webflow jobs

Requirements: 

  • No previous UX/UI experience required, you will learn everything you need to know in this class
  • Basic understanding of Adobe Xd required
  • No previous Webflow knowledge required, we will cover everything you need to know in this course.
  • Any pen and paper you have for paper wireframes.
  • Ability to open ZIP files. Project files are stored in ZIP files so make sure you can open them on your computer.

Most designers, when they learn, just skip the fundamentals and move straight to their favorite software and start designing. And then they realize that something is wrong with their design, but because they skipped the theory, they don’t know what the issue is and how to fix it.

That is the reason I asked over 60,000 of my students and turned the answers I got into the biggest online UI/UX design course ever created.

Over two years of work went into making this course and over 15 years of learning and working with clients. There is over 28 hours of video content inside, plus templates and practice files are included as well so you can kickstart your career and your learning process much faster.

By the end of this course, you will make better design decisions, know which problems to solve, who you are designing for and why as well as how to structure and organize your files for faster work and delivery. 

Finally, you will gain new valuable skills that employers are looking for in a UI/UX designer, so you will be able to find a better job more easily.

I look forward to seeing you in class!

Our Promise to You

By the end of this course, you will have learned UI/UX design.

10 Day Money Back Guarantee. If you are unsatisfied for any reason, simply contact us and we’ll give you a full refund. No questions asked.

Get started today!

Course Curriculum

Section 1 - Intro And Course Structure
Course Intro 00:00:00
Course Structure And Project Files 00:00:00
Downloadable Course Resources 00:00:00
Figma Course Updates 00:00:00
Section 2 - UX Design Basics
UX Design Basics 00:00:00
What Is UX Design 00:00:00
What Does UX Designer Do 00:00:00
Is UX The Same As UI 00:00:00
Skills UX Designer Needs 00:00:00
In House Vs Freelance UX Designer 00:00:00
Tools For UX Designers 00:00:00
Assignment 00:00:00
Section 3 - Design Briefs
Design Briefs 00:00:00
What Is A Design Brief 00:00:00
Creating A Design Brief In Adobe Xd 00:00:00
Design Brief In Figma 00:00:00
Assignment 00:00:00
Section 4 - Project Proposals
Project Proposals 00:00:00
What Is A Project Proposal 00:00:00
When Should You Send It 00:00:00
Creating A Project Proposal In Adobe Xd 00:00:00
Proposal Cover 00:00:00
Project Details 00:00:00
Project Pricing 00:00:00
Terms And Conditions 00:00:00
About You 00:00:00
Project Proposal In Figma 00:00:00
Assignment 00:00:00
Section 5 - User Research And Personas
User Research And Personas 00:00:00
What Is A User Persona 00:00:00
Types Of Research Methods 00:00:00
Quantitative Vs Qualitative 00:00:00
Choosing Your Participants 00:00:00
Visualising Your Data 00:00:00
Creating Your User Persona 00:00:00
User Persona In Figma 00:00:00
Assignment 00:00:00
Section 6 - Competitive Analysis
Competitive Analysis 00:00:00
What Is A Competitive Analysis 00:00:00
Types Of Competitive Analysis 00:00:00
How To Do A Complete Analysis 00:00:00
How To Do A Feature Analysis 00:00:00
Which Tools To Use 00:00:00
Things To Look Out For 00:00:00
Assignment 00:00:00
Section 7 - User Flows
User Flows 00:00:00
What Are User Flows 00:00:00
Different User Flow Types 00:00:00
When Are They Used 00:00:00
Creating User Flows In Adobe Xd 00:00:00
Working With Flowcharts In Adobe Xd 00:00:00
Sharing Your Flows 00:00:00
Assignment 00:00:00
Section 8 - Paper Wireframes
Paper Wireframes 00:00:00
What Are Paper Wireframes 00:00:00
Which Elements To Include 00:00:00
Wireframe Styles 00:00:00
Equipment You Need 00:00:00
Drawing On Plain Paper 00:00:00
Drawing On Dot Grid Paper 00:00:00
Using Printable Templates 00:00:00
Sharing Your Wireframes 00:00:00
Assignment 00:00:00
Section 9 - Layout And Grids
Layout And Grids 00:00:00
What Is A Layout 00:00:00
What Is A Grid System And Why It’s Important 00:00:00
How To Set Up Grids In Adobe Xd 00:00:00
Working With Bootstrap 00:00:00
Working With 8Px Grid System 00:00:00
Horizontal Rhythm In Adobe Xd 00:00:00
Assignment 00:00:00
Section 10 - Typography And Font Pairing
Typography And Font Pairing 00:00:00
Typefaces Vs Fonts 00:00:00
Font Types 00:00:00
Font Weights And How To Use Them( 00:00:00
Choosing Fonts 00:00:00
Font Pairing 00:00:00
Font Scale 00:00:00
Assignment 00:00:00
Section 11 - Iconography
Iconography 00:00:00
What Are Icons 00:00:00
Different Types Of Icons 00:00:00
Icon Libraries, Packs And File Formats 00:00:00
Free Vs Premium Icons 00:00:00
Tips For Best Results 00:00:00
Assignment 00:00:00
Section 12 - Color Selection
Color Selection 00:00:00
Why Color Is Important 00:00:00
Which Colors Exist 00:00:00
Color Combinations 00:00:00
Color Selection Tools 00:00:00
Style Guides For Developers 00:00:00
Assignment 00:00:00
Section 13 - Images
Images 00:00:00
Why Are Images Important 00:00:00
3 Types Of Project Images 00:00:00
How To Choose Niche Images 00:00:00
Free Vs Premium 00:00:00
Image Optimization 00:00:00
Naming Structure 00:00:00
Assignment 00:00:00
Section 14 - Mood Boards
Mood Boards 00:00:00
What Are Mood Boards And Why Use Them 00:00:00
Which Elements To Consider 00:00:00
How To Do Your Research 00:00:00
Create Mood Board In Adobe Xd 00:00:00
Share Or Export Your Mood Board 00:00:00
Assignment 00:00:00
Section 15 - UI Kits
UI Kits 00:00:00
What Are UI Kits And Why Are They Useful 00:00:00
Types Of UI Kits 00:00:00
Which Components Are Important 00:00:00
UI Kit Structure In Adobe Xd 00:00:00
UI Kit Creation In Adobe Xd 00:00:00
UI Kit Vs Design Systems 00:00:00
Premium Vs Free UI Kits 00:00:00
Creating And Selling Your UI Kit 00:00:00
Assignment 00:00:00
Section 16 - Design Systems
Design Systems 00:00:00
What Is A Design System 00:00:00
Structure Of A Design System 00:00:00
Design System Examples 00:00:00
Creating A Design System In Adobe Xd 00:00:00
Design Tokens 00:00:00
Scaling Your Design System 00:00:00
Assignment 00:00:00
Section 17 - Website Design In Adobe Xd And Figma
Website Design In Adobe Xd 00:00:00
Design Brief 00:00:00
Project Proposal 00:00:00
User Persona 00:00:00
Competitive Analysis 00:00:00
User Flows 00:00:00
Sitemap – Content Architecture 00:00:00
Paper Wireframes 00:00:00
Project Images 00:00:00
Mood Board Creation 00:00:00
Grid, Typography And Colors 00:00:00
Home Page Design 00:00:00
Home Page Design Part 2 00:00:00
Home Page Design Part 3 00:00:00
Home Page Design Part 4 00:00:00
Cars Page Design 00:00:00
Car Details Page 00:00:00
Car Details Page Part 2 00:00:00
Lightbox Design 00:00:00
Loans Page 00:00:00
Contact Us Page 00:00:00
Animating The Design 00:00:00
Exporting The Assets 00:00:00
Designing For Responsive 00:00:00
Future Of Adobe Xd 00:00:00
Website Design In Figma Introduction 00:00:00
Mood Board And Sitemap 00:00:00
User Flow 00:00:00
Creating Style Guide 00:00:00
Creating Style Guide 2 00:00:00
Design Page Setup 00:00:00
Home Page Design Part 1 00:00:00
Home Page Design Part 2 00:00:00
Cars Page Design 00:00:00
Selected Car Page Design 00:00:00
Loans, Contact Us And Lightbox Pages Design 00:00:00
Creating Prototypes In Figma 00:00:00
Export Assets From Figma 00:00:00
Figma To Webflow Plugin 00:00:00
Assignment 00:00:00
Section 18 - Webflow Build
Webflow Build 00:00:00
Introduction To Webflowstart 00:00:00
Setting Up The Project 00:00:00
Creating Style Guide 00:00:00
Navbar Build 00:00:00
Home Hero Section 00:00:00
Who We Are Section 00:00:00
Car Selection Section 00:00:00
Offer Section 00:00:00
Benefits Section 00:00:00
Contact Form 00:00:00
Map Section 00:00:00
Footer Section 00:00:00
Creating CMS Collection 00:00:00
Using CMS Collection 00:00:00
Cars Page Build 00:00:00
Cars Template Build 00:00:00
Cars Template Build Part 2 00:00:00
Cars Template Build Part 3 00:00:00
Cars Template Build Part 4 00:00:00
Linking Car Cards 00:00:00
Loans Page 00:00:00
Contact Us Page 00:00:00
Adding Links 00:00:00
Responsive – Tablet 00:00:00
Responsive – Mobile Landscape 00:00:00
Responsive – Mobile Portrait 00:00:00
Animations In Webflow 00:00:00
Publish And Code Export 00:00:00
SEO Optimization 00:00:00
Assignment 00:00:00
Section 19 - Case Studies
Case Studies 00:00:00
What Is A Case Study 00:00:00
Elements To Include 00:00:00
Creating Case Study Structure 00:00:00
Awesome Case Study Examples 00:00:00
Content Writing 00:00:00
Presentation Tips 00:00:00
Assignment 00:00:00
Section 20 - Finding A Job
Finding A Job 00:00:00
Freelance Vs Agency 00:00:00
Design Contests 00:00:00
Gig Platforms 00:00:00
Digital Nomads 00:00:00
Design Platforms 00:00:00
Webflow Jobs 00:00:00
Portfolio Tips 00:00:00
Section 21 - Course Conclusion And Next Steps
Course Conclusion And Next Steps 00:00:00
4764597

Join our newsletter and get your first course free!

4764598

Join our newsletter and get your first course free!

Congratulations! You get one free course of your choice. Please check your email now for the redemption code

Are you interested in higher education?