Специальное проектирование. Дизайн и программирование

Бакалавриат 2020/2021

Лучший по критерию «Полезность курса для Вашей будущей карьеры»

Лучший по критерию «Полезность курса для расширения кругозора и разностороннего развития»

Лучший по критерию «Новизна полученных знаний»

Статус: Курс по выбору (Дизайн)

Направление: 54.03.01. Дизайн

Кто читает: Школа дизайна

Где читается: Факультет креативных индустрий

Когда читается: 2-й курс, 1-4 модуль

Формат изучения: без онлайн-курса

Охват аудитории: для своего кампуса

Преподаватели: Булгаков Вадим Александрович, Пащенко Олег Геннадьевич, Постнова Виолетта Александровна, Рапацкая Янина Олеговна

Язык: русский

Кредиты: 13

Контактные часы: 280

Полная версия программы учебной дисциплины Задать вопрос

Аннотация

В процессе организованного в несколько этапов мозгового штурма выбираются лучшие идеи проектов. Голосуя за идеи, студенты делятся на команды (рабочие группы). Каждая команда организовывает проектную деятельность. Студенты в каждом модуле выбирают новую вариативную дисциплину.

Цель освоения дисциплины

формирование у студентов основных знаний и навыков в области проектирования в рамках выбранной специализации

Планируемые результаты обучения

Итоговый проект Концепция медиа-сервиса, макеты первичных артефактов, интерактивный прототип, объектно-ориентированная модель, реализованные в коде страницы и первичный интерфейс админа с возможностью работы с постами. Итоговый проект Мультимедийный проект-лонгрид на платформе ReadyMag
Итоговый проект Посадочная страница на платформе ReadyMag, рекламирующая вымышленный продукт
Итоговый проект Медиа-сервис в айдентике бренда с открытым контентом и реализованными механиками социальным взаимодействием, категориями или тегами, любыми другими рубрикаторами. Отдельно презентуется бренд и айдентика, концепт UI-кита медиа-сервиса.
Протипирование большого веб-интерфейса Итоговый проект Интерактивный прототип сайта-сервиса, собранный на платформе Figma
Дизайн-система медиа-сервиса Итоговый проект Веб-сервис с возможностью добавления пользовательского контента, компонентная дизайн система в дизайне и коде со сквозным неймингом по атомик или UDF дизайну
Мобильное приложение Итоговый проект Интерактивный прототип мобильного приложения, собранный на платформе Figma
Итоговый проект Веб-сервис с поиском и системой фильтров, оформленными страницами ошибок, с лендингом и SEO оптимизацией страниц, полная презентация созданного за год веб-сервиса, айдентики и остальных артефактов

Содержание учебной дисциплины

2 курс. 1 модуль.
Проектирование медиа-сервиса Описание Студенты разрабатывают концепцию медиа-сервиса, изучают целевую аудиторию и верстают одностраничный сайт с описанием медиа-сервиса. Описывают объектную структуру проекта. Создают интерактивный прототип медиа-сервиса в Figma для формирования видения развития проекта. Изучают методология JTBD и учатся создавать Job Stories и User Stories.Требования к промежуточному проекту Презентация концепции, механики и исследования целевой аудитории медиа-сервиса. Требования к итоговому проекту 1. Обложка и заполненное поле описания проекта 2. Презентация не менее 16 слайдов 3. Первый слайд — горизонтальная обложка презентующая проект 4. Концепция медиа-сервиса, краткое описание проекта 5. Целевая аудитория 6. Макет страницы «О проекте» с текстом о проекте 7. Свёрстанная страница «О проекте» 8. Макет «заглушки» для сайта (Splash Screen) 9. Свёрстанная «заглушка» сайта 10. Список выбранных для реализации фич (функций/возможностей) 11. Информационная структура проекта, какие будут объекты информации и как они будут взаимосвязаны (Object Oriented Design) 12. Роли пользователей по JTBD (админ — заполняет посты, гость — первый раз зашёл, пользователь — сидит на сайте часто) 13. Механика/устройство сервиса в виде Job Stories / User Stories записанные в виде скринкастов (в нескольких слайдах рассказать, как работает сервис, какие свои задачи решает каджый пользователь) 14. Ссылка на интерактивный прототип в Figma 15. Реализованный в коде интерфейс администратора для добавления, редактирования и удаления контента 16. Свёрстанные посты доступные через интерфейс администратора 17. Показать как сделаны посевные данные для наполнения сервиса с помощью скрипта 18. Показать распределение задач между участниками команды в чендж логе проекта. Критерии оценивания смысловой части проекта Уникальность идеи. Понимание ЦА. Последовательность, логичность и завершённость сценариев.Критерии оценивания визуальной части проекта Адекватный задаче выбор элементов. Аккуратность и внимание к деталям: качество работы с типографикой, изображениями, системой отступов. Единообразие и цельность стиля. Соответствие текущему уровню в индустрии (актуальность визуальных интерфейсных решений).Другое Выставочный проект: да.Лонгрид Описание Разработка мультимедийной веб-публикации. Сторителлинг в интернете. Требования к промежуточному проекту Центральная идея, метафора. На какие 3 вопроса отвечает материал. Референсы и мудборд. Краткий план + бумажный эскиз. Текст (1/3 объёма лонгрида). Готовые экраны в Readymag (минимум 3).Требования к итоговому проекту 6–12 слайдов: Обложка. Постановка задачи: проблематика, контекст, решение. План лонгрида (текст) и бумажная раскадровка. Слайды, поясняющий структуру, ритмические законы и визуальные приёмы. Референсы и мудборд. Мокап + ссылка на публикацию в Readymag. Лонгрид: мобильная и десктопная версии. По желанию: продукция с символикой, трейлер.Критерии оценивания смысловой части проекта Уникальность темы / истории. Авторский контент (изображения и текст). Выбор соответствующего теме визуального языка.Критерии оценивания визуальной части проекта Аккуратная типографика. Единообразие и цельность стиля. Режиссура (управление вниманием читателя, немонотонная подача материала). Уместное использование анимации. Логичность и удобство интерактивных решений. Убедительные и хорошо проработанные первый экран лонгрида и футер. Другое Выставочный проект: да.
2 курс. 2 модуль.
Бренд, айдентика и стилистика медиа-сервиса Описание Студенты изучают практики разработки платформы бренда, создают концепцию визуального образа бренда, разрабатывают его артефакты, проеверяют их на носителях, разрабатывают дизайн лендинга и создают эскиз интерфейса. Требования к итоговому проекту 1. Брендинг медиа-сервиса (айдентика, UI-kit) 2. Дизайн интерфейса медиа-сервиса реализованный в коде 3. Продвинутая вёрстка 4. Пользовательское взаимодействие (механики социального взаимодейтсвия пользователей поверх контента админа) 5. Реализованная система рубрикации контента. Другое Выставочный проект: да. Лендинг Описание Разработка посадочной страницы, рекламирующей вымышленный продукт. Требования к промежуточному проекту Идея продукта. Постановка задачи: проблематика, контекст, решение. Исследование конкурентов, обзор рынка. Job Stories. Целевая аудитория. Результаты кастдева. Референсы и мудборд. Референсы и мудборд. Краткий план + бумажный эскиз. Готовые экраны в Readymag (Минимум 3). Требования к итоговому проекту 8–16 слайдов: Обложка. Постановка задачи: проблематика, контекст, решение. Исследование конкурентов, обзор рынка. Job Stories. Целевая аудитория. Результаты кастдева. Референсы и мудборд. Графическая система. Мокап + ссылка на публикацию в Readymag. Лендинг: мобильная и десктопная версии. По желанию: продукция с символикой, трейлер. Критерии оценивания смысловой части проекта Уникальная и/или остроумная идея продукта. Авторский контент (изображения и текст). Выбор соответствующего теме визуального языка. Критерии оценивания визуальной части проекта Аккуратная типографика. Единообразие и цельность стиля. Режиссура (управление вниманием пользователя/читателя, немонотонная подача). Анимация (уместность). Логичность и удобство интерактивных решений. Соответствие работы генеральной задаче: продать продукт. Убедительность призыва к действию.
2 курс. 3 модуль.
Дизайн-система медиа-сервиса Описание Студенты изучают практики разработки дизайн-систем, домен-дривен дизайна, компонентного подхода в дизайне и коде, разрабатывают дизайн-систему медиа-сервиса и проектируют интерфейс сервиса, используя новые компоненты.Требования к итоговому проекту Компонентная дизайн-система в дизайне и коде медиа-сервиса.Другое Выставочный проект: да. Протипирование большого веб-интерфейса Описание Проектирование и прототипирование структурно сложного веб-сервиса. Требования к промежуточному проекту Описание проекта. Job Stories и основные сценарии. Прототип-wireframe. Подход к UI и дизайн-системе. Айдентика сервиса. Требования к итоговому проекту Обложка. Постановка задачи — проблематика, контекст, аналоги. Описание идеи. Исследование, если есть: выводы по кастдеву, опросы, краткое описание ЦА и базовая продуктовая аналитика, сценарии. Референсы и мудборд. Бээкстейдж. Нейминг и фирменный стиль: логотип крупно. UI, графическая система: слайды, поясняющие визуальные приёмы, выбор шрифтовых гарнитур, цветов и пр. Скриншоты сайта в привязке к устройствам — мокапы. Видеоскринкаст, демонстрирующий проход по основным сценариям интерфейса. Интерактивный прототип в Figma. По желанию: продукция с символикой, трейлер. Критерии оценивания смысловой части проекта Уникальность. Понимание ЦА. Исследование. Удобство и простота использования. Последовательность, логичность и завершённость сценариев. Логичное расположение блоков, соблюдение паттернов. Выбор соответствующего теме визуального языка. Критерии оценивания визуальной части проекта Адекватный задаче выбор элементов,. Аккуратность и внимание к деталям: качество работы с типографикой, изображениями, системой отступов. Единообразие и цельность стиля. Уместное использование анимации. Соответствие текущему уровню в индустрии (актуальность визуальных интерфейсных решений).
2 курс. 4 модуль.
Финализация медиа-сервиса и его презентация Описание Четвертый модуль посвящен доработке интерфейсов и презентации для дизайн-конференции.Итоговый проект Веб-сервис с поиском и системой фильтров, оформленными страницами ошибок, с лендингом и SEO оптимизацией страниц, полная презентация созданного за год веб-сервиса, айдентики и остальных артефактов. Требования к итоговому проекту Поиск на сервисе (STI или вывод паршиалов по условию) Фильтры Лендинг Страницы ошибок SEO оптимизация Полная презентация проекта. Другое Выставочный проект: да. Мобильное приложение Описание Идея и прототипирование мобильного приложения. Требования к промежуточному проекту Описание проекта. Job Stories. Прототип-wireframe. Подход к UI и дизайн-системе. Иконка приложения.Требования к итоговому проекту 12–25 слайдов. Обложка. Постановку задачи — проблематика, контекст, аналоги. Краткое описание идеи и почему это решено приложением. Любые словесные рефлексии или «атмосферная» графика. Исследование: выводы по кастдеву, опросы, краткое описание ЦА и базовую продуктовую аналитику, сценарии. Референсы и мудборд (на что вы ориентировались в функциональном и эстетическом плане) — в виде небольшого коллажа. Фотографии бумажного прототипа, ссылку на видео тестирования, если есть, и прочий «бэкстейдж». UI-кит, графическая система: слайды, поясняющие визуальные приёмы, выбор шрифтовых гарнитур, цветов и пр. Иконка на домашнем экране и крупно. Скриншоты вашего продукта в привязке к устройствам — мокапы и ссылки на лендинг в Readymag и прототип в Figma. Страница приложения в магазине приложений. 3–5 экранов с хорошими подписями. Предложение по брендированию и оформлению соцмедиа-представительств: обложка FB-страницы, аватарки, публикации в Instagram и тому подобное. По желанию: продукция с символикой, трейлер. Критерии оценивания смысловой части проекта Понятная идея, решающая конкретную задачу. Уникальность. Понимание ЦА. Исследование (решение опирается на данные, полученные из пользовательских исследований). Монетизация (по желанию). Продвижение. Трейлер. Логика (UX). Удобство и простота использования. Логичное расположение блоков, соблюдение паттернов. Последовательность, логичность и завершённость сценариев. Лендинг приложения: рассказывает о приложении; побуждает купить/установить; визуально и логически связан с идеей приложения. Критерии оценивания визуальной части проекта Понимание гайдлайнов системы. Соответствие текущему уровню в индустрии. Логичная анимация (по желанию). Аккуратность и внимание к деталям: качество работы с типографикой, изображениями, системой отступов. Соответствие текущему уровню в индустрии (актуальность визуальных интерфейсных решений). Критерии оценки лендинга: Аккуратная типографика. Единообразие и цельность стиля. Режиссура (управление вниманием пользователя/читателя, немонотонная подача). Анимация (уместность). Логичность и удобство интерактивных решений. Соответствие работы генеральной задаче: продать продукт. Убедительность призыва к действию. Другое Выставочный проект: да.

Элементы контроля

просмотр
посещаемость

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

Промежуточная аттестация (1 модуль)
Итоговая оценка=0,25*посещаемость¹*(0,2*промежуточная оценка+0,8*оценка комиссии на просмотре)+0,75*(0,2*промежуточная оценка+0,8*оценка комиссии на просмотре) Посещаемость – рассчитывается по следующей формуле (100% посещаемости -1; 10% посещаемости – 0,1).
Промежуточная аттестация (2 модуль)
Итоговая оценка=0,25*посещаемость¹*(0,2*промежуточная оценка+0,8*оценка комиссии на просмотре)+0,75*(0,2*промежуточная оценка+0,8*оценка комиссии на просмотре) Посещаемость – рассчитывается по следующей формуле (100% посещаемости -1; 10% посещаемости – 0,1).
Промежуточная аттестация (3 модуль)
Итоговая оценка=0,25*посещаемость¹*(0,2*промежуточная оценка+0,8*оценка комиссии на просмотре)+0,75*(0,2*промежуточная оценка+0,8*оценка комиссии на просмотре) Посещаемость – рассчитывается по следующей формуле (100% посещаемости -1; 10% посещаемости – 0,1).
Промежуточная аттестация (4 модуль)
Итоговая оценка=0,25*посещаемость¹*(0,2*промежуточная оценка+0,8*оценка комиссии на просмотре)+0,75*(0,2*промежуточная оценка+0,8*оценка комиссии на просмотре) Посещаемость – рассчитывается по следующей формуле (100% посещаемости -1; 10% посещаемости – 0,1).

Программа дисциплины