Do you want to start learning and find a job in the field of website and interface design? I suggest you master the basic skills and understand what specific abilities are needed to enter this area.
The material will also be very useful for frontend and backend developers, project managers, and anyone working in the IT field who wants to get closer to UX/UI design.
When I first started my journey as a designer, it was very difficult for me to master dozens of terms, to understand what to learn first; when and which program to use. That’s why I decided to write a collection of free lessons that will help understand the field, what methods experienced designers use. And also to lay the foundational knowledge of one of the most popular graphic editors, Figma.
I answer the main question – do you need to know how to draw to become a UX/UI designer?
—No! Designer ≠ Artist
You will find the list of lessons and their structure below.
Please leave comments, report errors and inaccuracies. I would be happy to hear your additions. The course is updated periodically, so you can absorb only relevant information. Happy reading!
- Lesson 1. Design. Interface. UX and UI
- Lesson 2. The process of creating a website
- Lesson 3. Design process and methods of a UX designer
- Lesson 4. Prototyping. User flow and wireframes
- Lesson 5. UI designer and related specialties
- Lesson 6. Designer tools
- Lesson 7. Registration. Interface. First steps. Navigation
- Lesson 8. Groups. Layers. Eyedropper. Importing images
- Lesson 9. Frames. Grids. Guides. Components
- Lesson 10. Alignment. New primitives. Export
- Lesson 11. Boolean operations
- Lesson 12. Gradients. Plugins
- Lesson 13. Curves
In this introductory part, clear examples will illustrate and show what design is in general and what it includes; you will become acquainted with the main terms that everyone has heard of but no one understands.
- What is design? Definition and tasks of design. Why the environment, circumstances, and what context is important;
- What is an interface? UI (User Interface) user interface. Elements of the user interface;
- What is UX, UI design and what is the difference? UI–design (User Interface Design). UX–design (User Experience) or interaction experience;
- Types of interfaces. Graphical user interface – the main field of work for a UX/UI designer. Examples of unusual interfaces: symbolic, gesture, voice. The neurointerface of the future.
Creating a website requires coordinated work by a team of specialists. Let's figure out the sequence and who develops websites; what role UX/UI design plays in this process.
I want to point out that in this lesson everything is written in the simplest language possible to make it easier to understand the essence of the process. Once this is mastered, I will move on to specialized terms in the next lesson.
- Analytics, information gathering, writing technical specifications. In what cases research is conducted, who business analysts are, and who writes the project technical specifications;
- Searching for references, moodboards. Why guessing clients' preferences is important and how it saves the budget. Behance and Dribbble;
- UX design. Users and their tasks. Screens and transition schemes. Sketching and creating prototypes. Testing;
- UI design. Visual style (color palette, fonts, grids). Interactive design;
- Project presentation. How to present the design to the client;
- Exporting resources. Saving icons, images, and illustrations in separate files;
- Markup. HTML. CSS. JavaScript. Frontend frameworks. Bootstrap;
- Programming. Backend developer technologies. PHP. MySQL. Embedded scripting languages of graphic editors;
- Testing. Manual and automated testing;
- Deployment. How website deployment occurs. System administrators and devops engineers.
Lesson 3. Design Process and Methods of a UX Designer
In this lesson, you will learn who a UX designer is and what they do. It also outlines the typical design process in a convenient format with plenty of examples and clear analogies. Since the topic may seem quite complex for beginners, this presentation makes the lesson understandable and easy to grasp.
- Who is a UX designer? What fundamental task does a UX designer solve? Why should a UX designer be able to and enjoy communicating?
- Design process. What is it? Stages of the design process and what are design activities?
- Stage 1 (Observe or Empathize). Observation or empathy. How to understand what the user lives for? Domain Research. User Interview. Field Studies;
- Stage 2. Defining problems (Define). What tasks and goals does the user have? Problem Statement. User Stories. User Personas. Journey Mapping, Customer Journey Map.
- Stage 3 (Ideate). Finding solutions. What options are there to solve the given tasks? How Might We...? Brainstorming. Sketching.
- Stage 4 (Prototype). Prototyping. Bringing the best ideas to life. User Flow. Wireframes. Interactive Prototypes
- Stage 5 (Test). Testing. Checking what works. Guerilla Testing. Usability Testing.
- Repeat if necessary.
- Concept of the double diamond.
- How to build your design process?
- A typical day of a UX designer.
Lesson 4. Prototyping. User flow and wireframes
We move from the research stage to implementing the first versions of the future design. Initially, this will involve building the user journey and screens, where we will try to incorporate all the necessary features. You will learn to create user flows, wireframes, and interactive prototypes.
At the end of the lesson, there will be a useful practical task where you can feel like a UX designer.
- Concept of Fidelity or design accuracy. From general to details.
- User flow. User's path. Beginning and end of the path. Actions. Decisions and branches. Direction of the path;
- Historical overview of diagrams and flowcharts. Flowcharts. Diagrams. The goal of process visualization;
- Task flow. Focus on narrower tasks. Working through details;
- Wireframes. Low-fidelity wireframes. High-fidelity wireframes. Marking images and icons. Marking text blocks. The difference in detail between low and high wireframes;
- UI design mockups. Differences from wireframes. Techniques for creating aesthetic appeal;
- Wireflow and Screenflow. User flow + wireframes or UI design. Differences. How to indicate sequences of actions;
- Prototypes. Paper prototypes. Interactive prototypes. How to choose. Advantages and disadvantages.
Lesson 5. UI Designer and Related Professions
In the fifth lesson, we will explore the work of a UI designer through the lens of what they need to know to effectively perform their job. Additionally, we will dive into a typical day of a UI designer, as well as examine what related professions entail.
Complete the homework to understand the difference between requests for graphic design, UI design, and motion design.
- Who is a UI designer? Definition. Main task.
- Typography. Basic concepts. Why knowledge of typography is so important;
- Color in design. Approaches and services for generating color palettes;
- Composition and spacing. Options for compositional approaches. About proper spacing and "white space" in design;
- Design principles. Balance. Contrast. Hierarchy. Consistency. White space. Gestalt principles in design;
- Grids. Column grids. Basic grids. Modular grids;
- Working with icons and images. How to work with and where to find icons and photos;
- Where to find ideas? About inspiration and professional design social networks;
- Creating the final design of pages. How the real process takes place;
- Creating adaptive and responsive design. Why are adaptives important? The difference between adaptive and responsive design. What you need to know and be able to do to create adaptive versions of layouts without problems;
- UI Kits and design systems. Uncovering the basics. The difference between UI Kits and design systems;
- A typical day of a UI designer. How everything looks in practice;
- Animation of elements. The work of a motion designer. Where to create animations. Micro-animations. What a motion designer does;
- Tasks of a graphic designer. A brief list of tasks faced by a graphic designer.
There is a wide range of programs that UX/UI designers use. To start with, and in most cases, it is enough to know only Figma, but over time you will develop and may want to try new programs. Also, knowledge of some programs from this lesson may be a requirement for working at a certain company or with a certain client.
- UX Designer Tools . Figma. Adobe XD. Penpot. Axure. Framer X. Protopie;
- UI Designer Tools . Figma. Adobe XD. Framer X. Adobe Photoshop. Principle;
- Graphic Designer Tools . Adobe Illustrator. Adobe Photoshop. CorelDRAW;
- Types of Graphics . Vector Graphics. Raster Graphics;
Let's move on to the practical part. As you might have guessed, we will be using Figma. First, we will look at the advantages and disadvantages of this graphics editor, and then we will begin to learn how to create designs with its help.
We start with the basics. Today we will learn how to draw a rectangle, a line, an arrow, and a text block. This will be enough to create task flows of all kinds and simple pages.
At the end of the lesson, as always, there will be many practical tasks for you to reinforce the material.
- Why choose Figma. It has free access. Easy to learn. Not demanding on the computer. Works in the browser. Has all the necessary features;
- How to get started?. Registration. Getting started;
- Overview of the Figma interface. Main menu. Toolbar. Workspace. Properties panel. Layers panel;
- Drawing a rectangle. Step by step;
- Changing objects. Selection. Moving. Resizing;
- Navigation. Moving around the workspace. Zoom control. Focus on an object;
- Setting object properties. Position and size. Locking proportions. Rotation angle. Corner rounding. Fill color. Stroke options;
- Color picker window. Copying and pasting color value;
- Adding text. Setting the boundaries of the text block. Text options;
- Drawing a line and arrow;
- Why layers are needed. Organize and group objects. Help highlight objects. Determine the drawing order;
- Useful commands. Undo last actions. Create a duplicate. Delete an object. Select multiple objects at once.
We continue our introduction to the basics of Figma. Today we will learn about new techniques for working with layers, including how to select, move, group, lock, and hide them.
We will learn to insert a raster image into the project and discover how to use the eyedropper that allows us to read color codes from images and shapes.
The last section with new commands pertains to setting precise distances between objects, which is important later when working with grids.
This lesson expands our designer's toolkit with new techniques that speed up and simplify the process. For example, it's hard to imagine working on a large project without grouping layers.
- Groups. Creating and deleting a group. Collapsing and expanding a group. Nested groups. Reorganizing;
- Layer selection. Selecting a nested layer. Selecting multiple layers (new method). Selecting a range of layers. Selecting an overlapped layer. Deselecting;
- Working with layers. Locking and hiding layers. Copying, cutting, and pasting a layer. Inserting in the position of another object;
- Layer names. Renaming layers. Assign meaningful names;
- Image import. References and mood boards. Import from clipboard. Import from file;
- Eyedropper tool. Quick color assignment. Assigning color from image pixels;
- Useful commands. Precise positioning. How to share a project.
In the third part on the basics of Figma, we will learn to work with frames, which are also called artboards, pages, and files, to avoid getting lost in the structure of a large project. We will look at how powerful the capabilities of a frame are, how grids and columns help distribute objects and set margins. We will learn to use guides. For the first time, we will get acquainted with constraints and components.
You will no longer be afraid of large projects; you will be able to easily structure any file and quickly navigate its parts.
- Frames. Comparison with groups. Creating a frame. Resizing and filling. How to place an object in the center of a frame. Simple mask – cropping the content of the frame;
- Grids and guides. Adding a grid. Adding and adjusting columns. Adding rows. Guides and ruler;
- Examples of using frames;
- Frame content behavior when resizing. Constraints. Horizontal constraints. Vertical constraints;
- First acquaintance with components;
- Working with frames. How to adjust the size of the frame to the content. Changing the orientation of the frame;
- Project hierarchy. Pages. Organizing pages. Files.
In the next part, we will learn to align objects and distribute them in space. We will study new shapes: ellipse, polygon, star. They are not as simple as they seem at first glance.
We will learn to export frames to graphic files. This will allow us to share them with the client or developers later on. We will review popular image formats and understand in which cases to use them.
- Alignment. One object relative to another. Several objects relative to another. Groups of objects relative to another while maintaining position. Alignment of separate objects. One inside a frame. Even distribution;
- New primitives. Ellipse. Polygon. Star;
- Examples of using frames;
- Export design. How to mark a layer for export and save it to a file. Formats Png, Jpg, Svg, Pdf.
In the fifth part of the Figma basics, we will learn about boolean operations and how to use them in practice. This is an essential tool for working with vector graphics, especially with icons and logos.
- About Boolean Operations. An excursion into mathematics and logic;
- Types of Boolean Operations. Union of shapes or Union selection. Subtraction of shapes or Subtract selection. Intersection of shapes or Intersect selection. Exclusion of shapes or Exclude selection;
- Processing Complex Objects. Converting to curves or Flatten selection.
In the sixth part on the basics of Figma, we will learn how to work with gradients. Specifically, we will understand the types of gradients that exist, how to create and customize them in practice. We will talk about plugins for Figma and install and use a few of them right during the lesson.
- About Gradient. Definition of gradient. Key points of the gradient. Replacing solid color fill with a gradient;
- Types of Gradients. Linear gradient or Linear. Radial gradient or Radial. Angular gradient or Angular. Diamond gradient or Diamond;
- Gradient Settings. Opacity. Color of key points and eyedropper. Set color code. Add key points. Angle and direction of the gradient;
- Practical Examples. Adding volume to shapes. Simulating motion. Volumetric interface elements. Gradient in the background;
- Plugins in Figma. How to work with plugins. Instructions for installing a plugin;
- Plugins for Gradients. Working with the uiGradient plugin. Easing Gradients plugin. Chromatic Figma plugin.
In the seventh part on the basics of Figma, you will learn to work with curves at an advanced level. And although you are already familiar with Boolean operations, which allow you to create complex vector shapes, this is just the tip of the iceberg. With the Pen tool, you can recreate any shape.
- Curve Theory. Bézier curves. Types of curves;
- Drawing a Linear Curve. Pen Tool. Creating the simplest curve from scratch;
- Editing Curves. Move Tool for moving points. Bend Tool for controlling curvature. Paint Bucket Tool for filling closed shapes; Adding and removing points;
- Adjusting Curves. Stroke settings. Converting strokes to curves. Rounding corners;
- Websites with Free Icons. The Noun Project. Font Awesome. Cursor.in;
- Exporting to Svg. Step-by-step guide.
Follow me on Instagram – @frusia.pro – stay updated on announcements of new lessons, watch homework checks in stories, ask questions, and you can also look forward to many useful posts about design.
Last updated on February 18, 2025
Continue learning
Continue learning
Go to first lesson