Бесплатный курс по UX/UI дизайну с нуля

Чтобы начать обучение, проходить тесты и отслеживать прогресс, вам нужно записаться на курс. Это бесплатно.

Мечтаете работать UX/UI-дизайнером, но не знаете, с чего начать? Этот бесплатный курс создан именно для вас! Вместе изучим базовую теорию и навыки, разберемся как и что делает дизайнер в повседневной работе и получим практический опыт, ведь я подготовила кучу домашних заданий после каждого урока. И, конечно, научимся работать с самым популярным в мире инструментом дизайнеров – Figma.

Этот курс будет полезен не только будущим дизайнерам, а и разработчикам, менеджерам проектов и всем, кто стремится расширить свой кругозор. Вы узнаете, как создавать удобные и привлекательные интерфейсы, не требуя художественных способностей – ведь UX/UI-дизайнер не обязательно художник!

Я сама сталкивалась с трудностями в начале своего пути: множество терминов, выбор инструментов и методов может сбить с толку. Именно поэтому я собрала для вас выдержку только самой важной информации в каждом из 13-ти уроков и практические советы, которые значительно ускорят ваш старт.

Привожу перечень всех преимуществ этого курса:

  • Этот курс бесплатный в отличие от некоторых других, которые стоят десятки тысяч гривен. Но тем не менее в нем я собрала только актуальную и полезную информацию (последнее обновление февраль 2025 года), которую я получила за годы практической работы.
  • Чтобы проверить свои знания и получить опыт, кроме прохождения тестов есть и домашние задания, которые нужно выполнять самостоятельно и публиковать для проверки в Telegram-сообществе. Там можно посмотреть примеры правильно выполненных домашних заданий, задать вопросы по уроку, попросить совета.
  • Обучение проходит тогда и так, как вам удобно, в вашем темпе. Нет никаких встреч с ответами на вопросы, ведь вы можете это сделать в любой момент.

Начните свое путешествие в мир дизайна уже сегодня и откройте для себя новые возможности! Нажмите кнопку Записаться на курс, чтобы начать обучение. Увидимся на первом уроке!

А если я вас еще не убедила, то предлагаю ознакомиться со структурой курса, которую приведено далее.

Подписывайтесь на меня в Instagram – @frusia.pro – будьте в курсе новых уроков, задавайте свои вопросы, а также вас ждет множество полезных постов о дизайне.

В этой вводной части на наглядных примерах будет рассказано и показано, что такое дизайн вообще и что он включает, вы познакомитесь с основными терминами, о которых все слышали, но никто не понимает.

  • Что такое дизайн? Определение и задачи дизайна. Почему важно окружение, обстоятельства и что такое контекст;
  • Что такое интерфейс? UI (User Interface) интерфейс пользователя. Элементы интерфейса пользователя;
  • Что такое UX, UI дизайн и в чем разница? UI–дизайн (User Interface Design). UX–дизайн (User Experience) или опыт взаимодействия;
  • Виды интерфейсов. Графический экранный интерфейс – основное поле работы UX/UI–дизайнера. Примеры необычных интерфейсов: символьный, жестовый, голосовой. Нейроинтерфейс будущего.

Схема уроку 1. Дизайн. Интерфейс. UX и UI

Создание сайта требует слаженной работы команды специалистов. Давайте разберемся, в какой последовательности и кем разрабатываются веб-сайты; какое место в этом процессе занимает UX/UI дизайн.

Хочу обратить внимание, что в этом уроке все написано максимально простым языком, чтобы было проще понять суть процесса. Когда это будет усвоено, я перейду к специальным терминам уже в следующем уроке.

  • Аналитика, сбор информации, написание технического задания. В каких случаях проводят исследования, кто такие бизнес-аналитики и кто пишет техническое задание проекта;
  • Поиск референсов, moodboards. Зачем угадывать предпочтения заказчиков и как это экономит бюджет. Behance и Dribbble;
  • UX-дизайн. Пользователи и их задачи. Экраны и схемы переходов. Рисование набросков и создание прототипа. Тестирование;
  • UI-дизайн. Визуальный стиль (цветовая гамма, шрифты, сетки). Интерактивный дизайн;
  • Презентация проекта. Как показать дизайн заказчику;
  • Экспорт ресурсов. Сохранение иконок, картинок и иллюстраций в отдельных файлах;
  • Верстка. HTML. CSS. JavaScript. Frontend-фреймворки. Bootstrap;
  • Программирование. Технологии backend-разработчиков. PHP. MySQL. Встроенные скриптовые языки графических редакторов;
  • Тестирование. Ручное и автоматическое тестирование;
  • Развертывание (Deploy). Как происходит развертывание сайта. Системные администраторы и devops-инженеры.

Схема уроку 2. Процесс создания веб-сайта

Урок 3. Дизайн-процесс и методы UX-дизайнера

С урока вы узнаете, кто такой UX-дизайнер и с чем его едят. Также там поэтапно раскрыт типичный дизайн-процесс в удобной подаче с кучей примеров и понятных аналогий. Из-за того, что тема может показаться довольно сложной для новичков, такая подача делает урок понятным и легким для усвоения.

  • Кто такой UX–дизайнер? Какую принципиальную задачу решает UX–дизайнер. Почему UX–дизайнер должен уметь и любить общаться?
  • Дизайн-процесс. Что это? Этапы дизайн–процесса и что такое дизайн–активности?
  • Этап 1 (Obsereve или Empathize). Наблюдение или сопереживание (эмпатия). Как понять, чем живет пользователь? Исследование предметной области (Domain Research). Интервью с пользователями (User Interview). Наблюдения (Field Studies);
  • Этап 2. Определение проблем (Define). Какие у пользователя задачи и цели? Формулирование проблемы (Problem Statement). Пользовательские истории (User Stories). Персоны (User Personas). Маппинг пути пользователя (Journey Mapping, Customer Journey Map).
  • Этап 3 (Ideate). Поиск решений. Какие есть варианты для решения поставленных задач? Как мы можем…? (How Might We). Мозговой штурм (Brainstorming). Эскизирование (Sketching).
  • Этап 4 (Prototype). Прототипирование. Воплощаем лучшие идеи. Юзер флоу (User Flow). Вайрфреймы (Wireframes). Интерактивные прототипы (Interactive Prototypes)
  • Этап 5 (Test). Тестирование. Проверяем, что работает. Партизанское тестирование (Guerilla Testing). Юзабилиити тестирование (Usability Testing).
  • При необходимости повторить.
  • Концепция двойного алмаза.
  • Как построить свой дизайн–процесс?
  • Типичный день UX–дизайнера.

Схема урока 3. Дизайн-процесс и методы UX-дизайнера

Урок 4. Прототипирование. Юзер флоу и вайрфреймы

Переходим от этапа исследования к воплощению первых вариантов будущего дизайна. Сначала это будет построение пути пользователя и экраны, где мы постараемся воплотить весь перечень необходимых функций. Вы научитесь строить юзер-флоу, вайрфреймы и интерактивные прототипы.

В конце урока будет полезное практическое задание, где вы сможете почувствовать себя ux-дизайнером.

  • Понятие Fidelity или точность дизайна. От общего к деталям.
  • User flow. Путь пользователя. Начало и конец пути. Действия. Решения и разветвления. Направление пути;
  • Исторический экскурс в диаграммы и блок-схемы. Flowcharts. Блок-схемы. Цель визуализации процессов;
  • Task flow. Концентрация на более узких задачах. Проработка деталей;
  • Wireframes. Low-fidelity wireframes. High-fidelity wireframes. Обозначение изображений и иконок. Обозначение текстовых блоков. Разница в детализации low и high wireframes;
  • Макеты UI-дизайна. Отличия от вайрфреймов. Приемы для создания эстетической привлекательности;
  • Wireflow и Screenflow. Юзер флоу + вайрфреймы или UI-дизайн. Отличия. Как обозначать последовательности действий;
  • Прототипы. Бумажные прототипы. Интерактивные прототипы. Как выбрать. Преимущества и недостатки.

Схема урока 4. Прототипирование. Юзер флоу и вайрфреймы

Урок 5. UI–дизайнер и смежные специальности

В пятом уроке мы рассмотрим работу UI-дизайнера через призму того, что ему нужно знать, чтобы ловко выполнять свою работу. Кроме того, погрузимся в типичный день UI-дизайнера, а также рассмотрим, что собой представляют смежные специальности.

Выполняйте домашнее задание, чтобы усвоить разницу между запросами на графический дизайн, UI-дизайн и моушн-дизайн.

  • Кто такой UI–дизайнер? Определение. Основная задача.
  • Типография. Основные понятия. Почему знания в типографии так важны;
  • Цвет в дизайне. Подходы и сервисы для генерации цветовых палитр;
  • Композиция и отступы. Варианты композиционных подходов. О правильных отступах и «воздухе» в дизайне;
  • Принципы дизайна. Баланс. Контраст. Иерархия. Согласованность. Воздух. Гештальт-принципы в дизайне;
  • Сетки. Колонковые сетки. Базовые сетки. Модульные сетки;
  • Работа с иконками и изображениями. Как работать и где брать иконки и фото;
  • Где брать идеи? О вдохновении и профессиональных дизайнерских соцсетях;
  • Создание финального дизайна страниц. Как проходит реальный процесс;
  • Создание адаптивного и респонсив дизайна. Почему адаптивы важны? Разница между адаптивным и респонсив-дизайном. Что нужно знать и уметь, чтобы без проблем создавать адаптивные версии макетов;
  • UI Kits и дизайн-системы. Раскрываем основы. Разница между UI Kits и дизайн-системами;
  • Типичный день UI-дизайнера. Как всё выглядит на практике;
  • Анимация элементов. Работа моушн-дизайнера. Где создавать анимацию. Микроанимации. Что делает моушн-дизайнер;
  • Задачи графического дизайнера. Краткий перечень задач, которые стоят перед графическим дизайнером.

Схема урока 5. UI–дизайнер и смежные специальности

Существует широкий спектр программ, которые используют UX/UI дизайнеры. Для начала и в большинстве случаев достаточно знать лишь Figma, но со временем вы будете развиваться и можете захотеть попробовать новые программы. Также знание некоторых программ из этого урока может быть условием для работы в определенной компании или с определенным заказчиком.

  • Инструменты UX-дизайнера . Figma. Adobe XD. Penpot. Axure. Framer X. Protopie;
  • Инструменты UI-дизайнера . Figma. Adobe XD. Framer X. Adobe Photoshop. Principle;
  • Инструменты графического дизайнера . Adobe Illustrator. Adobe Photoshop. CorelDRAW;
  • Виды графики . Векторная графика. Растровая графика;

Схема уроку 6. Инструменты дизайнера

Переходим к практической части. Как вы уже догадались, будем использовать Figma. Сначала рассмотрим, какие преимущества и недостатки есть у этого графического редактора, а потом начнем изучение, как с его помощью создавать дизайн.

Начинаем с азов. Сегодня мы изучим, как нарисовать прямоугольник, линию, стрелку и текстовый блок. Этого будет достаточно для создания таск флоу всех видов и простых страниц.

В конце урока, как всегда, на вас ждет много практических заданий для закрепления материала.

  • Почему стоит выбрать Figma. Имеет бесплатный доступ. Простой в освоении. Невзыскателен к компьютеру. Работает в браузере. Есть все необходимые функции;
  • Как начать пользоваться?. Регистрация. Начало работы;
  • Обзор интерфейса Figma. Главное меню. Панель инструментов. Рабочая область. Панель свойств. Панель слоев;
  • Рисуем прямоугольник. Шаг за шагом;
  • Изменение объектов. Выделение. Перемещение. Изменение размеров;
  • Навигация. Перемещение по рабочей области. Управление масштабом. Фокус на объекте;
  • Настройка свойств объекта. Позиция и размер. Фиксация пропорций. Угол поворота. Закругление углов. Цвет заливки. Параметры обводки;
  • Окно выбора цвета. Копирование и вставка значения цвета;
  • Добавляем текст. Задаем границы текстового блока. Параметры текста;
  • Рисуем линию и стрелку;
  • Зачем нужны слои. Упорядочивают и группируют объекты. Помогают выделить объекты. Определяют порядок рисования;
  • Полезные команды. Отменить последние действия. Сделать дубликат. Удалить объект. Выделяем несколько объектов сразу.

Схема урока 7. Основы Figma I

Продолжаем знакомство с основами Figma. Сегодня узнаем о новых приемах работы со слоями, в том числе как их выделять, перемещать, группировать, блокировать и скрывать.

Научимся вставлять растровое изображение в проект и узнаем, как работать с пипеткой, которая позволяет считывать код цвета из изображений и фигур.

Последний раздел с новыми командами касается выставления точных расстояний между объектами, что важно впоследствии при работе с сетками.

Этот урок расширяет наш арсенал дизайнера новыми приемами, которые ускоряют и упрощают процесс. Например, трудно представить работу с большим проектом без группировки слоев.

  • Группы. Создание и удаление группы. Свертывание и разворачивание группы. Вложенные группы. Перегруппировка;
  • Выделение слоев. Выбираем вложенный слой. Выбираем несколько слоев (новый способ). Выбираем диапазон слоев. Выбираем перекрытый слой. Снимаем выделение;
  • Работа с слоями. Блокировка и скрытие слоев. Копирование, вырезание и вставка слоя. Вставка в позицию другого объекта;
  • Названия слоев. Переименование слоев. Задавайте названия с содержанием;
  • Импорт изображений. Референсы и мудборды. Импорт из буфера обмена. Импорт из файла;
  • Инструмент пипетка. Быстрое присвоение цвета. Присвоение цвета пикселей изображения;
  • Полезные команды. Точное позиционирование. Как поделиться проектом.

Схема урока 8. Основы Figma II

В третьей части по основам Figma научимся работать с фреймами, которые еще называют артбордами, страницами и файлами, чтобы не заблудиться в структуре большого проекта. Посмотрим, насколько мощные возможности скрывает в себе фрейм, как сетки и колонки помогают распределить объекты и выставить отступы. Научимся пользоваться направляющими. Впервые познакомимся с ограничителями (constraints) и компонентами.

Вам больше не будут страшны большие проекты, вы сможете легко структурировать любой файл и быстро перемещаться его частями.

  • Фреймы. Сравнение с группами. Создание фрейма. Изменяем размер и заливку. Как поместить объект в середину фрейма. Простая маска – обрезаем содержимое фрейма;
  • Сетки и направляющие. Добавление сетки. Добавление и настройка колонок. Добавление рядов. Направляющие и линейка;
  • Примеры использования фреймов;
  • Поведение содержимого фрейма при изменении размера. Ограничители (Constraints). Горизонтальные ограничители. Вертикальные ограничители;
  • Первое знакомство с компонентами;
  • Работа с фреймами. Как подогнать размер фрейма под содержимое. Изменяем ориентацию фрейма;
  • Иерархия проекта. Страницы. Организация страниц. Файлы.

Схема урока 9. Основы Figma III

В следующей части научимся выравнивать объекты и распределять их в пространстве. Изучим новые фигуры: эллипс, многоугольник, звезду. Они не такие простые, как кажутся на первый взгляд.

Научимся экспортировать фреймы в графические файлы. Это позволит впоследствии поделиться ими с заказчиком или разработчиками. Оглядим популярные форматы изображений и поймем, в каких случаях их использовать.

  • Выравнивание. Одного объекта относительно другого. Нескольких объектов относительно другого. Группы объектов относительно другого с сохранением позиции. Выравнивание отдельных объектов. Одного внутри фрейма. Равномерное распределение;
  • Новые примитивы. Эллипс. Полигон. Звезда;
  • Примеры использования фреймов;
  • Экспорт дизайна. Как отметить слой для экспорта и сохранить его в файл. Форматы Png, Jpg, Svg, Pdf.

Схема уроку 10. Основи Figma VI

В пятой части основ Figma мы узнаем о булевых операциях и научимся использовать их на практике. Это незаменимый инструмент для работы с векторной графикой, особенно с иконками и логотипами.

  • О булевих операціях. Екскурс в математику і логіку;
  • Види булевих операцій. Об'єднання фігур або Union selection. Віднімання фігур або Subtract selection. Перетин фігур або Intersect selection. Виключення фігур або Exclude selection;
  • Обробка складних об'єктів. Перетворення у криві або Flatten selection.

Схема урока 11. Основы Figma V

В шестой части по основам Figma мы узнаем, как работать с градиентами. А именно поймем, какие существуют виды градиентов, как их создавать и настраивать на практике. Поговорим о плагинах для Figma и установим и используем несколько из них прямо во время урока.

  • Про градієнт. Определение градиента. Ключевые точки градиента. Замена заливки цвета на градиент;
  • Види градієнтів. Линейный градиент или Linear. Радиальный градиент или Radial. Угловой градиент или Angular. Градиент в виде алмаза или Diamond;
  • Налаштування градієнтів. Непрозрачность. Цвет ключевых точек и пипетка. Задаем код цвета. Добавляем ключевые точки. Угол и направление градиента;
  • Практичні приклади. Добавление объема фигуре. Имитация движения. Объемные элементы интерфейса. Градиент на фоне;
  • Плагіни у Figma. Как работать с плагинами. Инструкция по установке плагина;
  • Плагіни для градієнтів. Работа с плагином uiGradient. Плагин Easing Gradients. Плагин Chromatic Figma.

Схема уроку 12. Основи Figma VI

В седьмой части по основам Figma вы научитесь работать с кривыми на продвинутом уровне. И хотя вы уже знакомы с булевыми операциями, которые позволяют создавать сложные векторные фигуры, это лишь вершина айсберга. С помощью инструмента Pen (переводится как перо) можно воспроизвести любую форму.

  • Теория кривых. Кривые Безье. Виды кривых;
  • Рисуем линейную кривую. Инструмент Pen. Создаем простейшую кривую с нуля;
  • Редактирование кривых. Инструмент Move для перемещения точек. Инструмент Bend для управления кривизной. Инструмент Paint Bucket для заливки замкнутых контуров; Добавление и удаление точек;
  • Настройка кривых. Настройка обводки. Преобразование обводки в кривые. Закругление углов;
  • Сайты с бесплатными иконками. The Noun Project. Font Awesome. Cursor.in;
  • Экспорт в Svg. Пошаговая инструкция.

Схема урока 13. Основы Figma VII

Жду вас на обучении!

Подписывайтесь на меня в Instagram – @frusia.pro – будьте в курсе новых уроков, ставьте свои вопросы, а также на вас ждет множество полезных постов о дизайне.

Последнее обновление 3 мая 2025

Продолжить обучение

Оставьте комментарий

Поставьте ползунок в фиолетовую зону

Комментарии

Люба Фурсеєва29 января 2024 14:31  
Олександра, Анна та Iivha, дякую дуже!
Iivha8 декабря 2023 10:50  
Дякую, дуже струтурований матеріал. Давайте продовження.
Анна27 июня 2023 19:43  
Очень круто! Хотелось бы подробно изучить мобильный дизайн! Сейчас он самый востребованный, наверное)
Олександра18 мая 2023 14:36  
Чудовий курс, натрапила на цей сайт, коли шукала інструкції до використання Пера, з ним були ті ще біди! Але Ваш матеріал дуже допоміг, дякую!
У захваті від цього сайту, Ваших робіт і інстаграму, просто ВАУ!
Люба Фурсеєва7 марта 2023 10:53  
Уляна, будь ласка
Люба Фурсеєва7 марта 2023 10:53  
Олеся, будь ласка
Уляна5 марта 2023 22:09  
Чудова iнформація, дуже вдячна :)
Олеся10 февраля 2023 09:54  
Дякую за чудовий матеріал, Ваша робота неймовірна)
Люба Фурсеєва31 августа 2022 15:33  
Інна, будь ласка Так, продовження уроків буде, але вже у рамках окремих платних курсів. Слідкуйте за оновленнями в моєму профілі Інстаграм @frusia.pro
Інна31 августа 2022 00:10  
Дякую за вашу працю! Чи буде продовження курсу по урокам 11-14?
Люба Фурсеева12 октября 2021 13:05  
Вадим, Сергей, пожалуйста.
Эту страничку обязательно обновлю, пока руки не доходят. На сайте уже есть 6 частей только по Фигме.
Сергей12 октября 2021 12:58  
Любовь, спасибо большое за ваш труд! Все понятным и профессиональным языком объясняете. Как вижу, к сожалению, не удалось до конца расписать все уроки.. Наверное уже не планируете?
Вадим23 августа 2021 12:41  
Огромное спасибо. Очень круто!
Люба Фурсеева23 февраля 2021 23:10  
Елизавета, спасибо большое! Приятно, что вы ждете новые уроки. Все будет, следите за обновлениями
Люба Фурсеева23 февраля 2021 23:08  
Оксана, спасибо за отзыв! Стараюсь подавать материал максимально доступно
Люба Фурсеева22 февраля 2021 23:05  
Илья, спасибо! Сейчас, к сожалению, очень мало времени, буду стараться как можно быстрее написать новый урок. Следите за обновлениями
Елизавета22 февраля 2021 20:55  
Огромная благодарность за такой прекрасный структурированный материал. Четко и становится понятно в каких направлениях двигаться. В ожидании новых уроков!:)
Oksana18 февраля 2021 19:39  
Очень разжевано и понятно. Для новичка - супер!
С нетерпением жду новых уроков.
Илья16 февраля 2021 16:14  
Спасибо за статьи. Интересна статья "Основы UX/UI–дизайна". Когда примерно она будет выпущена не подскажите?
Люба Фурсеева16 февраля 2021 09:20  
Елена, спасибо за отзыв!
Елена15 февраля 2021 23:04  
Люба, спасибо Вам за Ваш труд и подробное описание, нахожусь на пути выбора, изучаю материалы по разным профессиям, у Вас нашла все ответы на мои вопросы.
Люба Фурсеева15 ноября 2020 00:35  
Вероника, большое спасибо!
Вероника11 ноября 2020 20:05  
Большое спасибо за доступные уроки!
жду 7 ой урок уже)
Вам удачи и успехов в работе !)
Люба Фурсеева26 августа 2020 16:23  
Ольга, большое спасибо за комментарий! Следующий урок в процессе написания, постараюсь закончить его в первой половине следующего месяца.
Ольга26 августа 2020 16:14  
Спасибо Вам ОГРОМНОЕ за такой подробный и структурированный ввод в профессию! Очень помогает в освоении. Подскажите пожалуйста, когда будут доступны для изучения другие ваши части?
Люба Фурсеева3 июня 2020 14:49  
Alex, спасибо!
Alex3 июня 2020 13:50  
Спасибо Вам за структурированную информацию!Всё очень понятно)
Люба Фурсеева2 июня 2020 20:52  
Илья, спасибо за ваш отзыв!
Илья2 июня 2020 19:13  
Потрясающая работа, Спасибо Вам большое!
Люба Фурсеева3 апреля 2020 01:27  
Вика, спасибо
Вика3 апреля 2020 01:24  
Круто структурированная информация, все просто и понятно)
Люба Фурсеева27 марта 2020 21:25  
Таня, спасибо! Следующие уроки уже в процессе написания.)
Таня27 марта 2020 19:18  
Спасибо большое за такое подробное и понятное раскрытие тем! Жду следующих уроков.

Чтобы начать обучение, проходить тесты и отслеживать прогресс, вам нужно записаться на курс. Это бесплатно.