Course details
Duration
Self-Paced Learning
Lectures
212
Video
25 Hour 34 Minutes
Level
All Levels
- Curriculum
- Reviews
SECTION 1: INTRODUCTION
-
1
Introduction To Becoming A UI/UX Designer -
2
Meeting The Client
-
3
The 2 Paths
-
4
Exercise Building Your Logo
-
5
Designer vs Developer
-
6
Skills To Be A Top Designer
-
7
Introduction To Sketching
-
8
The Sketching Process
-
9
Sketching User Flows Part 1
-
10
Sketching User Flows Part 2
-
11
Sketching User Flows Part 3
-
12
Sketching User Flows Part 4
-
13
Sketching Tips
-
14
How To Stay Inspired
-
15
How To Find Inspiration
-
16
Introduction To Figma
-
17
Figma Dashboard
-
18
Figma Tools
-
19
Layers & Pages
-
20
The Top Bar
-
21
Design Properties
-
22
Prototyping With Figma
-
23
Exercise Creating A Responsive Layout
-
24
What Are User Flows
-
25
The Do's And Don'ts
-
26
Speed Up Workflow With Components
-
27
Creating Our Own User Flows Part 1
-
28
Creating Our Own User Flows Part 2
-
29
Creating Our Own User Flows Part 3
-
30
Introduction To Sitemaps
-
31
Creating A Basic Sitemap
-
32
Before You Start
-
33
Creating A Sitemap Part 1
-
34
Creating A Sitemap Part 2
-
35
Tips For Getting Started
SECTION 2: EXPLORE & ITERATE - WIREFRAMES, PROTOTYPING, AND FEEDBACK
-
36
What Is A Wireframe
-
37
How To Create A Wireframe
-
38
Wireframes In FIgma
-
39
Creating Our Home Page
-
40
Creating A Product Page
-
41
Creating A Checkout Page
-
42
Prototyping Basics In Figma Part 1
-
43
Prototyping Basics In Figma Part 2
-
44
Prototyping Basics In Figma Part 3
-
45
Prototyping Basics In Figma Part 4
-
46
Linking Together A Quick User Flow
-
47
Working On Small Interactions
-
48
Why Is Feedback Important
-
49
Constructive Feedback
SECTION 3: VISUALLY DESIGNS + DESIGN THEORY AND ACCESSIBILITY
-
50
What Is A Grid
-
51
Grid Basics
-
52
Responsive Grids And Breakpoints
-
53
Making Our Grid In Figma
-
54
Grid Guidelines
-
55
Serifs
-
56
Sans Serifs
-
57
Display & Mono
-
58
Picking Typefaces
-
59
Choosing Typefaces For A Project Part 1
-
60
Choosing Typefaces For A Project Part 2
-
61
Choosing Typefaces For A Project Part 3
-
62
Creating Our Own Type System
-
63
Color Schemes
-
64
Important Questions To Ask
-
65
Creating Color Palettes
-
66
Creating A Monochromatic Color Palette
-
67
Applying Our Color Palette
-
68
Expanding A Strict Color Palette
-
69
Creating Our Own Color Palette
-
70
What Are Forms + UI Elements
-
71
Best Practices For Forms
-
72
Best Practices For Inputs Part 1
-
73
Best Practices For Inputs Part 2
-
74
Best Practices For Inputs Part 3
-
75
Best Practices For Inputs Part 4
-
76
Best Practices For Buttons
-
77
Creating Components In Figma
-
78
Using Atomic Elements
-
79
Using Instances In Figma
-
80
Editing Instances
-
81
Responsive Components
-
82
Creating A Registration Form In Figma
-
83
Visual Assets Introduction
-
84
Working With Photos In Figma Part 1
-
85
Working With Photos In Figma Part 2
-
86
Working With Illustrations In Figma
-
87
Figma Plugins And Icons
-
88
Custom Icons
-
89
What Is Accessibility
-
90
Assistive Technologies
-
91
Visual Patterns For Accessibility Part 1
-
92
Tools To Make Your Design Accessible
-
93
Visual Patterns For Accessibility Part 2
SECTION 4: DESIGN EXPLORATION - APPLICATION DESIGN + DESIGN SYSTEMS
-
94
What Are Design Patterns
-
95
Why Are Design Patterns Valuable
-
96
How To Apply Design Patterns
-
97
Analyzing Design Patterns
-
98
Dissecting And Choosing Design Patterns
-
99
Mobile Design Best Practices Part 1
-
100
Mobile Design Best Practices Part 2
-
101
Design Fidelity
-
102
Style Exploration Part 1
-
103
Style Exploration Part 2
-
104
Style Exploration Part 3
-
105
Style Exploration Part 4
-
106
The Importance Of Motion
-
107
The Purpose Of Motion
-
108
Intro To Smart Animate
-
109
The Power Of Smart Animate
-
110
What Is A Microinteraction
-
111
Why Microinteractions Are Important
-
112
Creating Our Own Microinteraction Part 1
-
113
Creating Our Own Microinteraction Part 2
-
114
Using Figmotion Part 1
-
115
Using Figmotion Part 2
SECTION 5: PUTTING IT ALL TOGETHER - DESIGN SYSTEMS AND FINAL COMPOSITIONS
-
116
What Is A Design System
-
117
Foundation - Color
-
118
Foundation - Grids + Spacing
-
119
Foundation - Iconography
-
120
Foundation - Typography
-
121
Components - Button
-
122
Components - Inputs
-
123
Components - Cards
-
124
Recipes - Vertical Cards
-
125
Recipes - Search
-
126
Recipes - Order List
-
127
Using Our Design System Part 1
-
128
Using Our Design System Part 2
-
129
Using Our Design System Part 3
-
130
Final Prototypes Part 1
-
131
Final Prototypes Part 2
-
132
Final Prototypes Part 3
-
133
Final Prototypes Part 4
-
134
The Product Alignment Canvas
-
135
Project Goals
-
136
Target Users
-
137
User Journey Map
-
138
Risky Assumptions
-
139
What Is A User Story Map
-
140
Creating A User Story Map
-
141
Is Bruno Happy
-
142
Project Handoff
-
143
How To Export And Place Designs
-
144
Content For Your Portfolio
-
145
Where To Host Your Web Portfolio
-
146
Initial Setup - Figma Handoff
-
147
Build UI - Adding Image Assets
-
148
Build UI - Styling Image Assets
SECTION 6: BONUS
-
149
Browsing The Web
-
150
Breaking Google
-
151
The Internet Backbone
-
152
Traceroute
-
153
Developer Fundamentals I
-
154
What Does A Developer Do
-
155
WWW vs Internet
-
156
HTML, CSS, Javascript
-
157
Developer Fundamentals II
-
158
Developer History
-
159
Build Your First Website
-
160
Developer Fundamentals III
-
161
HTML Tags Part 1
-
162
HTML Tags Part 2
-
163
Self Closing HTML Tags
-
164
Anchor Tag
-
165
Q& A index.html
-
166
Q& A Relative Vs Absolute Path
-
167
HTML Forms Part 1
-
168
HTML Forms Part 2
-
169
Submitting A Form
-
170
HTML Forms Part 3
-
171
HTML vs HTML Part 5
-
172
Copy A Website
-
173
HTML Challenge
-
174
Your First CSS
-
175
CSS Properties
-
176
CSS Selectors
-
177
Text and Font
-
178
Images In CSS
-
179
Box Model
-
180
Px Vs Em Vs Rem
-
181
Critical Render Path
-
182
Flexbox
-
183
CSS 3
-
184
Responsive UI
-
185
Exercise Robot Animation
-
186
Bootstrap Introduction
-
187
Bootstrap
-
188
Bootstrap Grid
-
189
Exercise Startup Landing Page Part 1
-
190
Exercise Startup Landing Page Part 2
-
191
Exercise Startup Landing Page Part 3
-
192
Exercise Startup Landing Page Part 4
-
193
Exercise Startup Landing Page Part 5
-
194
EXER~1
-
195
EXER~2
-
196
EXER~3
-
197
Developer Fundamentals IV
-
198
Using Templates
-
199
Introduction To CSS Grid
-
200
CSS Grid vs Flexbox vs Bootstrap
-
201
CSS Grid Part 1
-
202
CSS Grid Part 2
-
203
CSS Grid Part 3
-
204
CSS Grid Part 4
-
205
CSS Grid Part 5
-
206
Exercise CSS Layout
-
207
Solution Navigation Bar Part 1
-
208
Solution Navigation Bar Part 2
-
209
Solution Cover
-
210
Solution Project Grid + Footer
-
211
Solution Prettify
-
212
The Truth About CSS
Stars 5
2
Stars 4
0
Stars 3
0
Stars 2
0
Stars 1
0
Google