Do you want to start studying and find a job in the niche of website and interface design? Then read the article below. Here I have collected a must-have for a future designer.

The material will also be very useful for programmers, layout designers, project managers and everyone who works in the IT field and wants to get to know UX/UI design.

When I was just starting out as a designer, it was very difficult for me to get used to dozens of terms, to understand what to learn first; when and what program to use. I will try to write this list and subsequent lessons for the same beginners as I was a few years ago. I will introduce you gradually and explain in simple language, showing everything on my fingers.

Answering the main question - Do I need to be able to draw to become a UX/UI designer?

—No! Designer ≠ artist

A separate material will be written for each topic and if it is already available, it will be marked with a green checkmark. Just click on the title with and explore.

Please leave comments, report typos and inaccuracies. I would love to hear your additions. Articles will be further updated based on your questions and suggestions. Enjoy your reading!

Design. Interface. UX and UI

In this introductory part, with illustrative examples, we will tell and show what design is in general and what it includes, get acquainted with the basic terms that everyone has heard about, but no one understands.

  • What is design? Definition and objectives of design. Why environment, circumstances and what is context are important;
  • What is an interface? UI (User Interface) user interface. UI elements;
  • 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 on-screen interface – the main field of work for a UX/UI designer. Examples of unusual interfaces: character, gesture, voice. Neural interface of the future.

Read the first lesson

Design. Interface. UX and UI

Website creation process< /h2>

In this part, we will figure out in what sequence and by whom web sites are developed; what place does UX / UI design take in this process.

  • Analytics, collecting information, writing technical specifications. In what cases is research carried out, who are business analysts and who writes the terms of reference for the project;
  • Search for references, moodboards. Why guess the preferences of customers and how it saves the budget. Behance and Dribbble;
  • UX–design. Users and their tasks. Screens and transition schemes. Drawing sketches and creating a prototype. Testing;
  • UI–design. Visual style (colors, fonts, grids). Interactive design;
  • Project presentation. How to show the design to the client;
  • Export resources. Saving icons, pictures and illustrations in separate files;
  • Layout. HTML. CSS. JavaScript. Frontend–frameworks. Bootstrap;
  • Programming. Technologies backend & ndash; developers. PHP. MySQL. Built-in scripting languages ​​of graphic editors;
  • Testing. Manual and automated testing;
  • Deploy. How the site is deployed. System administrators and devops–engineers.

Read lesson two

Website building process

Daily tasks for a UX/UI designer. Design Software

We look at the typical tasks of a UX/UI designer and touch a bit on the related area – graphic design that you will often cross paths with. We look at which applications are suitable for a particular type of design. We are getting acquainted with the new terminology that we touched on in previous lessons, but did not call a spade a spade.

  • The tasks of a UX designer. Creation of user flow. Drawing wireframes. Creating prototype. Usability testing;
  • UX designer tools. Figma. Moqups. Axure;
  • The tasks of a UI designer. Selection of color palette. Working with typography Selection, processing of icons and images. Creation of UI-kit. Page rendering. Adaptive and responsive design;
  • UI designer tools. Figma. sketch. xd;
  • Types of graphics. Vector graphics. Raster graphics;
  • Graphic Designer Tasks. Drawing icons. Drawing illustrations. Drawing banners;
  • Graphic Designer Tools. Illustrator. Photoshop.

Read Lesson Three

Designer Daily Tasks

Figma basics. Part 1

  • Why choose Figma. Free. Easy to learn. Undemanding to the computer. Works in the browser. There are all necessary functions;
  • How do I get started?. Registration. Getting Started;
  • An overview of the Figma interface. Main menu. Toolbar. Workspace. Properties panel. Layers panel;
  • Draw a rectangle. Step by step;
  • Change objects. Selection. Move. Resizing;
  • Navigation. Moving around the workspace. Scale control. Focus on the object;
  • Set object properties. position and size. Fixing proportions. Angle of rotation. Rounding corners. Fill color. Stroke options;
  • Color picker. Copy and paste a color value;
  • Add text. Set the borders of the text block. Text options;
  • Drawing a line and an arrow;
  • Why layers are needed. Organize and group objects. Helps to highlight objects. Define the drawing order;
  • Useful commands. Undo recent actions. Make a duplicate. Delete object. Selecting several objects at once.

Read lesson four

Figma Basics Part 1

Figma basics. Part 2

  • Groups. Creating and deleting a group. Collapsing and expanding a group. nested groups. Rearrangement;
  • Select layers. Select the nested layer. Select multiple layers (new way). Select a range of layers. Select the overlay layer. Remove selection;
  • Working with layers. Lock and hide layers. Copying, cutting and pasting a layer. Paste at the position of another object. ;
  • Layer names. Renaming layers. Give names with meaning;
  • Import images. References and moodboards. Import from clipboard. Import from file;
  • Pipette tool. Quick color assignment. Assigning color to image pixels;
  • Useful commands. Precise positioning. How to share a project.

Read lesson five

Figma Basics Part 2

Figma basics. Part 3

  • Frames. Comparison with groups. Frame creation. Change the size and fill. How to put an object inside a frame. Simple mask – clipping the contents of the frame;
  • Grids and guides. Adding a grid. Adding and configuring columns. Adding rows. Guides and ruler;
  • Frame examples;
  • Behavior of frame content when resized. Constraints Horizontal restraints. Vertical delimiters;
  • First introduction to components;
  • Working with frames. Fitting the frame size to the content. Change frame orientation;
  • Project hierarchy. Pages. Page organization. Files.

Figma Basics Part 3


Read lesson six

Figma basics. Part 4

The lesson is ready. The scheme will be added soon.


Read Lesson Seven

The basics of Figma. Part 5 (in progress)

  • Curves. Creation of curves. Types of corners. Corner control;
  • Boolean operations. Union, subtraction, intersection, exclusion of figures. Convert to curves;
  • Working with curves. Curve smoothing control. Convert text to curves. Convert strokes to outlines. Export to SVG;

Figma Basics Part 5

UX/UI design basics

  • Typography. Types of fonts. Rules for selecting font pairs. Sites with free fonts;
  • Color. Color representation models (RGB, CMYK). Anatomy of color (hue, lightness, saturation). Color circle. Color combinations (Similar colors, triad, split complementary colors);
  • Composition. Focal point. The rule of thirds. Free space. symmetrical balance. Asymmetrical balance;
  • Modular grids. Benefits of a grid. Column grid. Modular grid. 8 pixel grid;
  • Icons. Icon styles. Icon selection rules. Sites with free icons. Change icons for the project. Drawing unique icons;
  • Photos. Rules for choosing photos. Sites with free photos. Framing. Color correction. Deleting objects;
  • Visual styles. Skeuomorphism. Neomorphism (Neomorphism). Flat (Flat). Material design (Material Design). Fluent (Fluent);
  • Where to get ideas? Inspiration for the designer. Moodboards. Useful sites;
  • Creating the project structure. Mindmapping;
  • Prototyping. Making a simple prototype;
  • Working with meaning. Attention management. Visual storytelling;
  • Design for mobile devices. Responsive design. Responsive design.

UX/UI Design Basics

Advanced Figma

  • Registration Form Design — we perform a real task, real problems and their solution;
  • Components and styles. Color styles. Text styles. Object styles. Components. Making a UI kit;
  • Constraints. Types of constraints. Responsive Components;
  • Auto Layout. Automatic layout. Making a list of comments;
  • Prototyping. Triggers. Transitions. Animation;
  • Preparing resources. What the customer and developers expect. Export, points. Graphic file formats (jpeg, png, svg).

Advanced Figma

Portfolio and job search

  • Portfolio — what is it, why and how many works to exhibit? Which market to target, why do US customers pay 5-10 times more?
  • Where to get portfolio work — making orders for fictitious clients, doing free test tasks on Upwork.
  • Where to put your portfolio — social media, personal website, Behance, Dribbble.
  • What is freelancing — remote work for customers from anywhere in the world.
  • Overview of popular freelance exchanges — Upwork, FL.ru.
  • Work for a company in the office or remotely — pros and cons, job search sites.

Portfolio & Job Search

Your feedback is needed!

Each of the topics above will be covered in a separate lesson on this site. Open to suggestions to write about other topics.

Follow me on Instagram – @frusia.pro – stay up to date with announcements of new lessons, check homework in stories, ask questions, and you will also find many useful posts about design.

Last updated 12 October 2020