Complete Web & Mobile Designer: UI/UX, Figma, +more
 | 28h 14min total length |
 | 32 sections |
| 352 lectures |
Course Overview
Complete Web & Mobile Designer: UI/UX, Figma, +more
Using the latest best practices in Web Design and Mobile Design as well as User Interface and User Experience Design (UI/UX), this web and mobile designer course focuses on efficiently getting you from zero to a point where you can get hired or win freelance contracts. We will use in demand tools like Figma to show you a full workflow from start to finish. Graduates of Andrei’s courses are now working at Google, Tesla, Amazon, Apple, IBM, JP Morgan, Facebook, + other top tech companies.
The course also includes 100+ assets and premium design templates that you can keep and use to customize for all your future projects. We guarantee you this is the most comprehensive online resource on Design skills!
What you’ll learn:
- Build beautifully designed web and mobile projects for your customers using modern tools used by top companies in 2023
- Get hired as a Designer or become a freelancer that can work from anywhere and for anyone. Designers are in high demand!
- Includes 100+ assets and premium design templates that you can keep and use to customize for all your future projects
- Master Figma for your design needs then learn to convert your designs into a live HTML an CSS website
- Have an amazing design portfolio customized and professionally completed by the end of the course (we provide it for you!)
- Master both Web and Mobile design principles and how to go from sketching to fully fledged high fidelity designs that will wow customers
- Learn to design for all types of devices using Figma and other tools used by some of the top designers in the world
- Learn to use HTML5 and CSS3 to make your designs come to life and create fully working websites
- Learn best practices that takes years to learn in the design industry
- Learn to make professional logos and design choices for all branding needs
- Learn UI/UX best practices using the latest trends in the industry
- Learn to be a designer as well as a web developer at the same time (a rare combination of skills that is in high demand)!
Course Title
Complete Web & Mobile Designer: UI/UX, Figma, +more
This course includes:
- 27.5 hours on-demand video
- 1 coding exercise
- 65 articles
- 17 downloadable resources
- Access on mobile and TV
- Full lifetime access
- Certificate of completion
Requirements
- No requirements. We teach you and show you everything from scratch! From Zero to Mastery
- Get ready to fall in love with Design and making everything you touch into beautiful projects for the rest of your life!
Who this course is for:
- Anyone who wants to start a Web or Mobile Design business on the side as a freelancer, or work as a designer at a company
- Web Developers and Mobile Developers wanting to add another valuable skill to their tool belt
- Anyone who wants to get hired as a Web Designer, Mobile Designer, UI/UX Designer
- Anyone who wants to learn about the latest CSS3 features like Flexbox, CSS Grid and CSS Variables as well as HTML5
Course content
32 sections • 352 lectures • 28h 14m total length
1. Introduction – 11 lectures 40min
| Course Outline Preview | 07:00 |
| Join Our Online Classroom! | 4:01 |
| Exercise: Meet Your Classmates & Instructor | 1:45 |
| Meeting The Client Preview | 04:13 |
| The 2 Paths Preview | 01:55 |
| Exercise: Building Your Logo | 1:28 |
| Design Resources | 0:14 |
| Designer vs Developer preview | 06:53 |
| Skills To Be A Top Designer preview | 07:06 |
| ZTM Resources | 4:23 |
| Monthly Coding Challenges, Free Resources and Guides | 0:41 |
2. Sketching – 8 lectures 53min
| Getting Ready For This Section | 0:40 |
| 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 |
3. Inspiration – 2 lectures 22min
| How To Stay Inspired | 7:59 |
| How To Find Inspiration | 13:46 |
4. Figma Basics – 28 lectures 2hr 14min
| Resources Preview | 01:09 |
| Introduction Preview | 02:49 |
| Plans and Signup Preview | 02:32 |
| Where to Use Figma Preview | 01:22 |
| Figma UI — Structure Preview | 02:45 |
| Figma UI — Files Preview | 02:42 |
| Figma UI — Toolbar Preview | 06: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 |
5. User Flows – 7 lectures 37min
| Getting Ready For This Section | 0:40 |
| User Flows Explained | 5:11 |
| The DOs and DON’Ts | 2:27 |
| What We Are Going To Build | 2:05 |
| Reusable User Flow Assets | 6:54 |
| User Flows in Figma — Onboarding | 10:58 |
| User Flows in Figma — Search | 8:54 |
6. Sitemaps – 10 lectures 48min
| Getting Ready For This Section | 0:40 |
| Introduction To Sitemaps | 1:44 |
| Creating A Basic Sitemap | 4:16 |
| What We Will 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:05 |
7. Wireframes – 10 lectures 57min
| Getting Ready For This Section | 0:40 |
| What Is A Wireframe? | 6:51 |
| How To Create A Wireframe | 6:43 |
| What We Will Learn | 1:58 |
| Figma Check In — Basic Button Component | 3:56 |
| Figma Check In — Variants | 5:34 |
| How to Use Our Wireframe Components | 5:31 |
| Wireframes — Home | 13:02 |
| Wireframes — Cart | 7:04 |
| Wireframes — Profile | 5:47 |
8. Prototyping – 13 lectures 46min
| Getting Ready For This Section | 0:40 |
| What We Will Learn | 1:18 |
| Figma Check In — Prototyping in Figma | 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:55 |
9. Feedback – 2 lectures 11min
| Why Is Feedback Important? | 4:18 |
| Constructive Feedback | 6:48 |
10. Spacing and Grids – 10 lectures 44min
| Getting Ready For This Section | 0:40 |
| What Is A Grid? | 4:03 |
| Grid Basics Preview | 05:56 |
| What We Will 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 |
11. Typography – 15 lectures 1hr 15min
| Getting Ready For This Section | 0:40 |
| Serifs | 3:21 |
| Sans Serifs | 3:41 |
| Display & Mono | 4:38 |
| Picking Typefaces | 1:39 |
| What We Will 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:45 |
| 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 |
12. Color – 12 lectures 58min
| Getting Ready For This Section | 0:40 |
| Color Schemes | 3:53 |
| Important Questions To Ask | 2:44 |
| Creating Color Palettes | 2:55 |
| What We Will 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 |
13. Imagery and Iconography – 13 lectures 1hr 4min
| Getting Ready For This Section | 0:40 |
| Visual Assets Introduction | 3:37 |
| What We Will Learn | 0:59 |
| Figma Check In — Image Plugins | 3:14 |
| 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 |
| Exercise — Adding illustrations to your designs | 8:04 |
| Figma Check In — Icon Plugins | 2:20 |
| Figma Check In — Pen Tool | 5:05 |
| Exercise — Custom Icons with the Pen Tool | 11:05 |
14. Forms and UI Elements – 16 lectures 1hr 31min
| Getting Ready For This Section | 0:40 |
| What Are Forms + UI Elements? | 4:19 |
| What We Will 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:24 |
| Figma Check In — Form Component Possibilities | 6:51 |
| Project — Registration Flow Part 1 | 10:37 |
| Project — Registration Flow Part 2 | 8:24 |
| Project — Registration Flow Part 3 | 6:42 |
15. Accessibility – 6 lectures 24min
| Getting Ready For This Section | 0:40 |
| 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 |
16. Design Patterns – 5 lectures 25min
| 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 |
17. Mobile Design – 2 lectures 18min
| Mobile Design Best Practices Part 1 | 6:58 |
| Mobile Design Best Practices Part 2 | 11:10 |
18. Visual Style and Exploration – 10 lectures 1hr 13min
| Getting Ready For This Section | 0:40 |
| What We Will 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:34 |
19. Motion and Microinteractions – 16 lectures 1hr 36min
| Getting Ready For This Section | 0:40 |
| The Importance Of Motion | 7:03 |
| What Is A Microinteraction? | 10:23 |
| Why Microinteractions Are Important? | 9:14 |
| What We Will 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 |
20. Design Systems – 12 lectures 1hr 3min
| Getting Ready For This Section | 0:40 |
| What We Will Learn | 1:06 |
| Foundational Styles and Components vs. Product Specific Components | 3:43 |
| 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:41 |
| Components — Navigation | 8:27 |
| Components — Misc. Elements | 5:41 |
21. Execution – 15 lectures 1hr 57min
| Getting Ready For This Section | 0:40 |
| What We Will 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:05 |
| Prototypes — Checkout | 5:10 |
| Prototypes — Lottie Files Plugin | 4:18 |
| Prototypes — Search and Filters | 7:51 |
22. Working With A Client Revisited – 8 lectures 51min
| Getting Ready For This Section | 0:40 |
| 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 |
23. Where To Go From Here? 7 lectures 8min
| Is Bruno Happy? | 1:11 |
| Project Handoff | 3:41 |
| Next Step: Project Handoff | 0:36 |
| Thank You! | 1:17 |
| Learning Guideline | 0:10 |
| Become An Alumni | 0:37 |
| LinkedIn Endorsements | 0:40 |
| Course Review | 1 question |
| The Final Challenge | 1 question |
24. Web Portfolio – 4 lectures 26min
| Getting Ready For This Section | 0:40 |
| How To Export And Place Designs | 9:51 |
| Content For Your Portfolio | 10:57 |
| Where To Host Your Web Portfolio | 4:58 |
25. From Figma To Website: Building Our Landing Page – 4 lectures 32min
| Quick Note: Upcoming Videos | 0:19 |
| Initial Setup – Figma Handoff | 12:57 |
| Build UI – Adding Image Assets | 9:24 |
| Build UI – Styling Image Assets | 9:17 |
26. Extra: How The Internet Works – 10 lectures 24min
| Quick Note: Upcoming Videos | 0:11 |
| Browsing the Web | 6:00 |
| Breaking Google | 2:59 |
| Exercise: Break Google Yourself | 0:32 |
| The Internet Backbone | 5:29 |
| Traceroute | 2:24 |
| Exercise: Running traceroute | 0:53 |
| DEVELOPER FUNDAMENTALS: I | 3:07 |
| What Does A Developer Do? | 1:39 |
| Web Developer Monthly | 0:21 |
27. Extra: History Of The Web – 6 lectures 15min
| 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 | 0:21 |
| Optional Resource: More About the History of the Web | 0:10 |
28. Extra: HTML 5 – 21 lectures 1hr 19min
| Build Your First Website | 7:48 |
| Resources: Your Text Editor | 0:57 |
| DEVELOPER FUNDAMENTALS: III | 3:31 |
| Quick Note About w3schools | 0:14 |
| How To Ask Questions | 1:03 |
| 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 | 0:36 |
| Exercise: HTML Quiz | 0:24 |
| Optional Exercise: More HTML | 1:05 |
29. Extra: CSS 3 – 23 lectures 1hr 29min
| Exercise Files: Code-Along | 0:13 |
| Your First CSS | 13:48 |
| CSS Properties | 10:31 |
| CSS Selectors | 16:28 |
| Optional Exercise: CSS Selectors | 0:28 |
| 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 | 0:23 |
| Exercise: CSS Quiz | 0:22 |
| Critical Render Path | 4:04 |
| Exercise File: Code-Along Images | 0:16 |
| Flexbox | 8:29 |
| Optional Exercise: Flexbox Froggy | 0:17 |
| CSS 3 | 8:24 |
| Optional Exercise: Mastering Transitions and Transforms | 0:14 |
| Responsive UI | 1:40 |
| Image Gallery Files | 0:08 |
| Exercise: Robot Animation | 0:55 |
| Exercise: Robot Animation Starter Files | 0:36 |
| Solution: Robot Animation | 0:16 |
| Optional Exercise: CSS | 1:13 |
30. Extra: Bootstrap, Templates, And Building Your Startup Landing Page – 28 lectures 1hr 39min
| Evolving Technology | 4:47 |
| Bootstrap Introduction | 3:59 |
| Quick Note: Upcoming Lesson | 0:16 |
| Bootstrap | 8:51 |
| Bootstrap 5 Update | 4:18 |
| Exercise: Changing Versions | 0:53 |
| Fast and the Furious Bootstrap | 5:07 |
| Exercise: Fast and the Furious Bootstrap Challenge | 0:10 |
| Bootstrap Grid | 5:18 |
| Free Resources For Our Project | 0:13 |
| 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 | 0:19 |
| Exercise: Startup Landing Page 4 | 8:25 |
| Bootstrap 5.2+ Button Hover Update | 0:18 |
| Exercise: Startup Landing Page 5 | 11:33 |
| Quick Note: Text Not Centered? | 0:25 |
| Quick Note: Mailchimp | 0:22 |
| Exercise: Adding Email Subscribe Form With MailChimp | 9:21 |
| Quick Note: Upcoming Videos | 0:22 |
| Exercise: Putting Your Website Online | 5:48 |
| Exercise: Putting Your Website Online 2 | 2:50 |
| Quick Note: Upcoming Video | 0:32 |
| DEVELOPER FUNDAMENTALS: IV | 7:15 |
| Using Templates | 3:18 |
| Resources for FREE Templates | 0:21 |
| Startup Landing Pages by Students | 0:30 |
31. Extra: CSS Grid + CSS Layout- 17 lectures 1hr 16min
| Section Overview | 1:50 |
| CSS Grid vs Flexbox vs Bootstrap | 4:40 |
| Quick Note: grid-gap to gap | 0:19 |
| 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 | 0:15 |
| 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 | 0:16 |
| Solution: Prettify | 6:59 |
| The Truth About CSS | 3:51 |
32. BONUS SECTION – 1 lecture 1min
| Special Bonus Lecture | 0:16 |
Instructor: Andrei Neagoie
Andrei is the instructor of some of the highest rated programming and technical courses online.
Instructor: Daniel Schifano
Daniel is a design leader in tech with extensive experience in helping startups build and iterate on their products. Daniel is passionate about teaching and empowering designers and working with other disciplines to build purposeful products that meet both user and business goals.
His approach to design is always thoughtful and iterative. Daniel often finds himself working collaboratively with his team whether that is sketching concepts and flows or leading design strategy with team leads and external stakeholders.
Daniel is a multi faceted designer who’s expertise expands across multiple design disciplines. This includes User Experience and Visual Design, User Research, Product Strategy, Lean and Agile Design Methodologies and much more. HIs work has helped to shape different solutions for a variety of industries such as housing, blockchain and health.
When he is not building products, Daniel has spoke and mentored at different meetups and events. He aims to give back to the design community that he has learnt and continues to learn so much from. Daniel aims to always help, teach and support other designers in their careers.
Course Feature
Course Feature
Course Provider: Udemy
UEN: N/A
Course Reference Number: N/A
Mode Of Training: Online
| FULL COURSE FEE | $184.98 |
|---|---|
| Duration | 28h 14min |
Available in: English
