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

Длительность дисциплины: 40 ак.ч.

Аннотация

Вы научитесь проектировать удобные и простые в использовании сайты. Узнаете, как подготовить графику для веб-дизайна. С нуля освоите онлайн-сервис для дизайнеров Figma и научитесь верстать прототипы.

Кому будет полезен курс

Начинающим веб-дизайнерам, которые хотят систематизировать знания и научиться делать прототипы.
Веб-разработчикам для улучшения взаимодействия с дизайн-командой и использования возможностей презентации макета заказчику.
Владельцам веб-студий, руководителям проектов, которые хотят лучше понимать процесс создания сайтов и веб-приложений.
Дизайнерам, у которых нет опыта работы в Figma, и которые хотят добавить в резюме новый профессиональный инструмент.

Почему нужно пройти этот курс

Вы научитесь проектировать удобные и простые в использовании сайты.
Создадите проект, который можно будет положить в портфолио.
Получите удостоверение о повышении квалификации Санкт-Петербургского политехнического университета.

Знания и умения, полученные в результате изучения

По окончании курса слушатели смогут эффективно использовать навыки создания прототипов веб-страниц, и будут иметь уверенные знания в следующих областях:

виды графических изображений в веб-дизайне;
форматы графических файлов, используемых в сети Интернет и их особенности;
направления и стили в веб-дизайне;
типовые решения в дизайне веб-страниц;
приемы графического дизайна;
нарезка и оптимизация графики;

В течение курса слушатели получат практические навыки обработки фотоизображений, создания различного рода иллюстраций (в том числе журнальных, рекламных), подготовки графики для публикации в Web.

Преподаватели

Кузяева Вероника Валерьевна

Содержание дисциплины

Темы лекции

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

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

Юзабилити.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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