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

Для кого этот курс

• Отлично подойдет для тех, кто хочет стать веб-дизайнером
• Основная задача курса - профессия веб-дизайнер. Освоите с нуля Figma, Photoshop, Tilda, After Effects, Protopie — все нужные инструменты дизайнера. Соберете портфолио и начнёте карьеру в дизайне.
• Будет полезен тем, кто уже работает в сфере дизайна
• Требования к этой профессии растут, тренды постоянно обновляются. На курсе вы не только повысите свой уровень, освоив новые навыки, но и добавите в своё портфолио проект под руководством профессионала.

Вы научитесь

• Создавать макеты и прототипы в Figma
• Подготавливать референсы под проект
• Работать с фото и иллюстрациями
• Анимировать интерфейсы в Prototipe и After Effects
• Работать с композицией, цветом и шрифтами
• Проводить исследования и работать с аналитикой
• Создавать UI-киты
• Презентовать кейсы
• Работать с заказчиками

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

1 модуль. Введение в профессию веб-дизайнер

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

2 модуль. Аналитика

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

3 модуль. Типы сайтов и насмотренность

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

4 модуль. Основы Figma

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

5 модуль. Типографика

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

6 модуль. Колористика

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

7 модуль. Прототип

• Создание мудборда в Figma
• Создание скетча в Figma
• Создание прототипа в Figma
• Создание интерактивного прототипа в Figma
• Подготавливаем прототип к отправке клиенту

8 модуль. Композиция и цвет

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

9 модуль. Создание макета сайта

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

10 модуль. Адаптивный дизайн

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

11 модуль. Работа с фото и иллюстрациями в Photoshop

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

12 модуль. Перенос макета из Figma в Tilda

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

13 модуль. Карьера и развитие

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