Using the latest best practices in Web Design and Mobile Design as well as User Interface and User Experience Design (UI/UX), this 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.
Complete Web & Mobile Designer in 2023: UI/UX, Figma, +more
20h 31m 41s
English
Paid
The curriculum is going to be very hands on as we walk you from start to finish of working as a Designer, all the way into learning how to create final professional designs and then converting them into actual websites or apps using HTML and CSS.
This brand new course will take you from the very basics where we talk about principles and fundamentals of graphic design, all the way to creating beautiful products, learning about UX/UI and interactions, and creating a full design process for you to use with all of your future projects and clients. We pretty much cover it all so that the next time you are in charge of designing a product you have the step by step outline and guide to work as a professional designer.
We are going to teach you the skills that will allow you to charge a lot of money for your time. Not to compete for a few dollars an hour on some random freelancing websites. The goal is to give you the skills of a top designer, and along the way, we are going to design an actual product for a company that you will be able to add to your portfolio.
This course is not about making you just watch along without understanding the principles so that when you are done with the course you don’t know what to do other than watch another tutorial. No! This course will push you and challenge you to go from an absolute beginner to someone that is a top Designer that can get hired! Design is a valuable skill that doesn’t get outdated easily like most technical skills. Trends change, but the skills and fundamentals you learn in this course will take you many years into the future.
About the Authors
Udemy
Udemy is the largest open marketplace for online courses on the internet. Founded in 2010 by Eren Bali, Oktay Caglar, and Gagan Biyani and headquartered in San Francisco, the company went public on the Nasdaq in 2021 under the ticker UDMY. The platform hosts well over two hundred thousand courses across software development, IT and cloud, data science, design, business, marketing, and creative skills, taught by tens of thousands of independent instructors. Roughly seventy million learners use it worldwide, and the corporate arm — Udemy Business — supplies a curated subset of that catalog to enterprise customers.
Because Udemy is a marketplace rather than a single editorial publisher, the catalog is uneven by design. The strongest material lives in the long-form, project-based courses authored by working engineers — full-stack JavaScript, React, Node.js, Python data science, AWS, Docker and Kubernetes, mobile development with Flutter and React Native, and cloud certification preparation. The CourseFlix listing under this source is the slice of that catalog that has been mirrored here for offline-friendly viewing, organized by topic and updated as new releases land. Pricing on Udemy itself swings dramatically with the site's near-permanent sales, which is why the platform is best treated as a deep reference catalog: pick instructors with strong reviews and a track record of updating their material rather than buying on the headline price alone.
Zero To Mastery
Zero To Mastery (ZTM) is a Toronto-based online coding academy founded by Andrei Neagoie, originally a senior developer at large Canadian tech firms before turning to teaching full-time. The academy's signature is the cohort-based bootcamp track combined with a deep self-paced course library, all aimed at career-changers and self-taught developers preparing to land software-engineering roles at top companies.
The instructor roster has grown well beyond Andrei to include other senior practitioners: Daniel Bourke (machine learning), Aleksa Tešić (DevOps), Jacinto Wong, and others. Courses cover the full software-engineering career path: web development with React and Next.js, Python, machine learning and deep learning, DevOps and cloud, system design, mobile, and the algorithm / data-structure interview prep that gates engineering jobs.
The CourseFlix listing under this source carries over 120 ZTM courses spanning that full range. Material is paid; ZTM itself runs on a monthly / annual membership model. The teaching style favours long-form, project-based courses where students build complete portfolio-quality applications rather than disconnected feature tutorials.
Watch Online 221 lessons
0:00
/ #1: Complete Web & Mobile Design: Zero to Mastery
All Course Lessons (221)
| # | Lesson Title | Duration | Access |
|---|---|---|---|
| 1 | Complete Web & Mobile Design: Zero to Mastery Demo | 03:17 | |
| 2 | Course Outline | 07:01 | |
| 3 | Meeting The Client | 04:14 | |
| 4 | The 2 Paths | 01:56 | |
| 5 | Exercise: Building Your Logo | 01:29 | |
| 6 | Designer vs Developer | 06:54 | |
| 7 | Skills To Be A Top Designer | 07:07 | |
| 8 | Introduction To Sketching | 03:28 | |
| 9 | The Sketching Process | 07:06 | |
| 10 | Sketching User Flows | 08:06 | |
| 11 | Sketching User Flows 2 | 05:50 | |
| 12 | Sketching User Flows 3 | 09:50 | |
| 13 | Sketching User Flows 4 | 10:03 | |
| 14 | Sketching Tips | 08:02 | |
| 15 | How To Stay Inspired | 08:00 | |
| 16 | How To Find Inspiration | 13:48 | |
| 17 | Intro to Figma: Education Plans and Signup | 01:35 | |
| 18 | Intro to Figma: Introduction | 00:57 | |
| 19 | Intro to Figma: Where to use Figma | 00:33 | |
| 20 | Figma UI: File Browser | 02:21 | |
| 21 | Figma UI: Files | 01:32 | |
| 22 | Figma UI: Toolbar | 05:32 | |
| 23 | Figma UI: Left Sidebar | 04:07 | |
| 24 | Figma UI: Right Sidebar | 04:25 | |
| 25 | Shapes and Tools: Working with Containers | 04:39 | |
| 26 | Shapes and Tools: Basic Shapes and Boolean Operations | 05:42 | |
| 27 | Designing in Figma: Images | 02:50 | |
| 28 | Designing in Figma: Getting Started with Text | 04:05 | |
| 29 | Designing in Figma: Constraints | 02:51 | |
| 30 | Designing in Figma: Using Auto Layout | 06:00 | |
| 31 | Resources and Collaboration: Community Files | 01:41 | |
| 32 | Resources and Collaboration: Community Plugins | 02:43 | |
| 33 | Resources and Collaboration: Sharing and Comments | 03:25 | |
| 34 | What We Are Going to Learn | 02:36 | |
| 35 | Exercise: Create a Quick Logo Using Shapes | 02:16 | |
| 36 | Exercise: Autolayout Buttons | 05:38 | |
| 37 | Exercise: Responsive Navigation | 03:08 | |
| 38 | Exercise: Responsive Text | 04:16 | |
| 39 | Exercise: Imagery and Gradients | 03:13 | |
| 40 | Exercise: Layout and Responsiveness | 03:16 | |
| 41 | Assignment: Create Complex Interactive Components | 01:03 | |
| 42 | User Flows Explained | 05:12 | |
| 43 | The DOs and DON'Ts | 02:28 | |
| 44 | What We Are Going To Build | 02:07 | |
| 45 | Reusable User Flow Assets | 06:55 | |
| 46 | User Flows in Figma (Onboarding) | 10:59 | |
| 47 | User Flows in Figma (Search) | 08:55 | |
| 48 | Introduction To Sitemaps | 01:45 | |
| 49 | Creating A Basic Sitemap | 04:17 | |
| 50 | What We Are Going To Learn | 01:19 | |
| 51 | Reusable Sitemap Assets | 09:33 | |
| 52 | Sitemaps in Figma (The Top Layer) | 08:52 | |
| 53 | Sitemaps in Figma (Digging Deeper) | 05:54 | |
| 54 | Sitemaps in Figma (Digging Deeper Cont.) | 04:40 | |
| 55 | Tips for Creating Great Sitemaps | 07:44 | |
| 56 | What Is A Wireframe? | 03:07 | |
| 57 | How To Create A Wireframe | 06:52 | |
| 58 | What We Are Going To Learn | 06:44 | |
| 59 | Figma Check In (Basic Button Component) | 03:57 | |
| 60 | Figma Check In (Variants) | 05:35 | |
| 61 | How To Use Our Wireframe Components | 05:33 | |
| 62 | Wireframes (Home) | 13:03 | |
| 63 | Wireframes (Cart) | 07:05 | |
| 64 | Wireframes (Profile) | 05:48 | |
| 65 | What We Are Going to Learn | 01:20 | |
| 66 | Figma Check In (Prototyping in Figma - Intro) | 01:57 | |
| 67 | Prototyping in Figma (Flows and Starting Points) | 05:06 | |
| 68 | Prototyping in Figma (Connections) | 02:52 | |
| 69 | Prototyping in Figma (Interactions) | 02:58 | |
| 70 | Prototyping in Figma (Animations) | 03:31 | |
| 71 | Prototyping in Figma (Prototype Settings) | 03:13 | |
| 72 | Prototyping in Figma (Prototype Presentation) | 05:30 | |
| 73 | Project (Navigation) | 03:41 | |
| 74 | Project (Removing an Item from Your Wishlist) | 06:17 | |
| 75 | Project (Finding a Product) | 06:14 | |
| 76 | Exercise: Imposter Syndrome | 02:57 | |
| 77 | Constructive Feedback | 04:03 | |
| 78 | Feedback Drives Better Design | 02:59 | |
| 79 | Recap: What Did We Learn? | 01:34 | |
| 80 | What Is A Grid? | 04:04 | |
| 81 | Grid Basics | 05:57 | |
| 82 | What We Are Going to Learn | 00:52 | |
| 83 | Figma Check In (Fixed and Fluid Grids) | 04:33 | |
| 84 | Figma Check In (Breakpoints) | 05:23 | |
| 85 | Figma Check In (Grid Style) | 04:29 | |
| 86 | Project (Mobile Layout Grid) | 06:57 | |
| 87 | Project (Desktop Layout Grids) | 04:52 | |
| 88 | Simple Rules to Follow | 06:33 | |
| 89 | Serifs | 03:22 | |
| 90 | Sans Serifs | 03:42 | |
| 91 | Display & Mono | 04:39 | |
| 92 | Picking Typefaces | 01:40 | |
| 93 | What We Are Going to Learn | 00:49 | |
| 94 | Figma Check In (Text Properties) | 07:36 | |
| 95 | Exercise (Elevating a Brand) | 09:56 | |
| 96 | Exercise (Typeface Scenarios) | 07:14 | |
| 97 | Exercise (Google Fonts) | 04:38 | |
| 98 | Project (Typeface Exploration) | 05:47 | |
| 99 | Project (Pairing Font Families) | 06:36 | |
| 100 | Project (Headings, Body and Labels) | 06:36 | |
| 101 | Project (Typeface System) | 04:30 | |
| 102 | Figma Check In (Text Styles) | 07:13 | |
| 103 | Color Schemes | 03:54 | |
| 104 | Important Questions To Ask | 02:45 | |
| 105 | Creating Color Palettes | 02:56 | |
| 106 | What We Are Going to Learn | 00:59 | |
| 107 | Figma Check In (Paints) | 05:00 | |
| 108 | Exercise (Expanding Upon a Strict Color Palette) | 10:37 | |
| 109 | Exercise (Creating a Color Palette) | 04:00 | |
| 110 | Figma Check In (Color Styles) | 06:05 | |
| 111 | Exercise (Using Color Styles) | 08:21 | |
| 112 | Project (Primary and Neutrals) | 06:37 | |
| 113 | Project (Accents) | 06:32 | |
| 114 | Visual Assets Introduction | 03:38 | |
| 115 | What We Are Going to Learn | 01:00 | |
| 116 | Figma Check In (Image Plugins) | 03:16 | |
| 117 | Figma Check In (Image Styles) | 04:21 | |
| 118 | Figma Check In (Masks) | 02:40 | |
| 119 | Exercise (Image Exploration) | 09:08 | |
| 120 | Exercise (Text and Imagery Working Together) | 08:34 | |
| 121 | Figma Check In (Illustration Plugins) | 03:50 | |
| 122 | New Exercise (Adding Illustrations to Your Designs) | 08:06 | |
| 123 | Figma Check In (Icon Plugins) | 02:21 | |
| 124 | Figma Check In (Pen Tool) | 05:06 | |
| 125 | Exercise (Custom Icons with the Pen Tool) | 11:06 | |
| 126 | What Are Forms + UI Elements? | 04:20 | |
| 127 | What We Are Going to Learn | 01:54 | |
| 128 | Best Practices (Forms) | 07:09 | |
| 129 | Best Practices (Basic and Advanced Inputs) | 05:25 | |
| 130 | Best Practices (Inputs) | 11:31 | |
| 131 | Best Practices (Buttons) | 03:53 | |
| 132 | Figma Check In (Component Properties) | 04:11 | |
| 133 | Properties vs. Variants | 02:14 | |
| 134 | Figma Check In (Button Component Properties) | 05:19 | |
| 135 | Figma Check In (Button Variants) | 05:21 | |
| 136 | Figma Check In (Combining Components) | 06:26 | |
| 137 | Figma Check In (Form Component Possibilities) | 06:52 | |
| 138 | Project (Registration Flow Part 1) | 10:39 | |
| 139 | Project (Registration Flow Part 2) | 08:25 | |
| 140 | Project (Registration Flow Part 3) | 06:43 | |
| 141 | What Is Accessibility? | 02:31 | |
| 142 | Assistive Technologies | 02:52 | |
| 143 | Visual Patterns For Accessibility | 04:31 | |
| 144 | Tools To Make Your Design Accessible | 06:25 | |
| 145 | Visual Patterns For Accessibility Part 2 | 06:43 | |
| 146 | What Are Design Patterns | 06:01 | |
| 147 | Why Are Design Patterns Valuable | 02:25 | |
| 148 | How To Apply Design Patterns | 04:30 | |
| 149 | Analyzing Design Patterns | 05:40 | |
| 150 | Dissecting And Choosing Design Patterns | 06:14 | |
| 151 | Mobile Design Best Practices Part 1 | 06:59 | |
| 152 | Mobile Design Best Practices Part 2 | 11:11 | |
| 153 | What We Are Going to Learn | 01:48 | |
| 154 | Design Fidelity | 04:58 | |
| 155 | Visual Exploration (Navigation) | 13:21 | |
| 156 | Visual Exploration (Buttons) | 08:57 | |
| 157 | Figma Check In (Effect Styles) | 02:43 | |
| 158 | Visual Exploration (Product Cards) | 11:11 | |
| 159 | Visual Exploration (Text Cards) | 08:52 | |
| 160 | Screen Design (Home) | 13:05 | |
| 161 | Screen Design (Product Page) | 07:36 | |
| 162 | Misconceptions of Motion Design | 03:37 | |
| 163 | Motion Supports Usability | 03:21 | |
| 164 | Narrative and Mental Models | 05:16 | |
| 165 | What is a Microinteraction? | 01:34 | |
| 166 | The Structure of a Microinteraction | 01:58 | |
| 167 | Not Every Element is a Microinteraction! | 02:04 | |
| 168 | How Microinteractions Impact User Experiences | 04:33 | |
| 169 | What We Are Going To Learn | 01:42 | |
| 170 | Figma Check In (Intro to Smart Animate) | 02:08 | |
| 171 | Figma Check In (Smart Animate Properties) | 03:51 | |
| 172 | Exercise (Parallax) | 05:22 | |
| 173 | Exercise (New Message) | 05:14 | |
| 174 | Exercise (Overlays) | 05:18 | |
| 175 | Figma Check In (Interactive Components) | 04:44 | |
| 176 | Exercise (Interactive Buttons) | 07:55 | |
| 177 | Project (Parallax Welcome Screen) | 05:20 | |
| 178 | Project (Drag Onboarding) | 07:20 | |
| 179 | Project (Cart Overlay) | 06:53 | |
| 180 | Project (Button Microinteraction) | 12:57 | |
| 181 | What We Are Going to Learn | 01:08 | |
| 182 | Foundational Styles and Components vs. Product Specific Components | 03:45 | |
| 183 | Building Fidelity and Organizing Potential Components and Styles | 03:29 | |
| 184 | Foundational Styles and Components | 06:24 | |
| 185 | Components (Buttons) | 07:19 | |
| 186 | Components (Cards) | 08:42 | |
| 187 | Components (Headers) | 06:33 | |
| 188 | Components (Inputs) | 06:09 | |
| 189 | Components (List Items) | 04:43 | |
| 190 | Components (Navigation) | 08:28 | |
| 191 | Components (Misc. Elements) | 05:42 | |
| 192 | What We Are Going to Learn | 01:44 | |
| 193 | Working Towards Our Final Designs | 06:19 | |
| 194 | Execution (Introduction Screen) | 06:01 | |
| 195 | Execution (Onboarding Screens) | 10:09 | |
| 196 | Execution (Registration Screens) | 16:03 | |
| 197 | Execution (Home Screen) | 10:03 | |
| 198 | Execution (Wishlist Screens) | 08:15 | |
| 199 | Execution (Profile Screen) | 10:03 | |
| 200 | Execution (Cart and Checkout) | 14:51 | |
| 201 | Prototypes (Registration) | 09:48 | |
| 202 | Prototypes (Adding to Cart) | 06:07 | |
| 203 | Prototypes (Checkout) | 05:11 | |
| 204 | Prototypes (Lottie Files Plugin) | 04:19 | |
| 205 | Prototypes (Search and Filters) | 07:53 | |
| 206 | The Product Alignment Canvas | 05:03 | |
| 207 | Project Goals | 08:31 | |
| 208 | Target Users | 08:40 | |
| 209 | User Journey Map | 10:23 | |
| 210 | Risky Assumptions | 04:33 | |
| 211 | What is a User Story Map? | 05:57 | |
| 212 | Creating a User Story Map | 07:41 | |
| 213 | Is Bruno Happy? | 01:12 | |
| 214 | Project Handoff | 03:42 | |
| 215 | Thank You! | 01:18 | |
| 216 | How To Export And Place Designs | 09:52 | |
| 217 | Content For Your Portfolio | 10:58 | |
| 218 | Where To Host Your Web Portfolio | 04:59 | |
| 219 | Initial Setup - Figma Handoff | 12:58 | |
| 220 | Build UI - Adding Image Assets | 09:25 | |
| 221 | Build UI - Styling Image Assets | 09:18 |
Unlock unlimited learning
Get instant access to all 220 lessons in this course, plus thousands of other premium courses. One subscription, unlimited knowledge.
Learn more about subscriptionBooks
Related courses
-
Updated 1y agoFigma Mastery - The ultimate Figma course for new and struggling designers
By: Adrian Kuleszo (UI Adrian)Figma Mastery is an extensive guide designed to transform how you use Figma, guiding you through every stage of the design process—right from setting up.5/5 -
Updated 2y agoDesign a Responsive Airbnb Website with Figma
By: Zero To MasteryJoin this course to explore advanced Figma features by designing a responsive website for a fictional rental service. Learn the full design process from initial11h 17m -
Updated 2y agoThe Ultimate Airtable Design System Inventory and Automation (Bundle)
By: Romina KavcicCreate with Airtable, Use Everywhere Learn to quickly create an inventory with Airtable and easily integrate it with tools like Figma, Jira, Slack, GitHub.37m
Frequently asked questions
What are the prerequisites for enrolling in this course?
There are no formal prerequisites for this course. It is designed to take students from zero experience to a level where they can seek employment or freelance contracts in web and mobile design. However, having a basic understanding of design principles and experience with digital tools can be beneficial.
What projects or skills will I build during the course?
Throughout the course, you will engage in exercises such as building logos, creating responsive navigation and text, and forming complex interactive components. You will also learn to design user flows, sitemaps, and wireframes using tools like Figma, which are crucial for UI/UX design in web and mobile contexts.
Who is the target audience for this course?
The course is aimed at beginners who are interested in becoming web and mobile designers, as well as professionals looking to update their skills with the latest UI/UX best practices. It serves students seeking careers in design or those aiming to win freelance contracts.
What specific tools or platforms are covered in the course?
The course focuses heavily on teaching Figma, a popular design tool. Students will learn to navigate its UI, work with shapes and tools, design with images and text, use auto layout, and collaborate with community files and plugins. Figma's features are integral to the course's design workflow.
How does the depth of this course compare to similar courses?
This course offers a comprehensive approach, covering both web and mobile design along with UI/UX principles. With 221 lessons, it provides detailed instruction on sketching, user flows, sitemaps, and wireframes, ensuring a robust understanding of design processes compared to shorter or more narrowly-focused courses.
What topics are not covered in this course?
The course does not delve into advanced coding for web or mobile development. It focuses on design principles and tools, leaving programming and technical development aspects for other specialized courses.
What is the expected time commitment for completing the course?
The course consists of 221 lessons, and while the total runtime is unspecified, students should expect to invest a significant amount of time to fully engage with the content, complete exercises, and practice design skills. A structured schedule will help manage this commitment effectively.