Хотите начать обучение и найти работу в нише дизайна сайтов и интерфейсов? Предлагаю вам освоить базовые навыки и разобраться в том, какие именно умения нужны, чтобы войти в эту сферу.
Материал также будет очень полезным фронтенд и бекенд-разработчикам, менеджерам проектов и всем, кто работает в сфере IT и хочет ближе познакомиться с UX/UI-дизайном.
Когда я только начинала свой путь дизайнера, мне было очень сложно освоить десятки терминов, понять, что именно учить в первую очередь; когда и какую программу использовать. Поэтому решила написать подборку бесплатных уроков, которые помогут понять сферу, какие именно методики используют дизайнеры с опытом. А еще заложить базовые знания одного из самых популярных графических редакторов Figma.
Отвечаю на главный вопрос – нужно ли уметь рисовать, чтобы стать UX/UI-дизайнером?
—Нет! Дизайнер ≠ художник
Список уроков и их структуру вы найдете ниже.
Пожалуйста, оставляйте комментарии, сообщайте об ошибках и неточностях. Буду рада услышать ваши дополнения. Курс периодически обновляется, чтобы вы могли усваивать только актуальную информацию. Приятного чтения!
- Урок 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 – будьте в курсе анонсов новых уроков, смотрите проверки домашних заданий в сторис, задавайте вопросы, а также на вас ждет множество полезных постов о дизайне.
Последнее обновление 18 февраля 2025
Продолжить обучение
Продолжить обучение
К первому уроку