Autoplay
Autocomplete
Previous Lesson
Complete and Continue
Complete Web & Mobile Designer in 2023: UI/UX, Figma + more
Introduction
Complete Web & Mobile Design: Zero to Mastery (3:16)
Course Outline (7:00)
Exercise: Meet Your Classmates and Instructor
Understanding Your Video Player (notes, video speed, subtitles + more)
Meeting The Client (4:13)
The 2 Paths (1:55)
Exercise: Building Your Logo (1:28)
Cheatsheet
Design Resources
Designer vs Developer (6:53)
Skills To Be A Top Designer (7:06)
Set Your Learning Streak Goal
Sketching
Getting Ready For This Section
Introduction To Sketching (3:27)
The Sketching Process (7:05)
Sketching User Flows (8:05)
Sketching User Flows 2 (5:49)
Sketching User Flows 3 (9:49)
Sketching User Flows 4 (10:02)
Sketching Tips (8:01)
Let's Have Some Fun (+ Free Resources)
Inspiration
How To Stay Inspired (7:59)
How To Find Inspiration (13:47)
Figma Basics
Resources
Introduction (2:49)
Plans and Signup (2:32)
Where to use Figma (1:22)
Figma UI (Structure) (2:45)
Figma UI (Files) (2:42)
Figma UI (Toolbar) (6:57)
Figma UI (Left Sidebar) (7:33)
Figma UI (Right Sidebar) (6:28)
Shapes and Tools (Frames) (3:13)
Shapes and Tools (Groups) (2:44)
Shapes and Tools (Basic Shapes and Boolean Operations) (6:25)
Designing in Figma (Images) (5:51)
Designing in Figma (Getting Started With Text) (6:01)
Designing in Figma (Constraints) (4:35)
Designing in Figma (Using Auto Layout) (5:02)
Designing in Figma (Auto Layout Properties) (7:58)
Resources and Collaboration (Community Files) (3:09)
Resources and Collaboration (Community Plugins) (5:57)
Resources and Collaboration (Sharing and Comments) (5:00)
Project (What We Are Going To Build) (1:24)
Project (Creating a Logo Using Basic Shapes) (5:03)
Project (Auto Layout Buttons) (5:05)
Project (Creating a Responsive Navigation) (9:06)
Project (Responsive Text) (5:32)
Project (Imagery and Gradients) (5:34)
Project (Strokes and Shapes) (4:40)
Project (Layout and Responsiveness) (7:50)
Unlimited Updates
User Flows
Getting Ready For This Section
User Flows Explained (5:11)
The DOs and DON'Ts (2:27)
What We Are Going To Build (2:06)
Reusable User Flow Assets (6:54)
User Flows in Figma (Onboarding) (10:58)
User Flows in Figma (Search) (8:54)
Course Check-In
Sitemaps
Getting Ready For This Section
Introduction To Sitemaps (1:44)
Creating A Basic Sitemap (4:16)
What We Are Going To Learn (1:18)
Reusable Sitemap Assets (9:32)
Figma Check In (Basic Components and Variants) (8:51)
Sitemaps in Figma (The Top Layer) (5:53)
Sitemaps in Figma (Digging Deeper) (4:39)
Sitemaps in Figma (Digging Deeper Cont.) (7:43)
Tips for Creating Great Sitemaps (3:06)
Implement a New Life System
Wireframes
Getting Ready For This Section
What Is A Wireframe? (6:51)
How To Create A Wireframe (6:43)
What We Are Going To Learn (1:58)
Figma Check In (Basic Button Component) (3:56)
Figma Check In (Variants) (5:34)
How To Use Our Wireframe Components (5:32)
Wireframes (Home) (13:02)
Wireframes (Cart) (7:04)
Wireframes (Profile) (5:47)
Prototyping
Getting Ready For This Section
What We Are Going to Learn (1:19)
Figma Check In (Prototyping in Figma - Intro) (1:56)
Prototyping in Figma (Flows and Starting Points) (5:05)
Prototyping in Figma (Connections) (2:51)
Prototyping in Figma (Interactions) (2:57)
Prototyping in Figma (Animations) (3:30)
Prototyping in Figma (Prototype Settings) (3:12)
Prototyping in Figma (Prototype Presentation) (5:29)
Project (Navigation) (3:40)
Project (Removing an Item from Your Wishlist) (6:16)
Project (Finding a Product) (6:13)
Exercise: Imposter Syndrome (2:56)
Feedback
Why Is Feedback Important? (4:18)
Constructive Feedback (6:48)
Spacing and Grids
Getting Ready For This Section
What Is A Grid? (4:03)
Grid Basics (5:56)
What We Are Going to Learn (0:51)
Figma Check In (Fixed and Fluid Grids) (4:32)
Figma Check In (Breakpoints) (5:22)
Figma Check In (Grid Style) (4:28)
Project (Mobile Layout Grid) (6:56)
Project (Desktop Layout Grids) (4:51)
Simple Rules to Follow (6:32)
Typography
Getting Ready For This Section
Serifs (3:21)
Sans Serifs (3:41)
Display & Mono (4:38)
Picking Typefaces (1:39)
What We Are Going to Learn (0:48)
Figma Check In (Text Properties) (7:35)
Exercise (Elevating a Brand) (9:55)
Exercise (Typeface Scenarios) (7:13)
Exercise (Google Fonts) (4:37)
Project (Typeface Exploration) (5:46)
Project (Pairing Font Families) (6:35)
Project (Headings, Body and Labels) (6:35)
Project (Typeface System) (4:29)
Figma Check In (Text Styles) (7:12)
Color
Getting Ready For This Section
Color Schemes (3:53)
Important Questions To Ask (2:44)
Creating Color Palettes (2:55)
What We Are Going to Learn (0:58)
Figma Check In (Paints) (4:59)
Exercise (Expanding Upon a Strict Color Palette) (10:36)
Exercise (Creating a Color Palette) (3:59)
Figma Check In (Color Styles) (6:04)
Exercise (Using Color Styles) (8:20)
Project (Primary and Neutrals) (6:36)
Project (Accents) (6:31)
Imagery and Iconography
Getting Ready For This Section
Visual Assets Introduction (3:37)
What We Are Going to Learn (0:59)
Figma Check In (Image Plugins) (3:15)
Figma Check In (Image Styles) (4:20)
Figma Check In (Masks) (2:39)
Exercise (Image Exploration) (9:07)
Exercise (Text and Imagery Working Together) (8:33)
Figma Check In (Illustration Plugins) (3:49)
New Exercise (Adding Illustrations to Your Designs) (8:05)
Figma Check In (Icon Plugins) (2:20)
Figma Check In (Pen Tool) (5:05)
Exercise (Custom Icons with the Pen Tool) (11:05)
Forms and UI Elements
Getting Ready For This Section
What Are Forms + UI Elements? (4:19)
What We Are Going to Learn (1:53)
Best Practices (Forms) (7:08)
Best Practices (Basic and Advanced Inputs) (5:24)
Best Practices (Inputs) (11:30)
Best Practices (Buttons) (3:52)
Figma Check In (Component Properties) (4:10)
Properties vs. Variants (2:13)
Figma Check In (Button Component Properties) (5:18)
Figma Check In (Button Variants) (5:20)
Figma Check In (Combining Components) (6:25)
Figma Check In (Form Component Possibilities) (6:51)
Project (Registration Flow Part 1) (10:38)
Project (Registration Flow Part 2) (8:24)
Project (Registration Flow Part 3) (6:42)
Accessibility
Getting Ready For This Section
What Is Accessibility? (2:30)
Assistive Technologies (2:51)
Visual Patterns For Accessibility (4:30)
Tools To Make Your Design Accessible (6:24)
Visual Patterns For Accessibility Part 2 (6:42)
Design Patterns
What Are Design Patterns (6:00)
Why Are Design Patterns Valuable (2:24)
How To Apply Design Patterns (4:29)
Analyzing Design Patterns (5:39)
Dissecting And Choosing Design Patterns (6:13)
Mobile Design
Mobile Design Best Practices Part 1 (6:58)
Mobile Design Best Practices Part 2 (11:10)
Visual Style and Exploration
Getting Ready For This Section
What We Are Going to Learn (1:47)
Design Fidelity (4:57)
Visual Exploration (Navigation) (13:20)
Visual Exploration (Buttons) (8:56)
Figma Check In (Effect Styles) (2:42)
Visual Exploration (Product Cards) (11:10)
Visual Exploration (Text Cards) (8:51)
Screen Design (Home) (13:04)
Screen Design (Product Page) (7:35)
Motion and Microinteractions
Getting Ready For This Section
The Importance Of Motion (7:03)
What Is A Microinteraction? (10:23)
Why Microinteractions Are Important (9:14)
What We Are Going To Learn (1:41)
Figma Check In (Intro to Smart Animate) (2:07)
Figma Check In (Smart Animate Properties) (3:50)
Exercise (Parallax) (5:21)
Exercise (New Message) (5:13)
Exercise (Overlays) (5:17)
Figma Check In (Interactive Components) (4:43)
Exercise (Interactive Buttons) (7:54)
Project (Parallax Welcome Screen) (5:19)
Project (Drag Onboarding) (7:19)
Project (Cart Overlay) (6:52)
Project (Button Microinteraction) (12:56)
Design Systems
Getting Ready For This Section
What We Are Going to Learn (1:07)
Foundational Styles and Components vs. Product Specific Components (3:44)
Building Fidelity and Organizing Potential Components and Styles (3:28)
Foundational Styles and Components (6:23)
Components (Buttons) (7:18)
Components (Cards) (8:41)
Components (Headers) (6:32)
Components (Inputs) (6:08)
Components (List Items) (4:42)
Components (Navigation) (8:27)
Components (Misc. Elements) (5:41)
Execution
Getting Ready For This Section
What We Are Going to Learn (1:43)
Working Towards Our Final Designs (6:18)
Execution (Introduction Screen) (6:00)
Execution (Onboarding Screens) (10:08)
Execution (Registration Screens) (16:02)
Execution (Home Screen) (10:02)
Execution (Wishlist Screens) (8:14)
Execution (Profile Screen) (10:02)
Execution (Cart and Checkout) (14:50)
Prototypes (Registration) (9:47)
Prototypes (Adding to Cart) (6:06)
Prototypes (Checkout) (5:10)
Prototypes (Lottie Files Plugin) (4:18)
Prototypes (Search and Filters) (7:52)
Working With A Client Revisited
Getting Ready For This Section
The Product Alignment Canvas (5:02)
Project Goals (8:30)
Target Users (8:39)
User Journey Map (10:22)
Risky Assumptions (4:32)
What is a User Story Map? (5:56)
Creating a User Story Map (7:40)
Where To Go From Here?
Is Bruno Happy? (1:11)
Project Handoff (3:41)
Next Step: Project Handoff
Thank You! (1:17)
Review This Course!
Learning Guideline
LinkedIn Endorsements
Become An Alumni
Web Portfolio
Getting Ready For This Section
How To Export And Place Designs (9:51)
Content For Your Portfolio (10:57)
Where To Host Your Web Portfolio (4:58)
From Figma To Website: Building Our Landing Page
Quick Note: Upcoming Videos
Initial Setup - Figma Handoff (12:57)
Build UI - Adding Image Assets (9:24)
Build UI - Styling Image Assets (9:17)
Bonus: How The Internet Works
Quick Note: Upcoming Videos
Browsing the Web (6:00)
Breaking Google (2:59)
Exercise: Break Google Yourself
The Internet Backbone (5:29)
Traceroute (2:24)
Exercise: Running traceroute
DEVELOPER FUNDAMENTALS: I (3:08)
What Does A Developer Do? (1:39)
Web Developer Monthly
Bonus: History Of The Web
WWW vs Internet (3:30)
HTML, CSS, Javascript (5:04)
DEVELOPER FUNDAMENTALS: II (2:55)
Developer History (3:08)
Exercise: Adding CSS and JavaScript to Tim's website
Optional Resource: More About the History of the Web
Bonus: HTML 5
Build Your First Website (7:48)
Resources: Your Text Editor
DEVELOPER FUNDAMENTALS: III (3:31)
Quick Note About w3schools
How To Ask Questions
HTML Tags (8:39)
HTML Tags 2 (1:49)
Self Closing HTML Tags (5:34)
Anchor Tag (4:52)
Q&A: index.html (2:05)
Q&A: Relative vs Absolute Path (3:46)
HTML Forms (10:57)
HTML Forms 2 (3:09)
Submitting A Form (8:18)
HTML Tags 3 (3:51)
HTML vs HTML 5 (6:38)
Copy A Website (2:26)
HTML Challenge (1:07)
HTML Lesson Files
Exercise: HTML Quiz
Optional Exercise: More HTML
Bonus: CSS 3
Exercise Files: Code-Along
Your First CSS (13:48)
CSS Properties (10:31)
CSS Selectors (16:28)
Optional Exercise: CSS Selectors
Text and Font (7:37)
Images In CSS (4:15)
Box Model (5:06)
px vs em vs rem (3:03)
Optional: PX, EM, REM, %, VW, and VH
Exercise: CSS Quiz
Critical Render Path (4:04)
Exercise File: Code-Along Images
Flexbox (8:29)
Optional Exercise: Flexbox Froggy
CSS 3 (8:24)
Optional Exercise: Mastering Transitions and Transforms
Responsive UI (1:40)
Image Gallery Files
Exercise: Robot Animation (0:55)
Exercise: Robot Animation Starter Files
Solution: Robot Animation
Optional Exercise: CSS
Bonus: Bootstrap, Templates, And Building Your Startup Landing Page
Evolving Technology (4:47)
Bootstrap Introduction (4:00)
Bootstrap (8:51)
Bootstrap 5 Update (4:18)
Exercise: Changing Versions
Bootstrap Grid (5:18)
Free Resources For Our Project
Exercise: Startup Landing Page (0:54)
Exercise: Startup Landing Page 2 (3:58)
Exercise: Startup Landing Page 3 (8:23)
Quick Note: The hr tag
Exercise: Startup Landing Page 4 (8:25)
Bootstrap 5.2+ Button Hover Update
Exercise: Startup Landing Page 5 (11:33)
Quick Note: Text Not Centered?
Quick Note: Mailchimp
Exercise: Adding Email Subscribe Form With MailChimp (9:21)
Quick Note: Upcoming Videos
Exercise: Putting Your Website Online (5:48)
Exercise: Putting Your Website Online 2 (2:50)
Quick Note: Upcoming Video
DEVELOPER FUNDAMENTALS: IV (7:15)
Using Templates (3:18)
Resources for FREE Templates
Startup Landing Pages by Students
Bonus: CSS Grid + CSS Layout
Section Overview (1:50)
CSS Grid vs Flexbox vs Bootstrap (4:40)
Quick Note: grid-gap to gap
CSS Grid 1 (7:55)
CSS Grid 2 (4:14)
CSS Grid 3 (6:25)
CSS Grid 4 (7:07)
CSS Grid 5 (1:56)
Optional Exercise: CSS Grid
Exercise: CSS Layout (3:37)
Solution: Navigation Bar (8:37)
Solution: Navigation Bar 2 (4:22)
Solution: Cover (4:41)
Solution: Project Grid + Footer (8:54)
Quick Note: Upcoming Video
Solution: Prettify (6:59)
The Truth About CSS (3:51)
Exercise: Startup Landing Page 4
Lecture content locked. Exclusive for ZTM Academy members.
If you're already a member,
you'll need to login
.
Join ZTM To Unlock All Lectures