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

21h 31m 53s
English
Paid
May 27, 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 Introduction 02:50
18 Plans and Signup 02:33
19 Where to use Figma 01:23
20 Figma UI (Structure) 02:46
21 Figma UI (Files) 02:43
22 Figma UI (Toolbar) 06:58
23 Figma UI (Left Sidebar) 07:34
24 Figma UI (Right Sidebar) 06:29
25 Shapes and Tools (Frames) 03:14
26 Shapes and Tools (Groups) 02:45
27 Shapes and Tools (Basic Shapes and Boolean Operations) 06:26
28 Designing in Figma (Images) 05:52
29 Designing in Figma (Getting Started With Text) 06:02
30 Designing in Figma (Constraints) 04:36
31 Designing in Figma (Using Auto Layout) 05:03
32 Designing in Figma (Auto Layout Properties) 07:59
33 Resources and Collaboration (Community Files) 03:10
34 Resources and Collaboration (Community Plugins) 05:58
35 Resources and Collaboration (Sharing and Comments) 05:01
36 Project (What We Are Going To Build) 01:25
37 Project (Creating a Logo Using Basic Shapes) 05:04
38 Project (Auto Layout Buttons) 05:06
39 Project (Creating a Responsive Navigation) 09:07
40 Project (Responsive Text) 05:33
41 Project (Imagery and Gradients) 05:35
42 Project (Strokes and Shapes) 04:41
43 Project (Layout and Responsiveness) 07:51
44 User Flows Explained 05:12
45 The DOs and DON'Ts 02:28
46 What We Are Going To Build 02:07
47 Reusable User Flow Assets 06:55
48 User Flows in Figma (Onboarding) 10:59
49 User Flows in Figma (Search) 08:55
50 Introduction To Sitemaps 01:45
51 Creating A Basic Sitemap 04:17
52 What We Are Going To Learn 01:19
53 Reusable Sitemap Assets 09:33
54 Sitemaps in Figma (The Top Layer) 08:52
55 Sitemaps in Figma (Digging Deeper) 05:54
56 Sitemaps in Figma (Digging Deeper Cont.) 04:40
57 Tips for Creating Great Sitemaps 07:44
58 What Is A Wireframe? 03:07
59 How To Create A Wireframe 06:52
60 What We Are Going To Learn 06:44
61 Figma Check In (Basic Button Component) 03:57
62 Figma Check In (Variants) 05:35
63 How To Use Our Wireframe Components 05:33
64 Wireframes (Home) 13:03
65 Wireframes (Cart) 07:05
66 Wireframes (Profile) 05:48
67 What We Are Going to Learn 01:20
68 Figma Check In (Prototyping in Figma - Intro) 01:57
69 Prototyping in Figma (Flows and Starting Points) 05:06
70 Prototyping in Figma (Connections) 02:52
71 Prototyping in Figma (Interactions) 02:58
72 Prototyping in Figma (Animations) 03:31
73 Prototyping in Figma (Prototype Settings) 03:13
74 Prototyping in Figma (Prototype Presentation) 05:30
75 Project (Navigation) 03:41
76 Project (Removing an Item from Your Wishlist) 06:17
77 Project (Finding a Product) 06:14
78 Exercise: Imposter Syndrome 02:57
79 Why Is Feedback Important? 04:19
80 Constructive Feedback 06:49
81 What Is A Grid? 04:04
82 Grid Basics 05:57
83 What We Are Going to Learn 00:52
84 Figma Check In (Fixed and Fluid Grids) 04:33
85 Figma Check In (Breakpoints) 05:23
86 Figma Check In (Grid Style) 04:29
87 Project (Mobile Layout Grid) 06:57
88 Project (Desktop Layout Grids) 04:52
89 Simple Rules to Follow 06:33
90 Serifs 03:22
91 Sans Serifs 03:42
92 Display & Mono 04:39
93 Picking Typefaces 01:40
94 What We Are Going to Learn 00:49
95 Figma Check In (Text Properties) 07:36
96 Exercise (Elevating a Brand) 09:56
97 Exercise (Typeface Scenarios) 07:14
98 Exercise (Google Fonts) 04:38
99 Project (Typeface Exploration) 05:47
100 Project (Pairing Font Families) 06:36
101 Project (Headings, Body and Labels) 06:36
102 Project (Typeface System) 04:30
103 Figma Check In (Text Styles) 07:13
104 Color Schemes 03:54
105 Important Questions To Ask 02:45
106 Creating Color Palettes 02:56
107 What We Are Going to Learn 00:59
108 Figma Check In (Paints) 05:00
109 Exercise (Expanding Upon a Strict Color Palette) 10:37
110 Exercise (Creating a Color Palette) 04:00
111 Figma Check In (Color Styles) 06:05
112 Exercise (Using Color Styles) 08:21
113 Project (Primary and Neutrals) 06:37
114 Project (Accents) 06:32
115 Visual Assets Introduction 03:38
116 What We Are Going to Learn 01:00
117 Figma Check In (Image Plugins) 03:16
118 Figma Check In (Image Styles) 04:21
119 Figma Check In (Masks) 02:40
120 Exercise (Image Exploration) 09:08
121 Exercise (Text and Imagery Working Together) 08:34
122 Figma Check In (Illustration Plugins) 03:50
123 New Exercise (Adding Illustrations to Your Designs) 08:06
124 Figma Check In (Icon Plugins) 02:21
125 Figma Check In (Pen Tool) 05:06
126 Exercise (Custom Icons with the Pen Tool) 11:06
127 What Are Forms + UI Elements? 04:20
128 What We Are Going to Learn 01:54
129 Best Practices (Forms) 07:09
130 Best Practices (Basic and Advanced Inputs) 05:25
131 Best Practices (Inputs) 11:31
132 Best Practices (Buttons) 03:53
133 Figma Check In (Component Properties) 04:11
134 Properties vs. Variants 02:14
135 Figma Check In (Button Component Properties) 05:19
136 Figma Check In (Button Variants) 05:21
137 Figma Check In (Combining Components) 06:26
138 Figma Check In (Form Component Possibilities) 06:52
139 Project (Registration Flow Part 1) 10:39
140 Project (Registration Flow Part 2) 08:25
141 Project (Registration Flow Part 3) 06:43
142 What Is Accessibility? 02:31
143 Assistive Technologies 02:52
144 Visual Patterns For Accessibility 04:31
145 Tools To Make Your Design Accessible 06:25
146 Visual Patterns For Accessibility Part 2 06:43
147 What Are Design Patterns 06:01
148 Why Are Design Patterns Valuable 02:25
149 How To Apply Design Patterns 04:30
150 Analyzing Design Patterns 05:40
151 Dissecting And Choosing Design Patterns 06:14
152 Mobile Design Best Practices Part 1 06:59
153 Mobile Design Best Practices Part 2 11:11
154 What We Are Going to Learn 01:48
155 Design Fidelity 04:58
156 Visual Exploration (Navigation) 13:21
157 Visual Exploration (Buttons) 08:57
158 Figma Check In (Effect Styles) 02:43
159 Visual Exploration (Product Cards) 11:11
160 Visual Exploration (Text Cards) 08:52
161 Screen Design (Home) 13:05
162 Screen Design (Product Page) 07:36
163 The Importance Of Motion 07:04
164 What Is A Microinteraction? 10:24
165 Why Microinteractions Are Important 09:15
166 What We Are Going To Learn 01:42
167 Figma Check In (Intro to Smart Animate) 02:08
168 Figma Check In (Smart Animate Properties) 03:51
169 Exercise (Parallax) 05:22
170 Exercise (New Message) 05:14
171 Exercise (Overlays) 05:18
172 Figma Check In (Interactive Components) 04:44
173 Exercise (Interactive Buttons) 07:55
174 Project (Parallax Welcome Screen) 05:20
175 Project (Drag Onboarding) 07:20
176 Project (Cart Overlay) 06:53
177 Project (Button Microinteraction) 12:57
178 What We Are Going to Learn 01:08
179 Foundational Styles and Components vs. Product Specific Components 03:45
180 Building Fidelity and Organizing Potential Components and Styles 03:29
181 Foundational Styles and Components 06:24
182 Components (Buttons) 07:19
183 Components (Cards) 08:42
184 Components (Headers) 06:33
185 Components (Inputs) 06:09
186 Components (List Items) 04:43
187 Components (Navigation) 08:28
188 Components (Misc. Elements) 05:42
189 What We Are Going to Learn 01:44
190 Working Towards Our Final Designs 06:19
191 Execution (Introduction Screen) 06:01
192 Execution (Onboarding Screens) 10:09
193 Execution (Registration Screens) 16:03
194 Execution (Home Screen) 10:03
195 Execution (Wishlist Screens) 08:15
196 Execution (Profile Screen) 10:03
197 Execution (Cart and Checkout) 14:51
198 Prototypes (Registration) 09:48
199 Prototypes (Adding to Cart) 06:07
200 Prototypes (Checkout) 05:11
201 Prototypes (Lottie Files Plugin) 04:19
202 Prototypes (Search and Filters) 07:53
203 The Product Alignment Canvas 05:03
204 Project Goals 08:31
205 Target Users 08:40
206 User Journey Map 10:23
207 Risky Assumptions 04:33
208 What is a User Story Map? 05:57
209 Creating a User Story Map 07:41
210 Is Bruno Happy? 01:12
211 Project Handoff 03:42
212 Thank You! 01:18
213 How To Export And Place Designs 09:52
214 Content For Your Portfolio 10:58
215 Where To Host Your Web Portfolio 04:59
216 Initial Setup - Figma Handoff 12:58
217 Build UI - Adding Image Assets 09:25
218 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

UI Design Foundations

UI Design FoundationsAndrija Prelec

Duration 4 hours 30 seconds
Figma for Web Designers

Figma for Web Designersflux-academy (Ran Segall)

Duration 5 hours 31 minutes 58 seconds
Photography Masterclass: A Complete Guide to Photography
The Path to Senior Product Designer: A Growth Plan for a UX Design Career
Pixel Perfect Figma to Tailwind
UI UX Design Hybrid from Figma to HTML CSS and JavaScript
Advanced Figma Video Course + Let's Design Together Add-on
The Beginner's Guide to Figma

The Beginner's Guide to Figmaegghead

Duration 24 minutes 19 seconds
Kickstart your UI/UX Design Career / DesignCourse UI/UX
Complete Web Design: from Figma to Webflow to Freelancing