DESIGN CRASH COURSE INTRO

MEETING THE CLIENT

THE 2 PATHS

SKILLS TO BE A TOP DESIGNER

MAKE IT YOUR OWN

INTRODUCTION TO SKETCHING

THE SKETCHING PROCESS

SKETCHING USER FLOWS

SKETCHING USER FLOWS 2

SKETCHING USER FLOWS 3

SKETCHING USER FLOWS 4

SKETCHING TIPS

HOW TO STAY INSPIRED

HOW TO FIND INSPIRATION

RESOURCES

INTRO TO FIGMA

PLANS AND SIGN UP

WHERE TO USE FIGMA

FIGMA UI (STRUCTURE)

FIGMA UI (FILES)

FIGMA UI (TOOLBAR)

FIGMA UI (LEFT SIDEBAR)

FIGMA UI (RIGHT SIDEBAR)

SHAPES AND TOOLS (FRAMES)

SHAPES AND TOOLS (GROUPS)

SHAPES AND TOOLS (BASIC SHAPES AND BOOLEAN OPERATIONS)

DESIGNING IN FIGMA (IMAGES)

DESIGNING IN FIGMA (GETTING STARTED WITH THE TEXT)

DESIGNING IN FIGMA (CONSTRAINTS)

DESIGNING IN FIGMA (USING AUTO LAYOUT)

DESIGNING IN FIGMA (AUTO LAYOUT PROPERTIES)

RESOURCES AND COLLABORATION (COMMUNITY FILES)

RESOURCES AND COLLABORATION (COMMUNITY PLUGINS)

RESOURCES AND COLLABORATION (SHARING AND COMMENTS)

PROJECT (WHAT WE ARE GOING TO BUILD)

PROJECT (CREATING A LOGO USING BASIC SHAPES)

PROJECT (AUTO LAYOUT BUTTONS)

PROJECT (CREATING A RESPONSIVE NAVIGATION)

PROJECT (RESPONSIVE TEXT)

PROJECT (IMAGERY AND GRADIENTS)

PROJECT (STROKES AND SHAPES)

PROJECT (LAYOUT AND RESPONSIVENESS)

USER FLOWS EXPLAINED

THE DOS AND DON’TS

WHAT WE ARE GOING TO BUILD

REUSABLE USER FLOW ASSETS

USER FLOWS IN FIGMA (ONBOARDING)

USER FLOWS IN FIGMA (SEARCH)

INTRODUCTION TO SITEMAPS

CREATING A BASIC SITEMAP

WHAT WE ARE GOING TO LEARN

REUSABLE SITEMAP ASSETS

FIGMA CHECK-IN (BASIC COMPONENTS AND VARIANTS)

SITEMAPS IN FIGMA (THE TOP LAYER)

SITEMAPS IN FIGMA (DIGGING DEEPER)

SITEMAPS IN FIGMA (DIGGING DEEPER CONT.)

TIPS FOR CREATING GREAT SITEMAPS

WHAT IS A WIREFRAME

HOW TO CREATE A WIREFRAME

WHAT ARE WE GOING TO LEARN

FIGMA CHECKIN (BASIC BUTTON COMPONENT)

FIGMA CHECKIN (VARIANTS)

HOW TO USE OUR WIREFRAME COMPONENTS

WIREFRAMES (HOME)

WIREFRAME (CART)

WIREFRAME (PROFILE)

WHERE TO KEEP LEARNING & HOW TO GET HIRED AS A DESIGNER

Zero To Mastery

Take your first step to becoming a UI/UX Designer in 2024 with this Design 101 Crash Course for beginners. In this 6-hour course, you'll learn design fundamentals, learn how to use Figma from scratch, plus get expert tips and tricks, and much more!

This Design Crash Course is part of Daniel Schifano's Complete Web & Mobile Designer Bootcamp course.

Once you finish this crash course, come take the rest of Dan's Design Bootcamp where you'll go even deeper and gain the skills to get hired as a full-time Designer in 2024 👇

🎉 Take the rest of Daniel's Bootcamp here: https://zerotomastery.io/courses/learn-web-design/
🤑 Use code: YTDESIGN10 to get 10% OFF (for life!)

BONUS: Join now to get instant access to 100+ assets & premium design templates that you can keep and use to customize all your future projects.

🤩 Full Interview with Dan Schifano: https://youtu.be/N0z5iLP9P_Q
👍 Subscribe for more free tutorials & exclusive content: https://links.zerotomastery.io/youtube

==========

Resources & Files: 

➡ UX/UI Design Cheat Sheet: https://zerotomastery.io/cheatsheets/ui-ux-design-cheat-sheet/
➡ Create a Figma account: https://help.figma.com/hc/en-us/articles/360039811114-Create-a-Figma-account
➡ Configure your browser for Figma: https://help.figma.com/hc/en-us/articles/360039828614-Configure-your-browser-for-Figma
➡ Guide to files & projects: https://help.figma.com/hc/en-us/articles/1500005554982-Guide-to-files-and-projects
➡ Duplicate Figma Files: https://help.figma.com/hc/en-us/articles/360038511533-Duplicate-files
➡ Figma Basics Resource: https://www.figma.com/file/Emufvy9xLgqoncKfK5yUT2/01.-Figma-Basics-Resource?node-id=7%3A11
➡ Sketching Resource: https://www.figma.com/file/goN3nuKQZsyiKrnrDI4Xtl/00.-Sketching-Resource?node-id=0%3A1
➡ User Flows Resource: https://www.figma.com/file/9r8g8aPvEa8wOl5bvBN73U/02.-User-Flows-Resource?node-id=110%3A0
➡ Sitemap Resource: https://www.figma.com/file/ogc14N9eIL51xqNSTehfpQ/03.-Sitemap-Resource?node-id=69%3A130
➡ Wireframe Resource: https://www.figma.com/file/BItl6hCrHWfDg93MUj3ng8/04.-Wireframes-Resource?node-id=29460%3A0

==========

⏲  Timestamps:

00:00 DESIGN CRASH COURSE INTRO
01:33 MEETING THE CLIENT
05:55 THE 2 PATHS
07:56 SKILLS TO BE A TOP DESIGNER
15:11 MAKE IT YOUR OWN
16:00 INTRODUCTION TO SKETCHING
19:36 THE SKETCHING PROCESS
26:50 SKETCHING USER FLOWS
35:05 SKETCHING USER FLOWS 2
41:02 SKETCHING USER FLOWS 3
51:01 SKETCHING USER FLOWS 4
1:01:12 SKETCHING TIPS
1:09:21 HOW TO STAY INSPIRED
1:17:30 HOW TO FIND INSPIRATION
1:31:25 RESOURCES
1:32:13 INTRO TO FIGMA
1:35:12 PLANS AND SIGN UP
1:37:53 WHERE TO USE FIGMA
1:39:24 FIGMA UI (STRUCTURE)
1:42:18 FIGMA UI (FILES)
1:45:09 FIGMA UI (TOOLBAR)
1:52:14 FIGMA UI (LEFT SIDEBAR)
1:59:57 FIGMA UI (RIGHT SIDEBAR)
2:06:33 SHAPES AND TOOLS (FRAMES)
2:09:55 SHAPES AND TOOLS (GROUPS)
2:12:48 SHAPES AND TOOLS (BASIC SHAPES AND BOOLEAN OPERATIONS)
2:19:21 DESIGNING IN FIGMA (IMAGES)
2:25:21 DESIGNING IN FIGMA (GETTING STARTED WITH THE TEXT)
2:31:31 DESIGNING IN FIGMA (CONSTRAINTS)
2:36:15 DESIGNING IN FIGMA (USING AUTO LAYOUT)
2:41:25 DESIGNING IN FIGMA (AUTO LAYOUT PROPERTIES)
2:49:32 RESOURCES AND COLLABORATION (COMMUNITY FILES)
2:52:51 RESOURCES AND COLLABORATION (COMMUNITY PLUGINS)
2:58:57 RESOURCES AND COLLABORATION (SHARING AND COMMENTS)
3:04:06 PROJECT (WHAT WE ARE GOING TO BUILD)
3:05:39 PROJECT (CREATING A LOGO USING BASIC SHAPES)
3:10:51 PROJECT (AUTO LAYOUT BUTTONS)
3:16:04 PROJECT (CREATING A RESPONSIVE NAVIGATION)
3:25:19 PROJECT (RESPONSIVE TEXT)
3:31:01 PROJECT (IMAGERY AND GRADIENTS)
3:36:43 PROJECT (STROKES AND SHAPES)
3:41:32 PROJECT (LAYOUT AND RESPONSIVENESS)
3:49:31 USER FLOWS EXPLAINED
3:54:51 THE DOS AND DON’TS
3:57:27 WHAT WE ARE GOING TO BUILD
3:59:41 REUSABLE USER FLOW ASSETS
4:06:44 USER FLOWS IN FIGMA (ONBOARDING)
4:17:51 USER FLOWS IN FIGMA (SEARCH)
4:26:54 INTRODUCTION TO SITEMAPS
4:28:47 CREATING A BASIC SITEMAP
4:33:12 WHAT WE ARE GOING TO LEARN
4:34:39 REUSABLE SITEMAP ASSETS
4:44:20 FIGMA CHECK-IN (BASIC COMPONENTS AND VARIANTS)
4:53:19 SITEMAPS IN FIGMA (THE TOP LAYER)
4:59:21 SITEMAPS IN FIGMA (DIGGING DEEPER)
5:04:09 SITEMAPS IN FIGMA (DIGGING DEEPER CONT.)
5:12:00 TIPS FOR CREATING GREAT SITEMAPS
5:15:15 WHAT IS A WIREFRAME
5:22:15 HOW TO CREATE A WIREFRAME
5:29:07 WHAT ARE WE GOING TO LEARN
5:31:14 FIGMA CHECKIN (BASIC BUTTON COMPONENT)
5:35:19 FIGMA CHECKIN (VARIANTS)
5:41:02 HOW TO USE OUR WIREFRAME COMPONENTS
5:46:42 WIREFRAMES (HOME)
5:59:54 WIREFRAME (CART)
6:07:06 WIREFRAME (PROFILE)
6:13:06 WHERE TO KEEP LEARNING & HOW TO GET HIRED AS A DESIGNER

==========

Graduates of Zero To Mastery are now working at Google, Tesla, Amazon, Apple, IBM, JP Morgan, Facebook, Shopify + other top tech companies. Many are also working as top-rated Freelancers getting paid $1,000s while working remotely around the world

🎓 Here are just a few of them: https://zerotomastery.io/testimonials

This could be you 👆

==========

Full course 👉 https://zerotomastery.io/courses/learn-web-design/

Design 101 Crash Course: Learn UX/UI Design, Figma (6 HOURS!) | Zero To Mastery

Design 101 Crash Course: Learn UX/UI Design, Figma (6 HOURS!) | Zero To Mastery

Design 101 Crash Course: Learn UX/UI Design, Figma (6 HOURS!) | Zero To Mastery

Get Full Course Access

Highly Recommended Courses

Explore top skills

In-demand Careers

Popular Topics

Creative Skills

Business Skills

Choose your learning path