UI/UX Designing
Categories: UI/UX design
About Course
UI/UX is going to be the hottest skill of coming decade
Why I am confident about the above statement?
Just go and take a look of the initial UI/UX of Facebook, Amazon, google and you will realise that how can somebody browse those shabby looking websites and even purchase from them. And see their UI/UX now, it’s like the smoothest ever experience. And they are still continuosly improving it, you can’t even imagine how the sites would look after a decade.
So it’s clear that a lot of investment is being done in UI/UX and trust me it is that skill which can make people buy a bad product over a valuable product.
Let me confess one more thing. You can’t learn UI/UX without actually implementing and brainstorming the things and that’s why in this course we have focused a lot on projects and live implications.
Trust me this is the only course you need to master UI/UX, enough for now I will see you inside the course.
All the best!
What Will You Learn?
- Learn to create stunning UI/UX designs for any website
- Get hired as a UI/UX designer.
- Build amazing portfolio with great and extensive designs
- Convert your awesome design to code with help of HTML/CSS.
- Get high paying freelance projects for UI/UX.
- Master Web Design and App Design both in this course.
Course Content
INTRODUCTION
-
07:51
SKETCHING
-
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
-
How to stay inspired
07:04 -
How to find inspiration
15:41
INTRODUCTION TO FIGMA
-
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
-
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
-
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
-
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
-
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
-
Why is feedback important and how to work on them
07:11
Spacing and Grids
-
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
-
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
-
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
-
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
-
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
-
Visual Patterns for Accessibilty
06:25 -
Tools to make Design Accessible
11:52 -
Visual Patterns for Accessibilty
06:25
Design Patterns
-
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
-
Mobile Design Best Practices
14:00 -
Best Practice Part 2
13:24
Visual style + Exploration
-
Design Fidelity
09:03 -
Style Exploration
10:49 -
Style Exploration 2
17:40 -
Style Exploration 3
15:05 -
Style Exploration 4
16:36
Motion
-
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
-
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
-
Components Cards
17:59 -
Vertical Cards
09:03 -
Recipes Search
05:20 -
Recipes Order List
16:48
Final Compositions
-
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
-
Where to host your web portfolio
09:44 -
How to place and export designs
10:11
Building out new website
-
Initial setup Figma Handoff
18:25 -
Build UI – Adding image assets
07:06 -
Build UI – Styling Image Assets
14:25
HTML
-
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
-
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
-
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
-
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
-
Conclusion
00:51
