UX / UI Design Mastery
The most complete online UI/UX design course ever made.
From Zero To UI/UX Superhero
24+ Hours of video content will walk you through everything that you need to know to become amazing UI/UX designer, even if you don't have any experience. This course covers more then some schools do!
From Zero To Hero
Start with the basics and evolve to more complicated tasks throughout the course.
24+ Hours Of Content
200+ Full HD videos taking you from start to finish and 18 assignments to help you practice.
Templates & Practice Files
Templates to help you speed up your process and practice files to help you learn better.
60k+ Students Already Enrolled
Over 60.000 students already enrolled in my courses, changed their lives, found better jobs and improved as designers.
Topics Covered In The Course
Scroll down to see what we are going to cover in this 24+ hours long course.
UX Design Basics
Learn what UX design is, why is it useful and important in the modern design process.
What are design briefs, why and when to use them and what are the key data points you should have when talking with your client to better structure your brief.
Send bullet proof proposals to your clients and easily break down your services, charges and terms and conditions up front.
User Research And Personas
Understand who is your user, how to do the research and form a persona using qualitative and quantitative data you will get through your research.
Compare the competition and understand what they are doing right and where they are making mistakes so you can avoid them and convert better.
Figure out the best user and task flows to optimize for better conversion and reduce the bounce rate.
Visualize your ideas on a piece of paper for quick feedback or concept exploration before moving into your design tool.
Layouts And Grids
Different layouts and grids in web design, how they are used and how to utilize them in your projects.
Typography And Font Pairing
How to choose the right typography for your project based on the niche and mood of the business.
How to work with different icon styles, shapes and packs and how to get the consistent look and feel of your design with scaling in mind.
Learn how to choose colors for your projects, balance them and build pleasant color pallets.
Working With Images
Learn how to find right images, optimize them and how to work with image sets for best consistency.
Get in the mood for the project and collect the best imagery to help you create the right project style.
Learn what are UI Kits, why are they useful for in the modern UI/UX workflow as well as how to create and use your own.
How to work with design systems, structure and organize them and how to build your own with scalability and future proof in mind.
Website Design In Adobe Xd & Figma
In this section we will apply everything we learned so far and create a website from scratch using the tips and techniques we talked about before.
After the design is finished, we will build, optimize and launch it in Webflow, all without writing any code.
Now that you have your portfolio piece, you have to know how to present it and show the value that you brought to your client in this project.
Find The Job
What job types are out there, where to find them and which websites and tools to use to get a job you want.
All Course Lessons
- 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)
- 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)
- 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)
- 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)
- 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)
- 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)
- 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)
About Your Teacher
My name is Aleksandar and for the last 10 years i have designed websites, products and apps for different companies, big and small. With my wife i have started 3 startup companies and for the last five years i have created over 500 design products, improved the lives and workflows of over 100.000 designers from around the world.
Now my mission is to improve the lives of others, and so far over 60.000 students from all over the world have enrolled in my courses.
Enroll in this course today and change your career and workflow by using the same techniques that industry pro's are using.