+7 (812) 703-02-02 info@hse.spbstu.ru
23.08.2022 19:00 День открытых дверей программ профессиональной переподготовки
Онлайн-формат. Для участия нужна регистрация...

Прототипирование и веб-графика

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


Аннотация

Сегодня практически каждый пользователь Internet имеет свою собственную личную страницу в сети, не говоря уже о коммерческих фирмах. Разработка Internet-представительств стала одной из самых стремительно развивающихся и достаточно дорогих услуг. Заказчики заинтересованы в создании красочных, стильных, привлекательных страниц и Web-элементов. Веб-дизайн сегодня – это сложившаяся система принципов и приемов оформления, которая не только обеспечивает профессиональный результат, но и позволяет конструктивно подойти к процессу создания интернет-ресурса.

Что делает профессиональный веб-дизайн таковым? Чем отличается работа специалиста от работы начинающего? Какие приемы оформления позволяют придать строгий, корпоративный вид одним страницам, и свободный, экспрессивный другим? Ответить на все эти вопросы призван данный курс.


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

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

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

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


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

Темы лекции

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

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

Юзабилити.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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