Learn the basics of UX/UI design, from theory to live website using Adobe Xd, Figma and Webflow.
Read more.Course Skill Level
Beginner
Time Estimate
28h 17m
Instructor
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 CourseAbout 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 | ||
Related Courses
Are you interested in higher education?