Веб дизайн, юзабилити и его продвижение

Описание: Дисциплина раскрывает теоретические и практические основы веб-дизайна как целостной системы проектирования и развития цифровых интерфейсов: принципы визуальной коммуникации и композиции, типология сайтов; инструменты Figma и Tilda; UX-проектирование, прототипирование и юзабилити-тестирование; UX-копирайтинг и Tone of Voice; адаптивная вёрстка; анимация в ProtoPie и After Effects; информационная архитектура, паттерны и гайдлайны iOS/Android. Особое внимание уделено интеграции дизайна, юзабилити и продвижения в бизнес-процессы: формулированию гипотез и построению воронок, аналитике, подготовке к запуску и оптимизации интерфейсов под продуктовые и коммерческие цели для роста конверсии и качества пользовательского опыта.

Количество кредитов: 5

Пререквизиты:

• Основы маркетинга

Трудоемкость дисциплины:

Виды работ	часы
Лекции	15
Практические работы	30
Лабораторные работы
СРОП	30
СРО	75
Форма итогового контроля	экзамен
Форма проведения итогового контроля	Экзамен

Компонент: Компонент по выбору

Цикл: Профилирующие дисциплины

Цель

• Цель дисциплины «Веб-дизайн, юзабилити и его продвижение» заключается в формировании у студентов системных знаний и практических навыков проектирования цифровых интерфейсов, включая визуальную коммуникацию, работу в Figma и Tilda, UX-копирайтинг, прототипирование, информационную архитектуру, паттерны и гайдлайны iOS/Android, адаптивную вёрстку, анимацию, тестирование, аналитику и интеграцию с маркетинговыми целями.

Задача

• сформировать понимание базовых принципов веб-дизайна: типографика, композиция, работа с цветом и сеткой;
• освоить профессиональную работу в Figma: фреймы, стили, компоненты, Auto Layout, прототипирование и экспорт;
• разрабатывать дизайн для разных площадок: визуалы и элементы сайтов, лендингов;
• проектировать адаптивные макеты под десктоп, планшет и смартфон с корректным выбором breakpoints;
• проектировать удобные интерфейсы на основе поведенческих сценариев и принципов юзабилити;
• выполнять быстрые UX-проверки/тесты прототипов и вносить итеративные улучшения;
• выстраивать минимальную дизайн-систему (палитры, типографика, сетка, компоненты) для единообразия решений;
• Связывать дизайн с задачами продвижения: подбирать форматы, учитывать требования контента и базовые метрики эффективности.

Результат обучения: знание и понимание

• Студенты демонстрируют знание принципов визуальной коммуникации, композиции, цвета и типографики, типологии сайтов, основ UX и информационной архитектуры, а также понимают возможности Figma, Tilda, ProtoPie, After Effects и гайдлайны iOS/Android для создания адаптивных интерфейсов.

Результат обучения: применение знаний и пониманий

• Студенты применяют полученные знания на практике: разрабатывают прототипы и дизайн-концепции в Figma, создают и настраивают сайты в Tilda (включая Zero Block), проектируют адаптивные интерфейсы, подготавливают ассеты, анимируют элементы и подключают базовую аналитику.

Результат обучения: формирование суждений

• Студенты обосновывают проектные решения на основе юзабилити-тестирования и данных аналитики, осознанно выбирают UX-паттерны, приоритизируют гипотезы и находят баланс между пользовательским опытом, техническими ограничениями и бизнес-целями.

Результат обучения: коммуникативные способности

• Студенты ясно презентуют дизайн-решения стейкхолдерам, создают понятную проектную документацию и спецификации, формируют UI-киты, а также пишут UX-тексты с корректным Tone of Voice для разных цифровых каналов.

Результат обучения: навыки обучения или способности к учебе

• Студенты самостоятельно планируют профессиональное развитие, осваивают новые инструменты и обновления гайдлайнов, проводят A/B-эксперименты и рефлексию результатов, интегрируя улучшения в дизайн-систему и рабочие процессы.

Методы преподавания

Figma (https://www.figma.com/ ). Используется как основная среда проектирования интерфейсов: разработка пользовательских потоков, вайрфреймов и визуальных макетов, сборка дизайн-систем и UI-китов, создание интерактивных прототипов с микровзаимодействиями. Обеспечивает командную работу в реальном времени (комментарии, версии, библиотеки компонентов) и экспорт графических ассетов под веб и мобильные платформы для последующей интеграции.

Tilda Publishing (https://tilda.cc/ru/ ). Применяется для быстрой сборки и публикации адаптивных лендингов и промо-страниц по макетам из Figma, включая работу в Zero Block, настройку сеток, типографики и форм обратной связи. В рамках курса выполняются интеграции базовой аналитики и SEO-настроек, тестирование гипотез (прототипы с реальным контентом) и подготовка материалов к запуску рекламных кампаний.

Adobe After Effects. Используется для разработки анимаций интерфейсных элементов (лоадеры, ховеры, переходы, скролл-эффекты) и коротких промо-роликов, повышающих вовлечённость и конверсию. Осваиваются принципы тайминга и плавности (easing), подготовка графики из Figma, оптимизация экспорта (видео/GIF/Lottie через соответствующие плагины) и передача анимационных спецификаций разработчикам.

Оценка знаний обучающегося

Преподаватель проводит все виды работ текущего контроля и выводит соответствующую оценку текущей успеваемости обучающихся два раза в академический период. По результатам текущего контроля формируется рейтинг 1 и 2. Учебные достижения обучающегося оцениваются по 100-балльной шкале, итоговая оценка Р1 и Р2 выводится как средняя арифметическая из оценок текущей успеваемости. Оценка работы обучающегося в академическом периоде осуществляется преподавателем в соответствии с графиком сдачи заданий по дисциплине. Система контроля может сочетать письменные и устные, групповые и индивидуальные формы.

Период	Вид задания	Итого
1  рейтинг	Устный опрос	0-100
	Разбор практических кейсов
	Разбор практических кейсов
	Рубежное тестирование
2  рейтинг	Устный опрос	0-100
	Разбор практических кейсов
	Разбор практических кейсов
	Составление презентации
	Рубежное тестирование
Итоговый контроль	экзамен	0-100

Политика оценивания результатов обучения по видам работ

Вид задания	90-100	70-89	50-69	0-49
	Отлично	Хорошо	Удовлетворительно	Неудовлетворительно
Различные виды работ (устный опрос, рубежное тестирование, проектный практикум в Figma/Tilda, разбор практических кейсов, составление презентации/портфолио) в зависимости от задания оцениваются по 100-% шкале по следующим критериям	Работа выполнена полно и безошибочно, решения оригинальны и методически обоснованы с опорой на гайдлайны HIG/Material и WCAG, корректно применены инструменты Figma/Tilda (Auto Layout, компоненты, Zero Block, формы/аналитика). Презентация и документация демонстрируют высокий уровень визуальной культуры: стройная типографическая иерархия, корректная сетка, ясная микрокопия с соблюдением Tone of Voice. Ответы по содержанию курса развёрнуты и точны, отражают глубокое понимание UX-принципов, адаптива и критериев юзабилити.	Решения в целом верны и соответствуют заданию, но наблюдаются отдельные недочёты: недостаточная детализация документации, единичные огрехи визуальной иерархии или адаптивных состояний. Использование Figma/Tilda корректно, хотя встречаются мелкие несоответствия в консистентности компонентов или настройке метрик. Ответы по теории адекватны, однако аргументация местами неполна и требует уточнений.	Задание выполнено частично: имеются заметные неточности в применении сеток/брейкпоинтов и выборе паттернов, компоненты и стили оформлены непоследовательно. Отсутствуют отдельные требуемые артефакты (варианты состояний, спецификация, проверка доступности) либо отчёт содержит методические и терминологические огрехи. Теоретические ответы и пояснения фрагментарны, рекомендуется существенная доработка с обращением к учебным материалам.	Имеются существенные пробелы в знаниях и методике, решения не соответствуют требованиям задания или стандартам курса; ключевые артефакты (прототип/лендинг/документация) отсутствуют или невоспроизводимы. Применение Figma/Tilda некорректно, обнаружены критические ошибки в адаптиве, структуре контента и логике взаимодействий. Ответы по содержанию курса неверны либо сведены к формальным высказываниям, академические нормы и требования к оформлению не соблюдены.

Форма оценки

Итоговая оценка знаний обучающего по дисциплине осуществляется по 100 балльной системе и включает:

• 40% результата, полученного на экзамене;
• 60% результатов текущей успеваемости.

Формула подсчета итоговой оценки:

И= 0,6	Р1+Р2	+0,4Э
	2

 

где, Р₁, Р₂ – цифровые эквиваленты оценок первого, второго рейтингов соответственно; Э – цифровой эквивалент оценки на экзамене.

Итоговая буквенная оценка и ее цифровой эквивалент в баллах:

Буквенная система оценки учебных достижений обучающихся, соответствующая цифровому эквиваленту по четырехбалльной системе:

Оценка по буквенной системе	Цифровой эквивалент	Баллы (%-ное содержание)	Оценка по традиционной системе
A	4.0	95-100	Отлично
A-	3.67	90-94
B+	3.33	85-89	Хорошо
B	3.0	80-84
B-	2.67	75-79
C+	2.33	70-74
C	2.0	65-69	Удовлетворительно
C-	1.67	60-64
D+	1.33	55-59
D	1.0	50-54
FX	0.5	25-49	Неудовлетворительно
F	0	0-24

Темы лекционных занятий

• Основы веб-дизайна: принципы визуальной коммуникации между пользователем и интерфейсом, виды сайтов и их назначение, основы проектирования интерфейсов и разработки дизайн-концепции, методы вдохновения и творчества, а также ключевые инструменты композиции: модульная сетка, работа с цветом и типографикой для адаптивных интерфейсов на разных устройствах
• Инструменты дизайнера - Figma: настройка интерфейса, создание фреймов и объектов, работа с текстовыми блоками, сетками и адаптивным дизайном, применение Auto Layout, компонентов, библиотек и UI-китов, а также прототипирование, проектирование экранов мобильных приложений и работа с анимацией
• UX-копирайтинг: тексты в интерфейсе и Tone of Voice: создание понятных и эффективных продуктовых текстов для цифровых интерфейсов - от микрокопии до сложных сценариев - с учётом специфики UI, принципов и синтаксиса, выбора и применения Tone of Voice и передачи ценностей продукта через текст
• Создание сайтов на Tilda: профессиональная работа в Tilda - от интерфейса, стандартных блоков и Zero Block (лейаут, сетки, адаптив, анимация) и кастомизации через модификации/код до настройки сайтов и страниц, подготовки к запуску и публикации, оптимизации проекта, внедрения e-commerce (каталог, платежи), подключения Tilda-CRM, рассылок и аналитики, работы с новостными потоками и личным кабинетом, а также применения платформы в маркетинге для быстрой проверки гипотез
• Основы UX-проектирования в вебе: базовые принципы UX-проектирования веб-интерфейсов: составление ТЗ и методы проектирования, разработка информационной архитектуры, создание прототипов разной детализации и интерактивности с адаптацией под устройства, применение UX-паттернов и гайдлайнов iOS/Android, оценка юзабилити и подготовка к разработке веб-сайтов
• Сложные визуальные эффекты в интерфейсе: проектирование и внедрение сложных визуальных эффектов для веб- и мобильных интерфейсов - от работы с тенями, слоями и эффектами смешения до построения UI-китов и библиотек компонентов, применения принципов анимации и микровзаимодействий, а также создания веб- и мобильной анимации в ProtoPie для обеспечения непрерывного пользовательского опыта
• Проектирование пользовательского опыта: формирование базовых компетенций UX-проектирования веб-интерфейсов: составление ТЗ, выбор и применение паттернов UX, разработка информационной архитектуры и карт пользовательских сценариев, проведение юзабилити-тестирования, проектирование адаптивных решений и подготовка к разработке веб-сайтов
• Прототипирование интерфейсного решения: знакомство с инструментами и практиками прототипирования - от разработки информационной архитектуры и прототипов разной степени детализации до создания интерактивных макетов для мобильных приложений с учётом UX-гайдлайнов iOS/Android и проведения пользовательского тестирования
• Анимация веб-интерфейсов в Adobe After Effects: превращение статичных макетов в динамичные интерфейсы; функции и виды UI-анимации, принципы и инструменты создания; базовый функционал After Effects (таймлайн, ключевые кадры, маски, слои, эффекты, 3D), а также построение и экспорт анимаций для веба
• Адаптивная и мобильная вёрстка: создание интерфейсов, корректно работающих на компьютерах, планшетах и смартфонах: резиновая вёрстка и изображения, медиазапросы и медиафункции, особенности мобильной вёрстки, адаптивная типографика и выбор breakpoints, а также работа с адаптивными изображениями
• Нейросети для дизайнера: как ускорять креативные процессы и продакшн с помощью Midjourney, ChatGPT и других ИИ-инструментов - формулирование эффективных промптов для генерации изображений и логотипов, создание и стилизация визуальных концептов по описанию, подбор референсов, фотореалистичный рендер и очистка фона/артефактов, исследование аудитории и делегирование рутинных задач

Основная литература

• Купер А., Рейман Р., Кронин Д. Алан Купер об интерфейсе. Основы проектирования взаимодействия. – Пер. с англ. – СПб.: Символ'Плюс, 2009. – 688 с., ил. ISBN 978'5'93286'132'5
• Феличи, Джеймс. Типографика: шрифт, верстка, дизайн / Джеймс Феличи ; [пер. с англ. и коммент. С. И. Пономаренко]. — 2-е изд. — Санкт-Петербург : БХВ-Петербург, 2014. — 474 с. : ил. : 23 см.; ISBN 978-5-9775-0908-4
• Уолтер, А. Эмоциональный веб-дизайн / Аарон Уолтер ; пер. с англ. Павла Миронова. — М. : Манн, Иванов и Фербер, 2012. — 144 с. : илл. ISBN 978-5-91657-386-2
• Норман, Дональд А. Дизайн привычных вещей / Дональд А. Норман ; пер. с англ. Б. Л. Глушака. — М. : Манн, Иванов и Фербер, 2013. — 272 с. ISBN 978-5-91657-625-2

Дополнительная литература

• Яблонски Дж. Законы UX-дизайна: Пер. с англ. — СПб.: БХВ-Петербург, 2022. — 160 с.: ил. ISBN 978-5-9775-6771-8
• Сьюзан Уэйншек. 100 новых главных принципов дизайна: Питер; Санкт-Петербург; 2016 ISBN 978-5-496-02239-2