Do you want to start learning and find a job in the field of web and interface design? Then read the article below. Here I have gathered must-haves for future designers.
The material will also be very useful for programmers, 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. This list and the following lessons I will try to write for beginners just like I was a few years ago. I will gradually introduce and explain in simple language, showing everything with examples.
Answering the main question – do you need to be able to draw to become a UX/UI designer?
—No! Designer ≠ artist
For each topic, a separate material will be written, and if it is already available, it will be marked with a green check mark. Just click on the heading with and study.
Please leave comments, report errors and inaccuracies. I would be happy to hear your additions. Articles will be updated based on your questions and suggestions. Happy reading!
- Lesson 1. Design. Interface. UX and UI
- Lesson 2. The process of creating a website
- Lesson 3. Daily tasks of a UX/UI designer. Design software
- Lesson 4. Basics of Figma I
- Lesson 5. Basics of Figma II
- Lesson 6. Basics of Figma III
- Lesson 7. Basics of Figma IV
- Lesson 8. Basics of Figma V
- Lesson 9. Basics of Figma VI
- Lesson 10. Basics of Figma VII
- Lesson 11. Basics of UI design
- Lesson 12. Basics of UX design
- Lesson 13. Advanced level of Figma
- Lesson 14. Portfolio and job search
- We need your feedback!
In this introduction, we will explain and demonstrate with clear examples what design is in general and what it includes. You will become familiar 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 screen 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 from 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 emphasize 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 grasped, I will move on to specialized terms in the next lesson.
- Analytics, information gathering, writing technical specifications. In which cases research is conducted, who business analysts are, and who writes the project's technical specifications;
- Searching for references, moodboards. Why it’s important to guess the preferences of clients and how it saves 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 showcase the design to the client;
- Resource export. Saving icons, images, and illustrations in separate files;
- Layout. HTML. CSS. JavaScript. Frontend frameworks. Bootstrap;
- Programming. Technologies for backend developers. PHP. MySQL. Embedded scripting languages of graphic editors;
- Testing. Manual and automated testing;
- Deploy. How website deployment occurs. System administrators and devops engineers.
We consider typical tasks of a UX/UI designer and touch a bit on the adjacent field – graphic design, with which you will often intersect. We look at which programs are suitable for a specific type of design. We get acquainted with new terminology that we touched upon in previous lessons but did not name things by their proper names.
- Tasks of a UX designer. Creating user flow. Drawing wireframes. Creating a prototype. Usability testing;
- Tools of a UX designer. Figma. Moqups. Axure;
- Tasks of a UI designer. Choosing a color palette. Working with typography. Selecting, processing icons and images. Creating a UI kit. Drawing pages. Adaptive and responsive design;
- Tools of a UI designer. Figma. Sketch. Xd;
- Types of graphics. Vector graphics. Raster graphics;
- Tasks of a graphic designer. Creating icons, illustrations. Drawing banners;
- Tools of a graphic designer. Illustrator. Photoshop.
Let's move on to the practical part. As you may have guessed, we will be using Figma. First, we will look at the advantages and disadvantages of this graphic editor, and then we will start learning how to create design 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 consolidate the material.
- Why choose Figma. Free. Easy to learn. Undemanding 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. Scale 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 borders of the text block. Text options;
- Drawing a line and arrow;
- Why layers are needed. Organize and group objects. Help highlight objects. Determine drawing order;
- Useful commands. Undo recent actions. Make 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 how to insert a raster image into a project and find out how to work with the eyedropper, which allows you to read the color code from images and shapes.
The last section on new commands relates to setting precise distances between objects, which is important when working with grids.
This lesson expands our designer toolkit with new techniques that speed up and simplify the process. For example, it is hard to imagine working on a large project without grouping layers.
- Groups. Creating and deleting a group. Collapsing and expanding a group. Nested groups. Re-grouping;
- Layer selection. Selecting a nested layer. Selecting multiple layers (new method). Selecting a range of layers. Selecting an overlapping layer. Deselecting;
- Working with layers. Locking and hiding layers. Copying, cutting, and pasting a layer. Pasting in the position of another object;
- Layer names. Renaming layers. Assign names with meaning;
- 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 known as artboards, pages, and files, to avoid getting lost in the structure of a large project. We will see 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 through its parts.
- Frames. Comparison with groups. Creating a frame. Changing size and fill. How to place an object in the center of a frame. Simple mask – cropping the contents 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 frame size to the content. Changing the frame's orientation;
- Project hierarchy. Pages. Organizing pages. Files.
In the next part, we will learn how 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 how to export frames to graphic files. This will allow us to share them with the client or developers later. 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 basics of Figma, 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. Conversion 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 what types of gradients exist, how to create and customize them in practice. We will discuss plugins for Figma and install and use several of them right during the lesson.
- About Gradient. Definition of gradient. Key points of gradient. Replacing solid color fill with 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. Three-dimensional interface elements. Gradient in the background;
- Plugins in Figma. How to work with plugins. Instructions for installing a plugin;
- Gradient Plugins. Working with the uiGradient plugin. Easing Gradients plugin. Chromatic Figma plugin.
In the seventh part on the basics of Figma, you will learn how to work with curves at an advanced level. And although you are already familiar with Boolean operations that 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. Corner rounding;
- Websites with Free Icons. The Noun Project. Font Awesome. Cursor.in;
- Exporting to Svg. Step-by-step instructions.
Basics of UI Design
- Typography. Types of fonts. Key concepts in typography. Rules for pairing fonts. Websites with free fonts;
- Color. Color representation models (RGB, CMYK). Anatomy of color (hue, lightness, saturation). Color wheel. Color combinations;
- Composition. Symmetrical and asymmetrical balance. Static and dynamic. Attention vectors;
- Design principles. Gestalt principles of design. A selection of other important principles and techniques.
- Modular grids. Advantages of grids. Column grid. Modular grid. 8-pixel grid;
- Icons. Icon styles. Rules for selecting icons. Websites with free icons. Changing icons for a project. Creating unique icons;
- Photographs. Rules for selecting photographs. Websites with free photographs. Cropping. Color correction. Object removal;
- Where to find ideas? Inspiration for designers. Mood board. Useful websites;
- Working with content. Managing attention. Visual storytelling;
- Design for mobile devices. Responsive design. Adaptive design.
Fundamentals of UX Design
- Basics of Design Thinking. UX Strategy;
- Creating Project Structure. Mindmapping;
- UX Research, Part 1: Competitor Analysis, Lean Canvas, User Persona;
- UX Research, Part 2: Customer Journey Map;
- Wireframing. Techniques and Tools;
- UX Testing: In-depth Interviews, Surveys, Card Sorting;
Advanced Figma Level
- Registration Form Design — we solve real tasks, real problems and their solutions;
- Components and Styles. Color styles. Text styles. Object styles. Components. Creating a UI-kit;
- Constraints. Types of constraints. Flexible components;
- Auto Layout. Automatic positioning. Creating a list of comments;
- Prototyping. Triggers. Transitions. Animation;
- Resource Preparation. What clients and developers expect. Export, points. Graphic file formats (jpeg, png, svg).
Portfolio and Job Search
- Portfolio — what is it, why is it needed, and how many works to showcase? Which market to target, why do clients from the USA pay 5-10 times more?
- Where to get works for the portfolio — we create orders for fictional clients, perform free test tasks on Upwork.
- Where to place the portfolio — social networks, personal website, Behance, Dribbble.
- What is freelancing — remote work for clients from anywhere on the planet.
- Overview of a popular freelance platform Upwork.
- Working for a company in an office or remotely — pros and cons, websites for job searching.
Follow me on Instagram – @frusia.pro – stay updated on new lesson announcements, watch homework checks in stories, ask questions, and you'll also find many useful posts about design.
Last updated April 20, 2022
Continue learning
Continue learning
Go to first lesson