Программа курсов «Основы веб-дизайна»
Дизайн-аналитика
- Ключевые компетенции веб-дизайнера
- Постановка задачи на проектирование
- Сбор и аналитика исходных данных
- Ментальная карта проекта
- Оформление проектного задания
- Источники идей в дизайне
- Применение Moodboard на стадии идеи
Практика: ментальная карта проекта
Практика: сбор и аналитика аналогов
Композиция в веб-дизайне
- Средства: линия, точка, пятно и др.
- Приёмы: контраст, ритм, метр и др.
- Достижение равновесия композиции
- Динамика и статика. Передача эмоций
- Художественный образ, концепция, идея
- Обзор трендов в веб-дизайне
Практика: эмоции и формы
Практика: композиционный сторителлинг
Практика: подбор аналогов композиции
Цветоведение. Сочетание цветов
- Основные характеристики цвета
- Цветовой круг Иттена. Гармонии
- Психология восприятия цветов
- Цветовой колорит веб-сайта
- Обзор цветовых трендов веб-дизайна
Практика: цветовое решение сайта
Шрифты. Типографика в веб-дизайне
- Типы и виды электронных шрифтов
- Параметры и характеристики шрифта
- Принципы сочетания шрифтов
- Достижение удобочитаемости текста
- Свободные шрифты. Источники
- Применение иконочных шрифтов
Практика: подбор шрифтов для веб-сайта
Проектирование взаимодействия
- Обзор этапов проектирования
- Ментальные модели проектирования
- Методы исследований поведения
- Персонажи и цели в проектировании
- Алгоритм разработки персонажа
- Разработка сценариев и требований
Практика: сценарий взаимодействия
Практика: список требований к проекту
Ментальная эргономика
- Гармоничное взаимодействие
- Оптимизация трудозатрат
- Принципы проектирования навигации
- Тактичное поведение интерфейса
- Метафорическая парадигма
- Идиоматическая парадигма
- Парадигма реализации
Практика: логическая структура сайта
Практика: навигация и поведение сайта
Визуальный дизайн интерфейсов
- Средства (форма, цвет, размер и др.)
- Принципы (иерархия, связи и т.д.)
- Выравнивание и сетка
- Использование пиктограмм
- Текст в графических интерфейсах
- Визуальный информационный дизайн
Практика: подбор пиктограмм сайта
Проектирование деталей интерфейса
- Оптимизация поиска. Функция отмены
- Манипуляции. Элементы управления
- Меню. Панели инструментов
- Диалоговые окна. Поведение окон
- Ошибки, уведомления. Модальность
Основы Photoshop для веб-дизайна
- Логика интерфейса. Блоки функций
- Разметка макета. Работа со слоями
- Перемещение и редактирование объектов
- Применение векторной графики
- Редактирование и форматирование текста
- Smart-объекты. Работа с изображениями
- Маска слоя. Обтравочная маска
Обработка изображений в Photoshop
- Принципы неразрущающей коррекции
- Обработка изображений в Camera RAW
- Применение корректирующих слоёв
- Техники обрезки фона изображений
- Приёмы цветокоррекции изображений
- Быстрая ретушь. Устранение дефектов
Основы Figma для веб-дизайна
- Регистрация. Интерфейс. Навигация
- Структура. Frames. Слои. Группы. Маски
- Фигуры. Векторы. Тексты. Изображения
- Модульные сетки. Выравнивание объектов
- Адаптация макета под платформы
- Презентация результатов. Share