Организация процесса работы UX/UI дизайнера. Часть вторая.

1.Создание прототипа
2.Подготовка, проведение пользовательского тестирования и доработка продукта
3.Создание дизайн-концепции и детализация графического интерфейса UI
4.After Effects

Часов в программе

16,00 часов

лекции

30,00 часов

практика

42,00 часа

самостоятельная

1,00 час

промежуточная аттестация

89,00 часов

всего

Материально-технические условия реализации программы:

Вид занятий: внеаудиторные
Требуемое ПО:
Четырехъядерный процессор Intel или AMD
Microsoft Windows 10 (64-разрядная) версия 1909 и более поздние
16 ГБ ОЗУ
2 ГБ видеопамяти ГП
При использовании After Effects настоятельно рекомендуется установить драйвер NVIDIA 472.12, 15 ГБ свободного пространства на жестком диске, во время установки необходимо дополнительное свободное пространство (продукт не может быть установлен на съемные устройства флеш-памяти)
Разрешение монитора 1920*1080
Интернет от 100/мбит с

Информационные ресуры

Агентства, которые проводят исследования:
1.Usabilitylab - https://usabilitylab.ru/
2.Юзетикс - https://usethics.ru/
3.Калькуляторы модульной сетки.
4.Полная визуализация всего спектра UX и UI инструментов - https://bankai.eu/files/uxui-infographic/uxui-infograph.pdf.

Учебно-методические материалы

Методы, формы и технологии

Формы подачи материала:
-видео
-текст
Методы:
-асинхронная работа студента на платформе
-синхронная работа на вебинарах с преподавателями
-самостоятельная работа (выполнение заданий)

Методические разработки

1.Методические разработки:
2.Анализ рынок конкурентов — изучаем, что предлагают другие школы и рынок вакансий, чтобы давать востребованные знания и навыки.
3.Проработка критериев по набору экспертов и авторов программы
4.Разработка контента в обучающие материалы и проектирование структуры курса
5.Анализ рынка вакансий на предмет актуальности знаний.
6.Создание авторами модулей программы. Каждый урок проходит многоуровневое ревью — эксперта, методиста, редактора, студента.
7.Чередование форматов подачи информации (текст — видео— таблица). Обязательно предоставление ссылок на дополнительные источники — документацию и полезные статьи, которые помогут лучше понять тему и расширят кругозор студента
8.В конце каждой темы у нас есть:
-итоговое тестирование, чтобы привести знания теории в систему,
-большая практическая задача для закрепления всех необходимых навыков модуля.
9.Обработка обратной связи от студентов по каждому модулю

Материалы курса

-Для чего нужны бумажные прототипы
-Примеры бумажного прототипирования
-Чем отличается хороший бумажный прототип от плохого
-Советы по созданию бумажных прототипов
-Отрисовка бумажного прототипа: как это делается
-Как доработать дизайн с помощью бумажного прототипа
-Для чего нужно приложение POP и как с ним работать
-Опыт использования бумажных прототипов на разных проектах
-Зачем нужны прототипы
-Создание интерактивного прототипа Invision
-Как выбрать метод для тестирования продукта
-Юзабилити-тестирование. Когда и для чего использовать
-Постановка задачи на тестирование
-Подбор респондентов
-Сценарии тестирования
-Вводный инструктаж и предварительное интервью
-Процесс тестирования
-Анализ и предоставление результатов
-RITE
-Удалённые тестирования
-Инструменты для дизайнера
-Как провести коридорное тестирование
-Когда проводить качественные исследования
-Экспертная оценка. Параметры улучшения интерфейса
-Как и для кого дизайнер может провести экспертную оценку
-Как измеряется успешность интерфейса: продуктовые метрики.
-Тренды в дизайне интерфейсов и насмотренность
-Вдохновение: референсы и мудборды
-О мудбордах и сервисах
-Что такое дизайн-концепция
-Работа над дизайн-концепцией для внешнего заказчика
-Как создаётся дизайн-концепция. Разбираем кейс
-Создание концепции в Figma. Часть 1
-Создание концепции в Figma. Часть 2
-Зачем нужна анимация в мобильном приложении
-Функциональная и эмоциональная анимация
-12 принципов анимации
-Анимация в After Effects
-Простая анимация в After Effects
-Создание анимации для приложения. Выбор фона
-Создание анимации для приложения. Перемещение карточек
-Делаем shot для Dribbble
-Примеры хорошей и плохой моушн-анимации
-Знакомство с интерфейсом
-Слои / Layers
-Shape Layer
-Настройки шейпов
-Основы анимации: кейфреймы (Keyframe)
-Основы анимации шейпов
-Связи между объектами
-Типы кейфреймов
-Graph Editor
-Создание композиции из шейпов
-Анимирование композиции
-Pre-compose
-Анимация шейпa по вектору path
-Рендер, настройки рендера
-Text Layer
-Использование текста в качестве шейпа. Анимация контура trim paths
-Использование текста в качестве шейпа. Анимация повторения шейпов
-Использование текста в качестве шейпа. Repeater
-Прочие виды анимации шейпов и текста
-Text Animator
-Маски и Track Matte
-Загрузка контента: аудио и видео
-Работа с эффектами и загруженным контентом.
-Работа с эффектами и загруженным контентом.
-Работа с масками
-Основы композинга при работе с масками
-Загрузка контента из Photoshop
-Анимация загруженного контента из Photoshop
-Загрузка контента из Adobe Illustrator
-Анимация готового контента из Adobe Illustrator
-Анимация векторного логотипа. Часть 1
-Анимация векторного логотипа. Часть 2
-Разработка концепции готового проекта
-Анимированные заставки

Учебная литература

1.Унгер Р. UX-дизайн. Практическое руководство по проектированию опыта взаимодействия - М.: Символ-плюс, 2011 - 336 с. - ISBN 978-5-93286-184-4.
2.ЛеБорг К. Графический дизайн. Visual Grammar - СПб.: издательство: Питер, 2017 - 96 с. - ISBN 978-5-496-01642-1.

Темы

Создание прототипа Подготовка, проведение пользовательского тестирования и доработка продукта Создание дизайн-концепции и детализация графического интерфейса UI After Effects Подготовка и передача продуктов в разработку