Профессия Веб-дизайнер (UX/UI) от Бруноям

Технологии, которые будете изучать

• Figma — создание макетов и прототипов
• Референсы — подготовка под проект
• Фото и иллюстрации — работа и обработка
• Prototipe и After Effects — анимированние интерфейсов
• Композиция и цвет — правильная работа
• Типографика — основы
• Исследование и аналитика — обучение и проведение
• UI-киты — создание дизайна
• Кейсы — правильная презентация
• Работа с заказчиком — от поиска, до документооборота

Программа курса

Чем занимается веб-дизайнер
Где работает, какие могут быть проекты
Этапы работы над проектом
В чём роль дизайнера на всех этапах проектах
UX, UI-дизайнеры: в чём разница
Знания из каких областей нужны веб-дизайнеру

Артефакты UX
Исследование бизнеса
Исследование пользователей
Персонажи
Сценарии
Карта эмпатии

Про типы сайтов
Что такое лендинг
Классический сценарий лендинга
Про типы сайтов
Что такое лендинг
Классический сценарий лендинга
Особенности, которыми должен обладать сайт-визитка
Преимущества использования дашбордов
Особенности мобильной разработки

Обзор интерфейса и всех возможностей программы
Сетка. Разберём — что это такое, какие они бывают и как используются
Много практики с сеткой

Определение
Основные понятия о шрифтах
Сочетания шрифтов
Приемы в работе со шрифтами
Примеры хорошо подобранных шрифтов
Текст на сайте. Инфостиль
Типографика в вебе
Тренды в веб-дизайне
Работа с контентом и текстами

Композиция и цвет
Подбор цветовой гаммы относительно ЦА
Визуальные акценты. Управление вниманием пользователя
Создание мудборда в Figma
Создание скетча в Figma
Создание прототипа в Figma
Создание интерактивного прототипа в Figma
Подготавливаем прототип к отправке клиенту

Композиция. Принципы
Композиционный центр (доминанта)
Ошибки. Примеры хороших композиций
Контраст. Равновесие. Ритм. Взгляд
Z и F паттерны. Сетка (примеры, силовая линия), правило третей
Цвет. Цветовые модели (HSB, RGB, HEX коды, CMYK)
Параметры. Цветовой круг Иттена. Как выбрать цвет
Психофизиология интерфейсов. 7±2 (пример — навигация в шапке), какие данные лучше воспринимаются и запоминаются, геометрическая память, закон края, правило близости, группировка, контраст

В этом модуле создаём полностью готовый макет сайта для портфолио

Адаптивный дизайн. Предпосылки
На каких устройствах может просматриваться сайт
Варианты решения адаптивности
Примеры. Точки разлома
Mobile First
Особенности прототипирования в Figma
Компоненты, фиксация при скроле, подвижная карта
Работа с Figma Mirror

Цветокоррекция
Кадрирование
Портретная ретушь. Лайфхаки
Фильтры семейства “Размытие”: по Гауссу, в движении, радиальное и т.д.
Покадровая анимация
Настройки векторных объектов (заливка, градиент)
Перо. Работа с точками, узлами и кривыми
Разница между Фигурой и Контуром

Дополнительный модуль, где мы разберём не очень популярную, но полезную функцию по переносу готового макета из Figma в Tilda

Портфолио
Площадки для размещения
Обзор Behance
Требования к оформлению
Оформление на Behance
Принципы хорошего кейса
Кейсы и примеры на Behance и Dribbble
Поиск работы. Где брать заказы