This website uses cookies so that we can provide you with the best user experience possible. Cookie information is stored in your browser and performs functions such as recognising you when you return to our website and helping our team to understand which sections of the website you find most interesting and useful.
Figma for Web Design: Master UI/UX in Figma | A-Z Course
Learn Figma for UI work and modern web design: create beautiful responsive websites. Figma - the future of web design!
Create beautiful website designs in Figma
Transform the desktop version of the website to the mobile one
How to prepare the design for the client and coders
The most important design principles that can be applied to any web design project
How to start any website project the right way
Get inspiration & design resources - the correct way!
This course will teach you everything you need to know about modern web design and we’re going to use Figma, one of the best design programs. Here are some of the things that you’ll learn:
-
The course is beginner friendly – we’ll take it step by step and learn through fun exercises!
-
UI & UX – all the essential principles you have to know
-
Responsive design: transform the desktop version to the mobile version
-
How to prepare the design for coding: make coders & clients happy
-
Design principles that can be applied on any project
-
Find out what clients want from you – what assets/deliverables and in what format
About Chris Barin
I’m a professional web & app designer and I’ve been designing websites for over 10 years. I’ve freelanced, I’ve run my own design company, and I’m an entrepreneur in the e-commerce space. I know what clients want and I’ll share all my experience with you!
Why take this course?
-
You’ll work on real world projects that are actually live and they have visitors & clients;
-
Discover the best tips & tricks that will take you from beginner to advanced user in a very short time;
-
Explore case studies where I explain in detail the most common mistakes;
-
Get access to a Discord group filled with people that love web design – this is a free chat room where you can often find me;
Web design has changed my life in an incredible way – it helped me move out of my parents house, it gave me a wonderful career as a freelancer, I created a design company, but more than anything it made me confident. This is a life skill that you can depend on. I know that no matter what happens in my life, I can create value through my own two hands by designing beautiful websites. I know everything will be OK because of that. At the end of this course, I hope you’ll be as confident as I am. Let’s get to work!
Discover the most important things about Figma
-
1
Introduction -
2
Download all the resources here -
3
What is Figma and is it better than other design programs?
-
4
Your first website design
-
5
Solving your first website design
-
6
The welcome screen in Figma
-
7
Getting started with Figma
-
8
Best ways to move around in Figma
-
9
How to get help fast
-
10
Exercise: how to move elements around
-
11
Solving the exercise and a few pro tips
-
12
Discover Figma’s interface & why professionals use it
-
13
Contest 1: Your own mini website
-
14
Editing icons: colors & size
-
15
Here's why so many beginners give up
-
16
Conclusions
First web design project
-
17
Introduction
-
18
The biggest difference in Figma versus other programs
-
19
Here’s how you create buttons in Figma
-
20
The basics of working with color
-
21
How to work with color like a pro
-
22
How to add images: frames vs rectangles
-
23
Create a gallery / collage in Figma
-
24
Here are the 3 types of text in Figma
-
25
Discover the properties of text layers
-
26
How to work with text like a pro
-
27
Effects in Figma: blur, shadows & more
-
28
Everything you need to know about grids
-
29
An overview of components
-
30
Drafts & Projects in Figma
-
31
How to mask in Figma
-
32
Here’s what makes you a good web designer
-
33
Conclusions
The first key to great web design
-
34
Introduction
-
35
Set up the desktop version the correct way
-
36
Create the header
-
37
Create the main menu
-
38
Set up the search box
-
39
Create a dropdown menu
-
40
Create the most important item – the card
-
41
How to improve the cards
-
42
Set up the secondary navigation
-
43
Create the pagination
-
44
Create the foundation for the footer
-
45
Adding content in the footer
-
46
How to handle visual imperfections
-
47
Here’s what you need to remember
-
48
Contest 2: Your own blog design
The second key to great web design
-
49
Introduction
-
50
Best settings & website components
-
51
Case study: Non-standard layouts
-
52
Exercise: Create a standard website layout
-
53
How to size your web elements correctly
-
54
My formula for perfect text
-
55
Case study: text layers
-
56
What you need to know about color contrast
-
57
Case study: Colors – Part 1
-
58
Case study: Colors – Part 2
-
59
How to align elements in the hero area
-
60
3 rules for web design icons
-
61
Case Study: Visual Balance
-
62
Final thoughts
The third key to great web design
-
63
Introduction
-
64
What’s the point of the website?
-
65
The user versus the business owner
-
66
Analytics in web design
-
67
Templates & Website Builders – The web designer’s death?
-
68
Case Study: 4 versions of the same website
-
69
E-commerce homepage layout
-
70
E-commerce product details
-
71
E-commerce checkout
-
72
Why aren’t websites perfect?
-
73
Case studies: the client’s needs
-
74
Landing page vs a website
-
75
Lead generation in landing pages
-
76
Why landing pages have a bad reputation
-
77
Digital product landing page
-
78
Testing landing pages
-
79
Case study: my landing page
-
80
Final thoughts about the client’s needs
Redesign an e-commerce business
-
81
Introduction
-
82
What’s UX?
-
83
The best example of good UX and attention to detail
-
84
Improve the checkout process to double sales
-
85
Improve the mobile version to double sales
-
86
7 website tweaks that show attention to detail
-
87
Upgrading the mobile product page
-
88
Doing 1-on-1 sessions with a coder
-
89
Here's what you need to remember
You can view and review the lecture materials indefinitely, like an on-demand channel.
Definitely! If you have an internet connection, courses on Udemy are available on any device at any time. If you don't have an internet connection, some instructors also let their students download course lectures. That's up to the instructor though, so make sure you get on their good side!