Программа курсов «Профессия Web-дизайнер»

Раздел I. Искусство дизайна

Дизайн-аналитика

Ключевые компетенции веб-дизайнера
Постановка задачи на проектирование
Сбор и аналитика исходных данных
Ментальная карта проекта
Оформление проектного задания
Источники идей в дизайне
Применение Moodboard на стадии идеи

Практика: проектное задание
Практика: ментальная карта проекта
Практика: сбор и аналитика аналогов

Композиция в веб-дизайне

Средства: линия, точка, пятно и др.
Приёмы: контраст, ритм, метр и др.
Достижение равновесия композиции
Динамика и статика. Передача эмоций
Художественный образ, концепция, идея
Обзор трендов в веб-дизайне

Практика: формообразующие контрасты
Практика: эмоции и формы
Практика: композиционный сторителлинг
Практика: подбор аналогов композиции

Цветоведение. Сочетание цветов

Основные характеристики цвета
Цветовой круг Иттена. Гармонии
Психология восприятия цветов
Цветовой колорит веб-сайта
Обзор цветовых трендов веб-дизайна

Практика: передача настроения цветом
Практика: цветовое решение сайта

Шрифты. Типографика в веб-дизайне

Типы и виды электронных шрифтов
Параметры и характеристики шрифта
Принципы сочетания шрифтов
Достижение удобочитаемости текста
Свободные шрифты. Источники
Применение иконочных шрифтов

Практика: шрифтовая композиция
Практика: подбор шрифтов для веб-сайта

Раздел II. UX/UI дизайн

Проектирование взаимодействия

Обзор этапов проектирования
Ментальные модели проектирования
Методы исследований поведения
Персонажи и цели в проектировании
Алгоритм разработки персонажа
Разработка сценариев и требований

Практика: разработка персонажа
Практика: сценарий взаимодействия
Практика: список требований к проекту

Ментальная эргономика

Гармоничное взаимодействие
Оптимизация трудозатрат
Принципы проектирования навигации
Тактичное поведение интфрейса
Метафорическая парадигма
Идиоматическая парадигма
Парадигма реализации

Практика: аналитка парадигм реализации
Практика: логическая структура сайта
Практика: навигация и поведение сайта

Визуальный дизайн интерфейсов

Средства (форма, цвет, размер и др)
Принципы (иерархия, связи и т.д.)
Выравнивание и сетка
Использование пиктограмм
Текст в графических интерфейсах
Визуальный информационный дизайн

Практика: выравнивание дизайна по сетке
Практика: подбор пиктограмм сайта

Проектирование деталей интерфейса

Оптимизация поиска. Функция отмены
Манипуляции. Элементы управления
Меню. Панели инструментов
Диаологовые окна. Поведение окон
Ошибки, уведомления. Модальность

Практика: детализация компонентов интерфейса

Раздел III. Вёрстка дизайн-макета

Основы Photoshop для веб-дизайна

Логика интерфейса. Блоки функций
Разметка макета. Работа со слоями
Перемещение и редактирование объектов
Применение векторной графики
Редактирование и форматирование текста
Smart-объекты. Работа с изображениями
Маска слоя. Обтравочная маска

Практика: прототип сайта в Photoshop

Обработка изображений в Photoshop

Принципы неразрущающей коррекции
Обработка изображений в Camera RAW
Применение корректирующих слоёв
Техники обрезки фона изображений
Приёмы цветокоррекции изображений
Быстрая ретушь. Устранение дефектов

Практика: обработка картинок для сайта

Основы Figma для веб-дизайна

Регистрация. Интерфейс. Навигация
Структура. Frames. Слои. Группы. Маски
Фигуры. Векторы. Тексты. Изображения
Модульные сетки. Выравнивание объектов
Адаптация макета под платформы
Презентация результатов. Share

Практика: прототип сайта в Figma

Раздел IV. Сайт на Tilda

Знакомство с интерфейсом

Хостинг. Домен. Регистрация
Структура и разделы интерфейса
Создание сайта. Привязка домена
Копирование сайтов. Страницы
Обзор тарифов Tilda
Обзор интеграция Tilda
Шаблоны Tilda. Основы редактирования

Практика: начало работы с сайтом

Блоки платформы Tilda

Блоки обложек, заголовков
Текстовые блоки, цитаты
Галереи, изображения
Блоки форм, кнопок, меню
Блок интернет-магазин, товаров
Блоки работы с видео
Блоки команды, отзывов
Блоки контактов, подвала

Практика: компоновка блоков сайта

Zero-блок. Дизайн с нуля

Понятие zero-блок Tilda
Преобразование блоков в zero-блок
Элементы zero-блока
Добавление картинок, текстов
Кросс-платформенность блока

Практика: вёрстка zero-блока

Интеграция Tilda и других систем

Настройка заявок на e-mail
Интеграция Google-карты в Tilda
Интеграция с различными CRM
Обзор иных интеграция Tilda

Практика: настройка заявок на e-mail

Публикация и тестирование результатов

Публикация сайта в интернете
Способы тестирования дизайн-вёртски
Решение основных проблем после публикации

Практика: публикация и тестирование сайта