About Course
This course is for absolute beginners in design, so you do not need to have any knowledge to take this course! Together, we will go the way – from installing the Figma program to the level of a UI designer who can confidently take freelance orders and be proud of his work!
We will start with the very basics and together, step by step, we will learn all the necessary Figma tools, so that at the end of the course, you will feel like a professional! We will become pros in color selection, learn how to combine any picture with a background on our website and, of course, learn how to choose beautiful complementary colors for any elements on our website, like real colorists! Let’s learn a lot of tricks for working with images, such as extreme cropping, soft cropping, working with photo contrast and which image is best to choose for your site! And of course we will find out many places where you can find the perfect photo for your work! Of course, 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! 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!
What Will You Learn?
- You will learn all Figma tools
- You will learn modern techniques and design techniques
- You will learn the basics of Photoshop
- You will learn more about the profession of UX UI designer
- You will learn how to work with images in Figma
- You will learn to choose the right colors for your websites
- You will learn how to choose the right fonts for your websites
- You will learn how to work with contrast on web pages
- You will learn how to manage white space on web pages.
- You will learn how to combine elements on web pages
- You will learn what responsive design is
- You will learn how to adapt it to any mobile device, any website.
- You will understand how to negotiate with the customer
- You will learn how to draw up a brief with a client
- You will learn how to create Wireframes
- You will learn how to speed up your work in Figma
- You will learn image cropping techniques
- You will learn how to remove unwanted elements from images in Photoshop
- You'll learn how to push the boundaries of images in Photoshop.
- You will learn how to cut a person from one image and paste it into another
Course Content
Introduction
-
Introduction
-
Some technical questions
-
Downloading Figma and course materials
-
Stay in touch with me
Figma Basics
-
We create the first layout, find out the dimensions of the site
-
What is a Grid system? Working with Guide Grids
-
A little about “Wireframe” or “site framework”
-
Image Basics
-
Basic work with text
-
Working with the hierarchy of elements in a document
-
Hello from the future! Several problems that may arise.
-
What are UX and UI
Working with color
-
How to Borrow Color from Images
-
Practice: how to select colors from images
-
PRACTICE: Choose the right colors
-
In-depth work with color + HSB
-
Additional resources for working with color + in-depth work with shapes
-
How to use a gradient
-
Where to look for inspiration and how to borrow colors from other designers
Working with Images
-
How to increase the contrast of a photo
-
How to tint and darken photos in practice
-
Extreme image cropping technique
-
Soft image cropping technique
-
Soft pruning practice
-
Practice: Soft Pruning
-
Remove unnecessary background
-
Choose cool photos
-
How to work with icons
-
How to create your own icon
-
Creating a button and working with effects
-
Understanding image formats
Work with text
-
In-depth work with text
-
Why fonts are important
-
Main font types
-
Where to look for fonts – 1
-
Where to look for fonts – 2
-
Fish text + plugin installation
-
Practice finding fonts
-
PRACTICE: Finding fonts
-
How to use font customization in design
-
Create a site style sheet
-
TECHNICAL VIDEO: We continue to create the layout
Masks / Lines / Pen and Pencil
-
How to work with layer masks
-
How to work with lines
-
Pen practice
-
PRACTICE: Working with a pen
-
Finishing the portfolio website
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
New project – Preparation
-
A few words and let’s continue!
-
Brief with the customer
-
Create a Mood Board
-
How to share a project
-
What is Figma Jam
-
Recent Figma Jam updates
-
Creating a Wireframe for a new project, part 1
-
Creating a Wireframe for a new project, part 2
-
Creating a Wireframe for a new project, part 3
-
Create a wireframe
-
PRACTICE: Create a wireframe
Introduction to Responsive Design
-
Introduction to constraints
-
Constraints + grid
-
Difference between frames and groups
-
Applying Constraints to Portfolio Layout
-
Practice: Constraints on a portfolio layout
-
PRACTICE: Constraints + Blog Layout
Additional Figma Features
-
How to work with components
-
How to work with Auto lay out
-
Auto Lay out update 05.2023
Styling the layout
-
Preface to the block
-
Styling the layout part 1
-
Styling the layout part 2
-
Selecting fonts
-
Styling the layout part 3
-
Styling the layout part 4
-
Practice: Styling the remaining 2 pages of the site
-
PRACTICE: Styling the remaining 2 pages
Adaptive design
-
Responsive Design Theory
-
Adaptive design for tablet part 1
-
Responsive blog design part 2
Accelerate work processes
-
Hotkeys
-
How to create components using plugins
-
Fast adaptive
-
Useful plugins
-
Practice: Accelerating the creation of a mobile version of the site
-
PRACTICE: Accelerating the creation of a mobile version of the site
Prototyping
-
Prototyping Basics
-
Advanced prototyping settings
-
Animating the tooltip
-
Animating the mobile version of the menu
-
Animating buttons
-
Animating a hand slider
-
Animating the automatic slider
-
Animating a beautiful counter using “smart animation”
-
How prototypes interact with components
-
Variants in components
Libraries
-
The difference between the paid and free version of the Figma program
-
How to work with Libraries
Export
-
Exporting files from Figma
-
Transfer to development
Working in Photoshop
-
How to purchase licensed Photoshop
-
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
Student Ratings & Reviews
