We will learn how to use empty space to your advantage, work with contrast, professionally overlay images on top of each other, learn the intricacies and rules of web design, and much more!

Simple and clear work with fonts
We’ll cover everything you need to know about working with fonts, from where you can find the best fonts to how to install them! And of course, at the end of the course, you will no longer have the question of which font is best to choose for your website!

Let’s understand strange UX/UI topics
This course is aimed primarily at developing the skills of a User Interface designer, but of course, in the course we will touch on both sides of the profession, both UX – User Experience and UI – User Interface

Practice throughout the course
This course places a strong emphasis on practice. In each small lesson, without unnecessary chatter, we will step by step create 2 beautiful, unique projects that you can use in your portfolio as a web designer.

Responsive Design Skills Required
And of course, we will learn how to adapt websites for different devices, how to animate each element of the layout, and even learn how to create beautiful sliders and beautiful counter animations right in figma!

Let’s talk about communication with a potential customer and development in design
Additionally, we will talk about how to negotiate with a customer, how to develop in design, where to look for ideas, how to create original creative works, how to develop your own style and learn many places where designers and artists find inspiration!

Photoshop base for unique layouts
Of course, you won’t become a pro without minimal knowledge of image processing. And that’s why a bonus in this course will be a block where we will learn all the necessary knowledge about working in Photoshop.

Preparation for the course
Download materials
How to take the course
Stay in touch with me

Figma Basics
What are the dimensions of the site?
Creating a website frame
What is grid
Basics of working with Shapes\Images\Layers
Basics of working with text
Grouping layers and a little about presentation mode
How to save and transfer Figma files
Difference between UX and UI

Working with color
Selecting colors from images
PRACTICE. Pick a color from the image
What is HSB? Fine color adjustment
Project color selection tools
How to work with gradient
Rule of color proportions 60/30/10

Working with Images
The difference between raster and vector graphics
Choose high-quality images
How to Tint Images
Extreme pruning technique
Soft pruning technique
Working with icons
How to create your own icon
How to change shapes

AutoLayOut Basics
AutoLayout Basics
PRACTICE. AutoLayOut

Advanced work with shapes
How the pen tool works
PRACTICE. “Pen tool”
Making the next section of the site
Difference between frames and groups

Padding in web design
Indentation rules in web design
PRACTICE. Padding in web design
4px grid vs 8px grid

Effects and Styles
How the effects work
How styles work

Masks and plugins
How masks work
Additional practice on masks
Figure with image
How plugins work
We are finishing the site

Working with fonts
The importance of fonts
Font types
Where to get new fonts
How to choose fonts
PRACTICE. Choose fonts
Font settings
PRACTICE. Font settings

Preparing for a new project
How to create pages in a project
Brief with the customer
How to create a mood board
What is a site Wireframe
PRACTICE. Create your own mood board and wireframe

Design system
Does a designer need Photoshop?
How to purchase licensed Photoshop from Russia
What is a design system
Making a style sheet for typography
Finishing the style map
PRACTICE. Create your own design system

Components and options in figma
Making the next section of the site
How the components work
Organizing and storing components
How the options work
PRACTICE. Create your own options

In-depth work with AutoLayOut
How to create style subcategories
Creating the next section of the site
How to create a multi-level AutoLayOut
Use ready-made elements from other layouts
AutoLayOut Pro version
Making a blog page
How Min width / Max Width work
How absolute positioning works
We are finishing the site
PRACTICE. Create a website design

Adaptive design
Basics of constraints
How constraints work with grid
PRACTICE. Constraints
What is responsive design
What are DPI and PPI
We adapt the first page of the site
PRACTICE. Adapt the site

Speeding up work
Useful hotkeys
Useful plugins

Prototyping
Layout presentation mode
In-Depth Prototype Customizations
Basic animation in figma
How Bezier curves work
Work open overlay & scroll to
How swap overlay works
How After Delay works
How Smart Animate works
Animating the site menu
Prototyping components
Reset Position & Component state
Conclusion of the prototyping block

Paid or Free Figma?
Differences between paid and free figma

Export
Export images
How to work in a team

Bonus! Design tricks
Tricks with overlaying elements on top of each other
Identical elements on the page
Tricks with repetitions
Tricks with contrast
Tricks with empty space
How to develop in design

Bonus. Figma Jam
What is Figma Jam
Figma Jam Updates

Bonus! Working in Photoshop
Commercial break
Preparation of the program
Working with layers in Photoshop
Expanding the boundaries of images
Removing unnecessary things from photos
How to cut a person from one photo and paste him into another
How masks work in Photoshop
Exporting files from Photoshop
What’s next?