Расписание

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

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

Блок 1. Начало работы

Лекция 1. Принятие поставленной задачи

Кто ставит задачи и как с этим жить. Шаблон анализа поставленной задачи: важные вопросы, дополнительные материалы и критерии исполнения и передачи результата, временная оценка. Синхронизация понимания задачи сторонами.

Лекция 2. Работа с техническими и бизнес-требованиями

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

Лекция 3. Выбор рабочей среды

Краткий обзор современных инструментов проектирования взаимодействия, дизайна, анимации и коммуникации в команде. Их выбор в зависимости от процессов в компании и этапов работы над проектом. Структура рабочего пространства для хранения данных.

Обзор популярных инструментов.

Преимущества и недостатки личной и командной работы в определенной среде. Ускорители работы и плагины. Особенности передачи материалов в разработку, бизнесу или на тесты.

Лекция 4. Обзор продуктов Adobe: Photoshop, Indesign, Adobe XD

Лекция 5. Sketch

Лекция 6. Figma

Лекция 7. Axure

Лекция 8. Invision, Flinto

Блок 2. Информационная архитектура и взаимодействие

Лекция 9. Основы проектирования

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

Лекция 10. Customer Journey maps и User Stories

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

Лекция 11. Функциональное проектирование

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

Лекция 12. Прототипирование

Цифровое и бумажное прототипирование: принципы, детализация, инструменты. Быстрое тестирование результатов и критерии оценки.

Лекция 13. Вовлечение пользователя

Психология внимания и восприятия, гештальт. Открытые возможности или контроль пользователя, формирование привычки и информационная перегрузка. Геймификация и сторителлинг.

Лекция 14. Расширение рамок

Методики генерации идей, количественный и качественный подходы. Их оценка и критерии. Доработка прототипа.

Блок 3. Практические решения

Лекция 15. Принципы макета

Выбор основных параметров фронтэнда: рабочее разрешение экрана, адаптивность, сетка, модульность и др. Особенности поведения и реализации web интерфейсов и почему это все важно дизайнеру.

Лекция 16. Композиция и верстка

Основные принципы, вспоминаем гештальт. Привычные шаблоны позиционирования информации на странице (F, I, бургер и др) и блочность.

Лекция 17. Сетка и ритм

Принципы построения сеток, модульность и ритм. Особенности применения в веб и готовые решения из фреймворков Bootstrap, Foundation.

Лекция 18. Работа с текстом

Типографика, особенности набора и верстки. Работа с информационным посылом «call to action» и редактура.

Лекция 19. Вебинар атомарный дизайн

Методология от простого к сложному, особенности применения.

Лекция 20. Элементы интерфейса

Особенности применения и верстки атомарных контролов и элементов веб интерфейса. Поведение и стандартные состояния в веб.

Лекция 21. Формы

Работа с вводом данных и контролем результата, валидация и обработка ошибок. Особенности применения и верстки полей ввода, выпадающих списков, переключателей и др.

Лекция 22. Табличные данные

Анализ данных, верстка таблиц. Особенности проектирования сортировки и фильтрации, адаптивность.

Лекция 23. Вебинар: дизайн системы и фреймворки

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

Лекция 24. Модульность

Создание сложных UI-компонентов (модулей) и их стандартизация для переиспользования в разных частях проекта.

Лекция 25. Адаптивность

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

Лекция 26. UI-анимация

Основные принципы и сферы использования. Виды реализации: слоями, нодами, кодом. Обзор современных инструментов для создания анимации: какие из них удобны и понятны для разработчиков.

Лекция 27. Вебинар: модули в дизайн-системах

Как не плодить лишние сущности, но выделять новые модули и вносить доработки в дизайн-систему. Ответы на вопросы.

Лекция 28. Передача материалов

Подготовка макетов для разработки, экспорт графических ресурсов, описание функционала и коммуникация с разработчиками.

Лекция 29. Масштабирование и работа в команде

Синхронизация и обновление макетов между несколькими дизайнерами, актуализация дизайн-системы. Обзор облачных символов Sketch, Craft и контроля версий Abstract.

Лекция 30. Дизайн-кейс

Подготовка кейса в портфолио, особенности и ошибки. Обзор площадок для публикации: Behance. Tilda и Readymag.

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