Complete UI/UX Product Design Bootcamp: Zero to Mastery

Join our hands-on design program at Zero To Mastery, where we guide you from a complete novice to a confident designer ready to land jobs or secure freelance gigs.

Your Learning Journey Includes:

• Understanding the core principles and elements of graphic design
• Staying updated with the best practices in web and mobile design
• Grasping the essentials of User Interface and User Experience (UI/UX) design
• Creating your own stunning and professional designs with the latest design tools and techniques for 2025
• Converting your designs into real websites or applications using HTML and CSS

Throughout the course, you will experience the complete design cycle and develop a real product for a company that will enhance your portfolio.

We equip you with all the necessary knowledge so that the next time you take on a design project, you'll have a clear roadmap to follow.

Bonus: Enjoy immediate access to over 100 assets and premium design templates that you can use to enhance your upcoming projects.

Zero To Mastery alumni have successfully secured positions at prestigious companies like Google, Tesla, Amazon, Apple, IBM, Uber, Facebook, and Shopify (seriously, look it up on Reddit or YouTube).

Many have also transitioned into successful freelance careers, working remotely from various locations around the globe.

This could be your future.

By signing up now, you'll gain entry to our exclusive live online community classroom, where you can learn alongside thousands of fellow students, alumni, mentors, TAs, and instructors.

Engaged. Supportive. Encouraging. Friendly. Uplifting. Essential.

These are just some of the words used by students to describe the vibrant ZTM Discord community.

Plus, you will benefit from the insights of industry veterans who have real-world experience from top companies in Toronto and Silicon Valley.

Explore the diverse topics covered in this Design Bootcamp

We promise the most comprehensive design training available online. Let's highlight what you’ll discover.

0. Principles of Web & Mobile Design & Understanding Design vs. Web Development

1. GETTING STARTED – Sketching, Inspiration + Structure

1. Sketching

   • An introduction to sketching
   • Crafting UX flows
   • Sketching tips and tricks

2. Inspiration

   • Ways to find and maintain inspiration
   • Where to search for design ideas online

3. User Flows

   • Defining user flows
   • Best practices and common pitfalls
   • Enhancing your efficiency with components
   • Creating user flows: Registration (Part 1)
   • Creating user flows: Search (Part 2)
   • Creating user flows: Checkout (Part 3)

4. Sitemaps

   • A beginner's guide to sitemaps
   • How to design a basic sitemap
   • Essential preparations before you start
   • Building a sitemap (Part 1)
   • Building a sitemap (Part 2)
   • Helpful hints for beginners

2. EXPLORE AND ITERATE – Wireframes, Prototyping, and Feedback

1. Wireframes

   • Defining a wireframe
   • Steps to create an effective wireframe
   • Boosting workflow in Figma
   • Wireframing a homepage
   • Wireframing a product page
   • Wireframing a checkout page

2. Prototyping in Figma

   • Essential prototyping concepts in Figma: Device + Triggers
   • Actions in Figma prototyping
   • Advanced techniques with Overflow
   • Presentation and collaboration in prototyping
   • Linking user flows in Figma
   • Crafting small interactions in Figma

3. Gathering Feedback

   • The importance of feedback
   • How to solicit constructive criticism

3. VISUAL DESIGN – Design Theory & Accessibility

1. Grids + Spacing

   • Basics of grids and spacing
   • Creating responsive grids in Figma
   • Designing your own grid system
   • Understanding grid rules

2. Typography

   • Introduction to typography (Part 1)
   • Matching typefaces to styles
   • Typography fundamentals (Part 2)
   • Choosing the right typeface
   • Continued exploration of typography (Part 3)
   • Selecting a typeface
   • Considering context when choosing typefaces
   • Expanding an existing typeface system
   • Navigating Google Fonts for choices
   • Refining your typography selections
   • Creating a cohesive type system in Figma

3. Color

   • Understanding color schemes
   • Key questions when selecting colors
   • Tips for crafting color palettes
   • Creating a monochromatic scheme
   • Implementing a simplistic palette
   • Expanding a restricted palette
   • Developing your custom color palette

4. Forms + UI Elements

   • Definition of UI Elements
   • Best Practices Part 1: Forms
   • Best Practices Part 2: Inputs (Parts 1-4)
   • Best Practices Part 3: Buttons
   • Creating components in Figma
   • Using atomic elements in Figma
   • Working with Instances in Figma
   • Editing Instances for new components
   • Creating responsive components with constraints
   • Designing a registration form in Figma

5. Imagery + Iconography

   • Resources and strategies for creating visual assets
   • Handling photos in Figma (Parts 1-2)
   • Utilizing illustrations in Figma
   • Quickly accessing icons via Figma plugins
   • Designing custom icons

6. Accessibility

   • Understanding accessibility
   • Assistive technology overview
   • Visual patterns for accessibility (Parts 1-2)
   • Tools for enhancing accessibility in design

4. DESIGN EXPLORATION – Application Design & Design Systems

1. Design Patterns

   • Defining design patterns
   • Importance of design patterns
   • Applying design patterns effectively
   • Collaborative analysis of design patterns
   • Choosing design patterns together

2. Mobile Design

   • Best practices for mobile design (Parts 1-2)

3. Implementing Visual Design

   • Design fidelity concepts
   • Exploring styles (Navigation, Cards, Interests, New Elements)

4. Intro to Motion Design

   • The role of motion in design
   • Functionality of motion
   • Basics of Figma Smart Animate
   • Demonstrating Figma Smart Animate capabilities

5. Microinteractions

   • What microinteractions are
   • The significance of microinteractions
   • Designing your own microinteractions (Parts 1-2)
   • Exploring Figmotion (Parts 1-2)

5. INTEGRATING LEARNING – Utilizing our Design System and High-Fidelity Prototyping with Figma

1. Design Systems

   • Understanding design systems
   • Foundational elements (Color, Grids, Spacing, Typography, Iconography)
   • Component creation (Buttons, Inputs, Cards)
   • Recipe creation (Card Layouts, Search, Orders)

2. Final Design Compositions

   • Employing our design system in projects (Search, Product Descriptions, Cart, Checkout)

3. Collaboration with Developers

   • Importance of design handoff
   • Collaborative techniques in Figma

6. TRANSITIONING FROM FIGMA TO WEBSITE (transforming your Figma design into a live website using HTML and CSS)

7. HTML + HTML5 Basics

8. CSS + CSS3 – Introduction, CSS Grid, Flexbox, Animations

9. DEPLOYING YOUR WEBSITE ONLINE

Ultimately, by completing this course, you will acquire all the skills needed to secure a Designer position that can lead to employment.

What’s the takeaway?

Design remains a highly relevant skill, resisting obsolescence like many technical abilities. While trends may evolve, the foundational knowledge you'll gain here will stay valuable for years to come.

This program focuses on empowering you to fully grasp the principles, ensuring you won't just be another passive viewer at the end of your journey. No!

This course is designed to elevate you from a complete novice to a skilled designer capable of landing high-level positions and earning well for your expertise 💪!

And there's no risk involved. You can begin your learning journey right now, and if you find the course doesn’t meet your expectations, we offer a full refund within 30 days—no strings attached.