Complete Web & Mobile Designer in 2023: UI/UX, Figma, +more

20h 31m 41s
English
Paid
December 7, 2024

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.

More

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 Complete Web & Mobile Designer in 2023: UI/UX, Figma, +more

Join premium to watch
Go to premium
# Title Duration
1 Complete Web & Mobile Design: Zero to Mastery 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

Read Book Complete Web & Mobile Designer in 2023: UI/UX, Figma, +more

# Title
1 Book 1

Similar courses to Complete Web & Mobile Designer in 2023: UI/UX, Figma, +more

Learn Figma - UI/UX Design Essential Training

Learn Figma - UI/UX Design Essential Trainingudemy

Duration 3 hours 55 minutes 26 seconds
The UX Portfolio Formula - A UX portfolio course created by Sarah Doody
Kickstart your UI/UX Design Career / DesignCourse UI/UX
The Ultimate UI Grids & Layouts Masterclass

The Ultimate UI Grids & Layouts MasterclassAndrija Prelec

Duration 7 hours 6 minutes 36 seconds
UI UX Design Hybrid from Figma to HTML CSS and JavaScript
Figma for Web Designers

Figma for Web Designersflux-academy (Ran Segall)

Duration 5 hours 31 minutes 58 seconds
Advanced Figma Video Course + Let's Design Together Add-on
Complete Web Design: from Figma to Webflow to Freelancing
Photography Masterclass: A Complete Guide to Photography