Курс будет полезен начинающим веб-дизайнерам и уже практикующим специалистам. Вы освоите с нуля Figma, Photoshop, Tilda, After Effects, Protopie и соберёте портфолио.
Программа курса состоит из 13 тематических модулей. Домашние задания и работа над проектами поможет освоить новые навыки на практике. После обучения вы получите сертификат и удостоверение государственного образца.
Введение в профессию веб-дизайнер
- Чем занимается веб-дизайнер.
- Где работает, какие могут быть проекты.
- Этапы работы над проектом.
- В чём роль дизайнера на всех этапах проектах.
- UX, UI-дизайнеры: в чём разница.
- Знания из каких областей нужны веб-дизайнеру.
Аналитика
- Артефакты UX.
- Исследование бизнеса.
- Исследование пользователей.
- Персонажи.
- Сценарии.
- Карта эмпатии.
Типы сайтов и насмотренность
- Про типы сайтов.
- Что такое лендинг.
- Классический сценарий лендинга.
- Про типы сайтов.
- Что такое лендинг.
- Классический сценарий лендинга.
- Особенности, которыми должен обладать сайт-визитка.
- Преимущества использования дашбордов.
- Особенности мобильной разработки.
Основы Figma
- Обзор интерфейса и всех возможностей программы.
- Сетка. Разберём — что это такое, какие они бывают и как используются.
- Много практики с сеткой.
Типографика
- Определение.
- Основные понятия о шрифтах.
- Сочетания шрифтов.
- Приемы в работе со шрифтами.
- Примеры хорошо подобранных шрифтов.
- Текст на сайте. Инфостиль.
- Типографика в вебе.
- Тренды в веб-дизайне.
- Работа с контентом и текстами.
Колористика
- Композиция и цвет.
- Подбор цветовой гаммы относительно ЦА.
- Визуальные акценты. Управление вниманием пользователя.
Прототип
- Создание мудборда в Figma.
- Создание скетча в Figma.
- Создание прототипа в Figma.
- Создание интерактивного прототипа в Figma.
- Подготавливаем прототип к отправке клиенту.
Композиция и цвет
- Композиция. Принципы.
- Композиционный центр (доминанта).
- Ошибки. Примеры хороших композиций.
- Контраст. Равновесие. Ритм. Взгляд.
- Z и F паттерны. Сетка (примеры, силовая линия), правило третей.
- Цвет. Цветовые модели (HSB, RGB, HEX коды, CMYK).
- Параметры. Цветовой круг Иттена. Как выбрать цвет.
- Психофизиология интерфейсов. 7±2 (пример — навигация в шапке), какие данные лучше воспринимаются и запоминаются, геометрическая память, закон края, правило близости, группировка, контраст.
Создание макета сайта
- Создадите полностью готовый макет сайта для портфолио.
Адаптивный дизайн
- Адаптивный дизайн. Предпосылки.
- На каких устройствах может просматриваться сайт.
- Варианты решения адаптивности.
- Примеры. Точки разлома.
- Mobile First.
- Особенности прототипирования в Figma.
- Компоненты, фиксация при скроле, подвижная карта.
- Работа с Figma Mirror.
Работа с фото и иллюстрациями в Photoshop
- Цветокоррекция.
- Кадрирование.
- Портретная ретушь. Лайфхаки.
- Фильтры семейства «Размытие»: по Гауссу, в движении, радиальное и т.д.
- Покадровая анимация.
- Настройки векторных объектов (заливка, градиент).
- Перо. Работа с точками, узлами и кривыми.
- Разница между Фигурой и Контуром.
Перенос макета из Figma в Tilda
- Разберётесь с функцией по переносу готового макета из Figma в Tilda.
Карьера и развитие
- Портфолио.
- Площадки для размещения.
- Обзор Behance.
- Требования к оформлению.
- Оформление на Behance.
- Принципы хорошего кейса.
- Кейсы и примеры на Behance и Dribbble.
- Поиск работы. Где брать заказы.
