Complete Web & Mobile Designer in 2024: UI/UX, Figma + more

Jump into the Zero To Mastery design course, where hands-on learning is at the forefront! This course is tailored to take you from a novice to a competitive candidate for jobs or freelance gigs in no time.

What you'll discover:

• Graphic design fundamentals and core principles
• The most effective techniques for Web and Mobile Design
• Essential User Interface (UI) and User Experience (UX) Design best practices
• How to craft stunning, professional designs using the latest design tools and methodologies for 2024
• Tools to transform your designs into functional websites or applications with HTML and CSS

You’ll also engage in a complete design journey, creating a real product for a client, which will become a highlight in your portfolio.

We provide a comprehensive guide to ensure that when it's your turn to design, you have a clear step-by-step framework to navigate.

Bonus: Gain immediate access to over 100 resources and premium design templates to enhance your future projects.

Zero To Mastery graduates are now employed at leading companies like Google, Tesla, Amazon, Apple, IBM, Uber, Facebook, and Shopify (really, take a look online!).

Many are thriving as freelancers, enjoying remote work from across the globe.

You could be next.

By enrolling today, you’ll join our vibrant live online community classroom to learn alongside a vast network of fellow students, alumni, mentors, TAs, and instructors.

Active. Supportive. Engaging. Friendly. Uplifting. Essential.

These are just a few terms our students use to describe the ZTM Discord community.

You will learn from experts with real-world experience from leading firms in Toronto and Silicon Valley.

Here's a glimpse of the wide array of topics covered in this Design Bootcamp

We stand by our promise of being the most extensive design course available online. Let’s explore everything you will master.

0. Web & Mobile Design Principles & The Distinction between Design and Web Development

1. BEGINNING – Sketching, Inspiration & Structure

1. Sketching

   • Introduction to sketching
   • Sketching UX flows
   • Tips for sketching

2. Inspiration

   • How to keep your creativity flowing
   • Finding design inspiration online

3. User Flows

   • Understanding user flows
   • Key do’s and don’ts
   • Enhancing workflow with components
   • Creating user flows: Registration (Part 1)
   • Creating user flows: Search (Part 2)
   • Creating user flows: Checkout (Part 3)

4. Sitemaps

   • Introduction to sitemaps
   • Building a basic sitemap
   • Preparatory steps before beginning
   • Developing a sitemap (Part 1)
   • Developing a sitemap (Part 2)
   • Tips for initial steps

2. EXPLORE AND ITERATE – Wireframes, Prototyping & Feedback

1. Wireframes

   • Defining a wireframe
   • Steps to create a wireframe
   • Speeding up tasks in Figma
   • Creating a homepage
   • Creating a product page
   • Creating a checkout page

2. Prototyping in Figma

   • Basics of prototyping: Device + Triggers
   • Prototyping basics: Actions
   • Prototyping basics: Overflow
   • Prototyping basics: Presentation + Collaboration
   • Linking a user flow in Figma
   • Creating small interactions with Figma

3. Gathering design feedback

   • The significance of feedback
   • Obtaining constructive design feedback

3. VISUAL DESIGN – Design Theory & Accessibility

1. Grids + Spacing

   • Basics of spacing and grids
   • Responsive grids in Figma
   • Creating a custom grid in Figma
   • Grid principles

2. Typography

   • Basics of typography (Part 1)
   • Choosing typefaces that match an era
   • Basics of typography (Part 2)
   • Selecting suitable typefaces
   • Basics of typography (Part 3)
   • Choosing a typeface
   • Is your typeface appropriate for the context?
   • Expanding an existing type system
   • Finding typefaces on Google Fonts
   • Narrowing down typography selections
   • Developing a type system in Figma

3. Color

   • Understanding color schemes
   • Crucial questions before choosing colors
   • Helpful color palette creation tips
   • Designing a monochromatic color palette
   • Implementing a simple color palette
   • Expanding a strict color palette
   • Developing your own color palette

4. Forms + UI Elements

   • Understanding UI elements
   • Best Practices: Forms Part 1
   • Best Practices: Inputs Part 1
   • Best Practices: Inputs Part 2
   • Best Practices: Inputs Part 3
   • Best Practices: Inputs Part 4
   • Best Practices: Buttons
   • Creating components in Figma
   • Using atomic elements in Figma
   • Working with instances in Figma
   • Editing instances to design new components
   • Utilizing constraints for responsive components
   • Building a registration form in Figma

5. Imagery + Iconography

   • Techniques for crafting outstanding visual assets
   • Handling images in Figma (Part 1)
   • Handling images in Figma (Part 2)
   • Working with illustrations in Figma
   • Using Figma plugins for quick icon discovery
   • Designing your own custom icons

6. Accessibility

   • Understanding accessibility
   • Assistive technologies
   • Visual patterns for accessibility (Part 1)
   • Tools to enhance design accessibility
   • Visual patterns for accessibility (Part 2)

4. DESIGN EXPLORATION – Application Design & Design Systems

1. Design Patterns

   • Defining design patterns
   • The importance of design patterns
   • How to implement design patterns
   • Collaboratively analyzing design patterns
   • Collaboratively selecting design patterns

2. Mobile Design

   • Best practices for mobile design (Part 1)
   • Best practices for mobile design (Part 2)

3. Implementing Visual Design

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

4. Motion Design Basics (including access to Daniel's comprehensive Motion Design course)

   • Understanding the importance of motion
   • The role of motion in design
   • Introduction to Figma Smart Animate
   • Demonstrating Figma Smart Animate’s potential

5. Microinteractions

   • What are microinteractions?
   • Why microinteractions matter
   • Creating microinteractions (Part 1)
   • Creating microinteractions (Part 2)
   • Using Figmotion (Part 1)
   • Using Figmotion (Part 2)

5. INTEGRATING ALL ELEMENTS – Utilizing our Design System & High-Fidelity Prototyping in Figma

1. Design Systems

   • Understanding design systems
   • Foundational elements (Color)
   • Foundational elements (Grids and Spacing)
   • Foundational elements (Typography)
   • Foundational elements (Iconography)
   • Components (Buttons)
   • Components (Inputs)
   • Components (Cards)
   • Recipes (Card Layouts)
   • Recipes (Search)
   • Recipes (Orders)

2. Final Compositions

   • Implementing our design system (Search)
   • Implementing our design system (Product Description)
   • Implementing our design system (Cart)
   • Implementing our design system (Checkout)

3. Collaboration with Developers

   • Understanding the significance of project handoff
   • Collaborative work in Figma

6. TRANSFORMING FIGMA DESIGNS INTO WEBSITES (convert your design from Figma to a live site using HTML and CSS)

7. HTML + HTML5

8. CSS + CSS3 - Basics of CSS, CSS Grid, Flexbox, and CSS Animations

9. DEPLOYING YOUR WEBSITE

By the end of this course, you will possess everything necessary to become a Designer capable of landing a job.

What’s the takeaway?

Design is a timeless skill that holds its value much longer than various tech skills. While trends may evolve, the insights and fundamentals you gain here will benefit you for years ahead.

This course is designed to ensure you don't just passively learn without grasping the fundamental principles—leaving you unsure and unprepared afterward.

We challenge you to evolve from an absolute beginner into a top-tier designer, ready for opportunities with leading companies and the ability to command competitive rates for your work 💪!

Worried? There's nothing to lose! Start learning today, and if the course doesn’t meet your expectations, we’ll refund your investment within 30 days, hassle-free and no questions asked.