Мечтаете работать UX/UI-дизайнером, но не знаете, с чего начать? Этот бесплатный курс создан именно для вас! Вместе изучим базовую теорию и навыки, разберемся как и что делает дизайнер в повседневной работе и получим практический опыт, ведь я подготовила кучу домашних заданий после каждого урока. И, конечно, научимся работать с самым популярным в мире инструментом дизайнеров – Figma.
Этот курс будет полезен не только будущим дизайнерам, а и разработчикам, менеджерам проектов и всем, кто стремится расширить свой кругозор. Вы узнаете, как создавать удобные и привлекательные интерфейсы, не требуя художественных способностей – ведь UX/UI-дизайнер не обязательно художник!
Я сама сталкивалась с трудностями в начале своего пути: множество терминов, выбор инструментов и методов может сбить с толку. Именно поэтому я собрала для вас выдержку только самой важной информации в каждом из 13-ти уроков и практические советы, которые значительно ускорят ваш старт.
Преимущества курса
- Этот курс бесплатный в отличие от некоторых других, которые стоят десятки тысяч гривен. Но тем не менее в нем я собрала только актуальную и полезную информацию (последнее обновление февраль 2025 года), которую я получила за годы практической работы.
- Чтобы проверить свои знания и получить опыт, кроме прохождения тестов есть и домашние задания, которые нужно выполнять самостоятельно и публиковать для проверки в Telegram-сообществе. Там можно посмотреть примеры правильно выполненных домашних заданий, задать вопросы по уроку, попросить совета.
- Обучение проходит тогда и так, как вам удобно, в вашем темпе. Нет никаких встреч с ответами на вопросы, ведь вы можете это сделать в любой момент.
Начните свое путешествие в мир дизайна уже сегодня и откройте для себя новые возможности! Нажмите кнопку Записаться на курс, чтобы начать обучение. Увидимся на первом уроке!
А если я вас еще не убедила, то предлагаю ознакомиться со структурой курса, которую приведено далее.
Подписывайтесь на меня в Instagram – @frusia.pro – будьте в курсе новых уроков, задавайте свои вопросы, а также вас ждет множество полезных постов о дизайне.
- Урок 1. Дизайн. Интерфейс. UX и UI
- Урок 2. Процесс создания веб-сайта
- Урок 3. Дизайн-процесс и методы UX-дизайнера
- Урок 4. Прототипирование. Юзер флоу и вайрфреймы
- Урок 5. UI-дизайнер и смежные специальности
- Урок 6. Инструменты дизайнера
- Урок 7. Регистрация. Интерфейс. Первые шаги. Навигация
- Урок 8. Урок 8. Группы. Слои. Пипетка. Импортирование изображений
- Урок 9. Фреймы. Сетки. Направляющие. Компоненты
- Урок 10. Выравнивание. Новые примитивы. Экспорт
- Урок 11. Булевы операции
- Урок 12. Градиенты. Плагины
- Урок 13. Кривые
В этой вводной части на наглядных примерах будет рассказано и показано, что такое дизайн вообще и что он включает, вы познакомитесь с основными терминами, о которых все слышали, но никто не понимает.
- Что такое дизайн? Определение и задачи дизайна. Почему важно окружение, обстоятельства и что такое контекст;
- Что такое интерфейс? UI (User Interface) интерфейс пользователя. Элементы интерфейса пользователя;
- Что такое UX, UI дизайн и в чем разница? UI–дизайн (User Interface Design). UX–дизайн (User Experience) или опыт взаимодействия;
- Виды интерфейсов. Графический экранный интерфейс – основное поле работы UX/UI–дизайнера. Примеры необычных интерфейсов: символьный, жестовый, голосовой. Нейроинтерфейс будущего.
Создание сайта требует слаженной работы команды специалистов. Давайте разберемся, в какой последовательности и кем разрабатываются веб-сайты; какое место в этом процессе занимает UX/UI дизайн.
Хочу обратить внимание, что в этом уроке все написано максимально простым языком, чтобы было проще понять суть процесса. Когда это будет усвоено, я перейду к специальным терминам уже в следующем уроке.
- Аналитика, сбор информации, написание технического задания. В каких случаях проводят исследования, кто такие бизнес-аналитики и кто пишет техническое задание проекта;
- Поиск референсов, moodboards. Зачем угадывать предпочтения заказчиков и как это экономит бюджет. Behance и Dribbble;
- UX-дизайн. Пользователи и их задачи. Экраны и схемы переходов. Рисование набросков и создание прототипа. Тестирование;
- UI-дизайн. Визуальный стиль (цветовая гамма, шрифты, сетки). Интерактивный дизайн;
- Презентация проекта. Как показать дизайн заказчику;
- Экспорт ресурсов. Сохранение иконок, картинок и иллюстраций в отдельных файлах;
- Верстка. HTML. CSS. JavaScript. Frontend-фреймворки. Bootstrap;
- Программирование. Технологии backend-разработчиков. PHP. MySQL. Встроенные скриптовые языки графических редакторов;
- Тестирование. Ручное и автоматическое тестирование;
- Развертывание (Deploy). Как происходит развертывание сайта. Системные администраторы и devops-инженеры.
Урок 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–дизайнера.
Урок 4. Прототипирование. Юзер флоу и вайрфреймы
Переходим от этапа исследования к воплощению первых вариантов будущего дизайна. Сначала это будет построение пути пользователя и экраны, где мы постараемся воплотить весь перечень необходимых функций. Вы научитесь строить юзер-флоу, вайрфреймы и интерактивные прототипы.
В конце урока будет полезное практическое задание, где вы сможете почувствовать себя ux-дизайнером.
- Понятие Fidelity или точность дизайна. От общего к деталям.
- User flow. Путь пользователя. Начало и конец пути. Действия. Решения и разветвления. Направление пути;
- Исторический экскурс в диаграммы и блок-схемы. Flowcharts. Блок-схемы. Цель визуализации процессов;
- Task flow. Концентрация на более узких задачах. Проработка деталей;
- Wireframes. Low-fidelity wireframes. High-fidelity wireframes. Обозначение изображений и иконок. Обозначение текстовых блоков. Разница в детализации low и high wireframes;
- Макеты UI-дизайна. Отличия от вайрфреймов. Приемы для создания эстетической привлекательности;
- Wireflow и Screenflow. Юзер флоу + вайрфреймы или UI-дизайн. Отличия. Как обозначать последовательности действий;
- Прототипы. Бумажные прототипы. Интерактивные прототипы. Как выбрать. Преимущества и недостатки.
Урок 5. UI–дизайнер и смежные специальности
В пятом уроке мы рассмотрим работу UI-дизайнера через призму того, что ему нужно знать, чтобы ловко выполнять свою работу. Кроме того, погрузимся в типичный день UI-дизайнера, а также рассмотрим, что собой представляют смежные специальности.
Выполняйте домашнее задание, чтобы усвоить разницу между запросами на графический дизайн, UI-дизайн и моушн-дизайн.
- Кто такой UI–дизайнер? Определение. Основная задача.
- Типография. Основные понятия. Почему знания в типографии так важны;
- Цвет в дизайне. Подходы и сервисы для генерации цветовых палитр;
- Композиция и отступы. Варианты композиционных подходов. О правильных отступах и «воздухе» в дизайне;
- Принципы дизайна. Баланс. Контраст. Иерархия. Согласованность. Воздух. Гештальт-принципы в дизайне;
- Сетки. Колонковые сетки. Базовые сетки. Модульные сетки;
- Работа с иконками и изображениями. Как работать и где брать иконки и фото;
- Где брать идеи? О вдохновении и профессиональных дизайнерских соцсетях;
- Создание финального дизайна страниц. Как проходит реальный процесс;
- Создание адаптивного и респонсив дизайна. Почему адаптивы важны? Разница между адаптивным и респонсив-дизайном. Что нужно знать и уметь, чтобы без проблем создавать адаптивные версии макетов;
- UI Kits и дизайн-системы. Раскрываем основы. Разница между UI Kits и дизайн-системами;
- Типичный день 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;
- Виды графики . Векторная графика. Растровая графика;
Переходим к практической части. Как вы уже догадались, будем использовать Figma. Сначала рассмотрим, какие преимущества и недостатки есть у этого графического редактора, а потом начнем изучение, как с его помощью создавать дизайн.
Начинаем с азов. Сегодня мы изучим, как нарисовать прямоугольник, линию, стрелку и текстовый блок. Этого будет достаточно для создания таск флоу всех видов и простых страниц.
В конце урока, как всегда, на вас ждет много практических заданий для закрепления материала.
- Почему стоит выбрать Figma. Имеет бесплатный доступ. Простой в освоении. Невзыскателен к компьютеру. Работает в браузере. Есть все необходимые функции;
- Как начать пользоваться?. Регистрация. Начало работы;
- Обзор интерфейса Figma. Главное меню. Панель инструментов. Рабочая область. Панель свойств. Панель слоев;
- Рисуем прямоугольник. Шаг за шагом;
- Изменение объектов. Выделение. Перемещение. Изменение размеров;
- Навигация. Перемещение по рабочей области. Управление масштабом. Фокус на объекте;
- Настройка свойств объекта. Позиция и размер. Фиксация пропорций. Угол поворота. Закругление углов. Цвет заливки. Параметры обводки;
- Окно выбора цвета. Копирование и вставка значения цвета;
- Добавляем текст. Задаем границы текстового блока. Параметры текста;
- Рисуем линию и стрелку;
- Зачем нужны слои. Упорядочивают и группируют объекты. Помогают выделить объекты. Определяют порядок рисования;
- Полезные команды. Отменить последние действия. Сделать дубликат. Удалить объект. Выделяем несколько объектов сразу.
Продолжаем знакомство с основами Figma. Сегодня узнаем о новых приемах работы со слоями, в том числе как их выделять, перемещать, группировать, блокировать и скрывать.
Научимся вставлять растровое изображение в проект и узнаем, как работать с пипеткой, которая позволяет считывать код цвета из изображений и фигур.
Последний раздел с новыми командами касается выставления точных расстояний между объектами, что важно впоследствии при работе с сетками.
Этот урок расширяет наш арсенал дизайнера новыми приемами, которые ускоряют и упрощают процесс. Например, трудно представить работу с большим проектом без группировки слоев.
- Группы. Создание и удаление группы. Свертывание и разворачивание группы. Вложенные группы. Перегруппировка;
- Выделение слоев. Выбираем вложенный слой. Выбираем несколько слоев (новый способ). Выбираем диапазон слоев. Выбираем перекрытый слой. Снимаем выделение;
- Работа с слоями. Блокировка и скрытие слоев. Копирование, вырезание и вставка слоя. Вставка в позицию другого объекта;
- Названия слоев. Переименование слоев. Задавайте названия с содержанием;
- Импорт изображений. Референсы и мудборды. Импорт из буфера обмена. Импорт из файла;
- Инструмент пипетка. Быстрое присвоение цвета. Присвоение цвета пикселей изображения;
- Полезные команды. Точное позиционирование. Как поделиться проектом.
В третьей части по основам Figma научимся работать с фреймами, которые еще называют артбордами, страницами и файлами, чтобы не заблудиться в структуре большого проекта. Посмотрим, насколько мощные возможности скрывает в себе фрейм, как сетки и колонки помогают распределить объекты и выставить отступы. Научимся пользоваться направляющими. Впервые познакомимся с ограничителями (constraints) и компонентами.
Вам больше не будут страшны большие проекты, вы сможете легко структурировать любой файл и быстро перемещаться его частями.
- Фреймы. Сравнение с группами. Создание фрейма. Изменяем размер и заливку. Как поместить объект в середину фрейма. Простая маска – обрезаем содержимое фрейма;
- Сетки и направляющие. Добавление сетки. Добавление и настройка колонок. Добавление рядов. Направляющие и линейка;
- Примеры использования фреймов;
- Поведение содержимого фрейма при изменении размера. Ограничители (Constraints). Горизонтальные ограничители. Вертикальные ограничители;
- Первое знакомство с компонентами;
- Работа с фреймами. Как подогнать размер фрейма под содержимое. Изменяем ориентацию фрейма;
- Иерархия проекта. Страницы. Организация страниц. Файлы.
В следующей части научимся выравнивать объекты и распределять их в пространстве. Изучим новые фигуры: эллипс, многоугольник, звезду. Они не такие простые, как кажутся на первый взгляд.
Научимся экспортировать фреймы в графические файлы. Это позволит впоследствии поделиться ими с заказчиком или разработчиками. Оглядим популярные форматы изображений и поймем, в каких случаях их использовать.
- Выравнивание. Одного объекта относительно другого. Нескольких объектов относительно другого. Группы объектов относительно другого с сохранением позиции. Выравнивание отдельных объектов. Одного внутри фрейма. Равномерное распределение;
- Новые примитивы. Эллипс. Полигон. Звезда;
- Примеры использования фреймов;
- Экспорт дизайна. Как отметить слой для экспорта и сохранить его в файл. Форматы Png, Jpg, Svg, Pdf.
В пятой части основ Figma мы узнаем о булевых операциях и научимся использовать их на практике. Это незаменимый инструмент для работы с векторной графикой, особенно с иконками и логотипами.
- О булевих операціях. Екскурс в математику і логіку;
- Види булевих операцій. Об'єднання фігур або Union selection. Віднімання фігур або Subtract selection. Перетин фігур або Intersect selection. Виключення фігур або Exclude selection;
- Обробка складних об'єктів. Перетворення у криві або Flatten selection.
В шестой части по основам Figma мы узнаем, как работать с градиентами. А именно поймем, какие существуют виды градиентов, как их создавать и настраивать на практике. Поговорим о плагинах для Figma и установим и используем несколько из них прямо во время урока.
- Про градієнт. Определение градиента. Ключевые точки градиента. Замена заливки цвета на градиент;
- Види градієнтів. Линейный градиент или Linear. Радиальный градиент или Radial. Угловой градиент или Angular. Градиент в виде алмаза или Diamond;
- Налаштування градієнтів. Непрозрачность. Цвет ключевых точек и пипетка. Задаем код цвета. Добавляем ключевые точки. Угол и направление градиента;
- Практичні приклади. Добавление объема фигуре. Имитация движения. Объемные элементы интерфейса. Градиент на фоне;
- Плагіни у Figma. Как работать с плагинами. Инструкция по установке плагина;
- Плагіни для градієнтів. Работа с плагином uiGradient. Плагин Easing Gradients. Плагин Chromatic Figma.
В седьмой части по основам Figma вы научитесь работать с кривыми на продвинутом уровне. И хотя вы уже знакомы с булевыми операциями, которые позволяют создавать сложные векторные фигуры, это лишь вершина айсберга. С помощью инструмента Pen (переводится как перо) можно воспроизвести любую форму.
- Теория кривых. Кривые Безье. Виды кривых;
- Рисуем линейную кривую. Инструмент Pen. Создаем простейшую кривую с нуля;
- Редактирование кривых. Инструмент Move для перемещения точек. Инструмент Bend для управления кривизной. Инструмент Paint Bucket для заливки замкнутых контуров; Добавление и удаление точек;
- Настройка кривых. Настройка обводки. Преобразование обводки в кривые. Закругление углов;
- Сайты с бесплатными иконками. The Noun Project. Font Awesome. Cursor.in;
- Экспорт в Svg. Пошаговая инструкция.
Подписывайтесь на меня в Instagram – @frusia.pro – будьте в курсе новых уроков, ставьте свои вопросы, а также на вас ждет множество полезных постов о дизайне.
Последнее обновление 3 мая 2025
Продолжить обучение