Мечтаете работать 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. Кривые
В этой вводной части на наглядных примерах будет рассказано и показано, что такое дизайн вообще и что он включает, вы познакомитесь с основными терминами, о которых все слышали, но никто не понимает.
Создание сайта требует слаженной работы команды специалистов. Давайте разберемся, в какой последовательности и кем разрабатываются веб-сайты; какое место в этом процессе занимает UX/UI дизайн.
Хочу обратить внимание, что в этом уроке все написано максимально простым языком, чтобы было проще понять суть процесса. Когда это будет усвоено, я перейду к специальным терминам уже в следующем уроке.
- Аналитика, сбор информации, написание технического задания. В каких случаях проводят исследования, кто такие бизнес-аналитики и кто пишет техническое задание проекта;
- Поиск референсов, moodboards. Зачем угадывать предпочтения заказчиков и как это экономит бюджет. Behance и Dribbble;
- UX–дизайн. Пользователи и их задачи. Экраны и схемы переходов. Рисование эскизов и создание прототипа. Тестирование;
- UI–дизайн. Визуальный стиль (цветовая гамма, шрифты, сетки). Интерактивный дизайн;
- Презентация проекта. Как показать дизайн заказчику;
- Экспорт ресурсов. Сохранение иконок, картинок и иллюстраций в отдельных файлах;
- Верстка. HTML. CSS. JavaScript. Frontend–фреймворки. Bootstrap;
- Программирование. Технологии backend–разработчиков. PHP. MySQL. Встроенные скриптовые языки графических редакторов;
- Тестирование. Ручное и автоматическое тестирование;
- Развертывание (Deploy). Как происходит развертывание сайта. Системные администраторы и devops–инженеры.
Урок 3. Дизайн-процесс и методы UX–дизайнера
З уроку вы узнаете кто такой UX-дизайнер и с чем его едят. Также там поэтапно раскрыт типовой дизайн-процесс в удобной подаче с кучей примеров и понятных аналогий. Из-за того, что тема может показаться довольно сложной для новичков, такая подача делает урок понятным и легким для усвоения.
- Кто такой UX–дизайнер? Какую принципиальную задачу решает UX–дизайнер. Почему UX–дизайнер должен уметь и любить общаться?
- Дизайн-процесс. Что это? Этапы дизайн–процесса и что такое дизайн–активности?
- Этап 1 (Observe или 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 (переводится как перо) можно воспроизвести любую форму.
Подписывайтесь на меня в Instagram – @frusia.pro – будьте в курсе новых уроков, ставьте свои вопросы, а также на вас ждет множество полезных постов о дизайне.
Последнее обновление 21 февраля 2025
Продолжить обучение
Продолжить обучение
К первому уроку