Complete Web & Mobile Designer in 2023: UI/UX, Figma, +more
20h 31m 41s
English
Paid
Course description
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.
Read more about the course
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.
Watch Online
Watch Online Complete Web & Mobile Designer in 2023: UI/UX, Figma, +more
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
Read Book Complete Web & Mobile Designer in 2023: UI/UX, Figma, +more
| # | Title |
|---|---|
| 1 | Book 1 |
Comments
0 commentsSimilar courses
The Design Manual - The only guide you need to master mobile designadr
Sources: (UI) Adrian (Adrian Kuleszo)
"The Design Manual" is a comprehensive guide designed for mastering mobile design. The book combines theory and practice, providing…
28 minutes 12 seconds
Mastering Figma
Sources: leveluptutorials
This video is about Mastering Figma Introduction. Figma has similar uses to adobe XD and I'll be bringing you more videos to go more in-depth on how to use.
3 hours 37 minutes 49 seconds
The Ultimate UI Grids & Layouts Masterclass
Sources: Andrija Prelec
The course is filled with practical tips and tricks from a senior product designer with a decade of experience in design. In addition to learning...
7 hours 6 minutes 36 seconds
Learn Figma - UI/UX Design Essential Training
Sources: udemy
Figma is a very powerful application that runs online. There are virtually no platform boundaries when it comes to using figma because you can design within a w
3 hours 55 minutes 26 seconds
Motion Design with Figma: Animations, Motion Graphics, UX/UI
Sources: zerotomastery.io
Learn motion design using Figma from a design industry pro. You'll learn way more than just motion design principles and theory. This projects-based course will
10 hours 11 minutes 31 seconds
Want to join the conversation?
Sign in to comment