Course Content
INTRODUCTION
0/1
INTRODUCTION
07:51
SKETCHING
0/7
SKETCHING_01
07:44
SKETCHING_02
11:23
SKETCHING_03
12:54
SKETCHING_04
12:09
SKETCHING_05
16:23
SKETCHING_06_Sketching user flows 4
14:39
SKETCHING_07_Sketching tips
08:54
INSPIRATION
0/2
How to stay inspired
07:04
How to find inspiration
15:41
INTRODUCTION TO FIGMA
0/8
Introducing Figma
04:17
Figma Dashboard
09:30
Figma Tools
13:30
Layers and Pages
09:13
The Top Bar
16:43
Design Properties
20:13
Prototyping in Figma
10:05
Exercise creating a responsive layout
17:56
User Flows
0/5
The Do_s and Dont_s
07:10
Speedup Workflow with Components
12:59
Creating own Userflows
13:35
Creating own Userflows 2
19:09
Creating own Userflows 3
15:50
SiteMaps
0/5
Creating a basic sitemap
10:55
Before you start
07:53
Creating a sitemap 1
24:28
Creating a sitemap 2
08:35
Before getting started with wireframes
06:23
Wireframes
0/6
What is a wireframe
12:52
How to create wireframes
06:38
Wireframes in figma
09:02
Creating our homepage
22:00
Creating product page
19:26
Creating the Cart page
12:01
Prototyping
0/6
Prototyping Basics in Figma
17:23
Prototyping Basics in Figma 2
08:10
Prototyping Basics in Figma 3
09:34
Prototyping Basics in Figma 4
10:41
Linking a Quick Userflow
12:35
Working on Small Interactions
13:42
FeedBack
0/1
Why is feedback important and how to work on them
07:11
Spacing and Grids
0/5
Grid
08:58
Grid Basics
11:50
Responsive Grids and Breakpoints
08:51
Creating own grid in figma
12:06
Grid Guidelines
07:09
Typography
0/5
Serif
08:13
Sans Serif
08:03
Display and Mono
11:02
Choosing a Typeface
07:19
Creating our own Type System
16:32
Color
0/7
Color Schemes
08:34
Important Questions to Ask
06:03
Creating Color Palletes
09:49
Creating a Monochromatic Color Pallete
06:30
Applying our Color pallete
13:39
Expanding a Strict Color Pallete
07:55
Creating our own Colour Pallete
14:13
Forms+UI Elements
0/13
What are forms and UI elements
06:42
Best practices for Forms
16:41
Best practices for Inputs
07:16
Best practices for Inputs 2
12:58
Best practices for Inputs 3
06:59
Best practices for Inputs 4
13:29
Best practices for Buttons
16:47
Creating components in Figma
05:39
Using Atomic Elements
08:16
Using Instances in Figma
06:00
Editing Instances
09:51
Responsive Components
09:38
Creating a Registration Form
32:37
Visual Assets
0/6
Visual Assets Introduction
08:02
Photos in Figma
18:41
Photos in Figma 2
10:57
Working with Developers
15:16
Figma Plugins and Icons
08:58
Custom Icons
18:24
Accessibility
0/3
Visual Patterns for Accessibilty
06:25
Tools to make Design Accessible
11:52
Visual Patterns for Accessibilty
06:25
Design Patterns
0/5
What are Design Patterns
10:35
Why are Design Patterns so Valuable
04:47
How to Apply Design Patterns
05:47
Analyzing Design Patterns
14:01
Analyzing, Dissecting and Choosing Design Patterns
14:56
Mobile Design
0/2
Mobile Design Best Practices
14:00
Best Practice Part 2
13:24
Visual style + Exploration
0/5
Design Fidelity
09:03
Style Exploration
10:49
Style Exploration 2
17:40
Style Exploration 3
15:05
Style Exploration 4
16:36
Motion
0/4
Importance of Motion
12:27
The Purpose of Motion
08:11
Intro to Smart Animate
16:50
The Power of Smart Animate
13:26
Micro interactions
0/6
What is a Microinteraction
14:45
Why are Microinteractions important
09:03
Creating our own Microinteraction
10:16
Creating our own Microinteraction Part 2
11:27
Figmotion
14:53
Using Figmotion 2
12:49
Design Systems
0/4
Components Cards
17:59
Vertical Cards
09:03
Recipes Search
05:20
Recipes Order List
16:48
Final Compositions
0/8
Using our Design System
20:03
Using our Design System 2(Part 1)
20:03
Using our Design System 2(Part 2)
10:54
Using our Design Systems 3
17:39
Final Prototypes
12:40
Final Prototypes 2
13:35
Final Prototypes 3
15:21
Final Prototypes 4
20:20
web portfolio
0/2
Where to host your web portfolio
09:44
How to place and export designs
10:11
Building out new website
0/3
Initial setup Figma Handoff
18:25
Build UI – Adding image assets
07:06
Build UI – Styling Image Assets
14:25
HTML
0/14
Build your First Website
19:48
Developer Fundamentals
07:49
HTML Tags
11:52
HTML Tags 2
03:06
Self Closing Tags
09:42
Anchor Tag
08:11
Index.html
01:52
Relative vs Absolute Path
03:53
Html Forms
13:45
Html Forms 2
04:02
Submitting a Form
10:25
HTML Tags 3
06:23
HTML vs HTML5
09:55
Copy a Website
02:47
CSS3
0/14
CSS INTRO
11:03
Your First Css Part 2
10:55
Part 3
06:32
Part 2 Selectors
17:27
CSS Properties
16:00
Selectors in CSS
11:59
Text and Font
10:25
Images in CSS
04:57
Box Model
11:29
Px vs em vs rem
07:35
Critical Render Path
08:43
Flexbpx
12:37
CSS3
12:06
Responsive UI
03:02
Bootstrap
0/10
Bootstrap Introduction
09:44
Bootstrap
13:45
Bootstrap Grid
10:33
Exercise_ Building our startup landing page part 1+part2
03:36
Exercise_ Startup landing page part3
08:20
Exercise_ Startup landing page part 4
06:52
Exercise_ Startup landing page part 5
08:16
Adding email subscribe form with mailchimp
06:51
Developer Fundamentals
07:49
Working with Templates
07:59
CSS Grid + CSS Layout
0/12
Overview
01:23
Grid vs Flexbox vs Bootstrap
08:20
CSS Grid 1
13:41
CSS Grid 2
05:04
CSS Grid 3
07:19
CSS Grid 4
07:32
CSS Grid 5
02:23
Solution Navigation bar
09:46
Solution Navigation bar 2
07:12
Solution Cover
03:29
Project Grid+Footer
11:22
Solution Prettify
07:21
Conclusion
0/1
Conclusion
00:51
UI/UX Designing

Previous
Next
0% Complete
Ask ChatGPT
Set ChatGPT API key
Find your Secret API key in your ChatGPT User settings and paste it here to connect ChatGPT with your Tutor LMS website.
×