-
Полезная теория и живая практика веб-дизайна. Проектная работа в группах: создание интерактивного прототипа, макетирование и оформление страниц сайта, верстка и сборка страниц, адаптивный дизайн и его оптимизация под мобильные устройства. Дизайн лендингов
Для кого
для веб-дизайнеров и веб-мастеров
Программа
- Брифинг. Цели и задачи проекта. Исследование бизнеса, услуги, продукта заказчика сайта. Отстройка от конкурентов
- Проектирование
- Пользовательского взаимодействия: портреты пользователей, ключевые действия на сайте, сценарии взаимодействия и требования к интерфейсу согласно каждому сценарию
- Интерактивного прототипа, сайта. Структура сайта. Модульные сетки. Навигация сайта. Структура меню и способы перемещения между разделами. Компоновка элементов. Инструменты прототипирования. Способы тестирования результата.
- Адаптивный дизайн
- Обоснование адаптивности для будущего ресурса
- Выбор способов разработки адаптивности.
- Модульные сетки и принципы перестроения страниц
- Дизайн
- "Легкий дизайн". Пространство экрана, объем элементов, наличие/отсутствие обводок, рамки, фоны. Величина отступов и интервалов
- Цвет. Восприятие цвета: как подобрать удачные сочетания
- Типографика. Веб-типографика. Шрифты. Кернинг. Интерлиньяж. Абзацы. Заголовки. Текст как элемент дизайна
- Дизайн элементов: иконки, иллюстрации, инфографика, ссылки и карты. Обработка фотографий. Анимация и видео
- Адаптация фирменного стиля заказчика под веб-среду
- Дизайн лендингов (целевых страниц)
Идеология лендингов, какому бизнесу они необходимы. Типы и виды целевых страниц. Ключевые элементы: цель, призыв к действию, особенности дизайна, контентное наполнение, доступность для пользователя. Оптимизация целевой страницы - тесты и конверсия. Интеграция целевой страницы с внешними приложениями. Аналитика работы-продажи и трафик. Анализ удачных и неудачных примеров. - Верстка
Что дизайнеру нужно знать о верстке? HTML5. CSS3. Вёрстка каркаса страниц: сетка, расположение и вид основных элементов. Вёрстка мелких элементов: текста, форм, таблиц, кнопок, графики. Сборка всех страниц. - Кейс. Анализ дизайна сайтов, предложенных участниками семинара. Конструктивная критика. Рекомендации по редизайну.
- Практикумы в рабочих группах
- Создание прототипа сайта в Axure;
- Создание макета сайта в Photoshop;
- Дизайн целевой страницы (лендинга);
- Адаптация созданного сайта под мобильные устройства.
Итогом практикумов станет презентация проектов, которые создадут рабочие группы.