FRNT-PROTO. Прототипирование и Web-графика

Темы лекции

1. Введение в прототипирование и веб-графику.

• Этапы проекта. Цели проектирования и прототипирования.
• Целевая аудитория. Обзор аналогов. Брифы.

Юзабилити.

• Исследования в области юзабилити.
• Принципы колористики и композиции в вебе. Типичные ошибки.
• Назначение изображений и типографики. Экранные шрифты.

Форматы представления графики в вебе.

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

2. От схемы к графическому прототипу сайта

• Информационная архитектура сайта. Построение объектной модели.
• Сценарии работы пользователя с сайтом. Диаграммы путей.

Прототипирование

• Модульные сетки в веб-дизайне. Классификация сайтов с точки зрения графического макета.
• Типовые схемы компоновки страниц сайта в зависимости от типа представляемой информации.
• Методика проектирования навигации и основных элементов сайта.
• Требования к графическому макету.

Подготовка графики

• Графическое оформление содержимого сайта.
• Векторные и растровые изображения.
• Иконографика и пиктограммы. Шрифты.
• "Нарезка" и генерация графического содержимого из прототипа.
• Оптимизация графики и экспорт стилевых описаний.

Практические занятия

Тема 1. Figma. Основные инструменты.

• Интерфейс.
• Панель слоев. Страницы.
• Фреймы, шейпы, перо 
• Заливки, градиенты.

Тема 2. Figma. Компоненты интерфейса.

• Векторные контуры, векторные сети.
• Манипуляция с изображениями.
• Работа с текстом.
• Сетки.

Тема 3. Верстка простого прототипа

• Подключение шрифтов.
• Компоненты, стили.
• Экспорт растровых изображений.

Тема 4. Верстка сложного прототипа

• Адаптивность.
• Маски.
• Векторные иллюстрации.
• Экспорт SVG.

Тема 5. Динамика в макете. Презентация

• Прототипирование.
• Последовательность страниц, прокрутка.
• Анимация элементов