Веб дизайн, юзабилити и его продвижение
内容描述: Дисциплина раскрывает теоретические и практические основы веб-дизайна как целостной системы проектирования и развития цифровых интерфейсов: принципы визуальной коммуникации и композиции, типология сайтов; инструменты Figma и Tilda; UX-проектирование, прототипирование и юзабилити-тестирование; UX-копирайтинг и Tone of Voice; адаптивная вёрстка; анимация в ProtoPie и After Effects; информационная архитектура, паттерны и гайдлайны iOS/Android. Особое внимание уделено интеграции дизайна, юзабилити и продвижения в бизнес-процессы: формулированию гипотез и построению воронок, аналитике, подготовке к запуску и оптимизации интерфейсов под продуктовые и коммерческие цели для роста конверсии и качества пользовательского опыта.
贷款数: 5
Пререквизиты:
- Основы маркетинга
*СomplexityDiscipline(zh-CN)*:
| *TypesOfClasses(zh-CN)* | *hours(zh-CN)* |
|---|---|
| *Lectures(zh-CN)* | 15 |
| *PracticalWork(zh-CN)* | 30 |
| *LaboratoryWork(zh-CN)* | |
| *srop(zh-CN)* | 30 |
| *sro(zh-CN)* | 75 |
| *FormOfFinalControl(zh-CN)* | экзамен |
| *FinalAssessment(zh-CN)* | Экзамен |
零件: Компонент по выбору
循环次数: Профилирующие дисциплины
Цель
- Цель дисциплины «Веб-дизайн, юзабилити и его продвижение» заключается в формировании у студентов системных знаний и практических навыков проектирования цифровых интерфейсов, включая визуальную коммуникацию, работу в 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-эксперименты и рефлексию результатов, интегрируя улучшения в дизайн-систему и рабочие процессы.
*TeachingMethods(zh-CN)*
Figma (https://www.figma.com/ ). Используется как основная среда проектирования интерфейсов: разработка пользовательских потоков, вайрфреймов и визуальных макетов, сборка дизайн-систем и UI-китов, создание интерактивных прототипов с микровзаимодействиями. Обеспечивает командную работу в реальном времени (комментарии, версии, библиотеки компонентов) и экспорт графических ассетов под веб и мобильные платформы для последующей интеграции.
Tilda Publishing (https://tilda.cc/ru/ ). Применяется для быстрой сборки и публикации адаптивных лендингов и промо-страниц по макетам из Figma, включая работу в Zero Block, настройку сеток, типографики и форм обратной связи. В рамках курса выполняются интеграции базовой аналитики и SEO-настроек, тестирование гипотез (прототипы с реальным контентом) и подготовка материалов к запуску рекламных кампаний.
Adobe After Effects. Используется для разработки анимаций интерфейсных элементов (лоадеры, ховеры, переходы, скролл-эффекты) и коротких промо-роликов, повышающих вовлечённость и конверсию. Осваиваются принципы тайминга и плавности (easing), подготовка графики из Figma, оптимизация экспорта (видео/GIF/Lottie через соответствующие плагины) и передача анимационных спецификаций разработчикам.
*AssessmentKnowledge(zh-CN)*
Преподаватель проводит все виды работ текущего контроля и выводит соответствующую оценку текущей успеваемости обучающихся два раза в академический период. По результатам текущего контроля формируется рейтинг 1 и 2. Учебные достижения обучающегося оцениваются по 100-балльной шкале, итоговая оценка Р1 и Р2 выводится как средняя арифметическая из оценок текущей успеваемости. Оценка работы обучающегося в академическом периоде осуществляется преподавателем в соответствии с графиком сдачи заданий по дисциплине. Система контроля может сочетать письменные и устные, групповые и индивидуальные формы.
| *Period2(zh-CN)* | *TypeOfTask(zh-CN)* | *Total(zh-CN)* |
|---|---|---|
| 1 *Rating(zh-CN)* | Устный опрос | 0-100 |
| Разбор практических кейсов | ||
| Разбор практических кейсов | ||
| Рубежное тестирование | ||
| 2 *Rating(zh-CN)* | Устный опрос | 0-100 |
| Разбор практических кейсов | ||
| Разбор практических кейсов | ||
| Составление презентации | ||
| Рубежное тестирование | ||
| *TotalControl(zh-CN)* | экзамен | 0-100 |
*PolicyAssignmentTask(zh-CN)*
| *TypeOfTask(zh-CN)* | 90-100 | 70-89 | 50-69 | 0-49 |
|---|---|---|---|---|
| Excellent | *Grade4(zh-CN)* | *Grade3(zh-CN)* | *Grade2(zh-CN)* | |
| Различные виды работ (устный опрос, рубежное тестирование, проектный практикум в Figma/Tilda, разбор практических кейсов, составление презентации/портфолио) в зависимости от задания оцениваются по 100-% шкале по следующим критериям | Работа выполнена полно и безошибочно, решения оригинальны и методически обоснованы с опорой на гайдлайны HIG/Material и WCAG, корректно применены инструменты Figma/Tilda (Auto Layout, компоненты, Zero Block, формы/аналитика). Презентация и документация демонстрируют высокий уровень визуальной культуры: стройная типографическая иерархия, корректная сетка, ясная микрокопия с соблюдением Tone of Voice. Ответы по содержанию курса развёрнуты и точны, отражают глубокое понимание UX-принципов, адаптива и критериев юзабилити. | Решения в целом верны и соответствуют заданию, но наблюдаются отдельные недочёты: недостаточная детализация документации, единичные огрехи визуальной иерархии или адаптивных состояний. Использование Figma/Tilda корректно, хотя встречаются мелкие несоответствия в консистентности компонентов или настройке метрик. Ответы по теории адекватны, однако аргументация местами неполна и требует уточнений. | Задание выполнено частично: имеются заметные неточности в применении сеток/брейкпоинтов и выборе паттернов, компоненты и стили оформлены непоследовательно. Отсутствуют отдельные требуемые артефакты (варианты состояний, спецификация, проверка доступности) либо отчёт содержит методические и терминологические огрехи. Теоретические ответы и пояснения фрагментарны, рекомендуется существенная доработка с обращением к учебным материалам. | Имеются существенные пробелы в знаниях и методике, решения не соответствуют требованиям задания или стандартам курса; ключевые артефакты (прототип/лендинг/документация) отсутствуют или невоспроизводимы. Применение Figma/Tilda некорректно, обнаружены критические ошибки в адаптиве, структуре контента и логике взаимодействий. Ответы по содержанию курса неверны либо сведены к формальным высказываниям, академические нормы и требования к оформлению не соблюдены. |
*EvaluationForm(zh-CN)*
Итоговая оценка знаний обучающего по дисциплине осуществляется по 100 балльной системе и включает:
- 40% результата, полученного на экзамене;
- 60% результатов текущей успеваемости.
Формула подсчета итоговой оценки:
| И= 0,6 | Р1+Р2 | +0,4Э |
| 2 |
где, Р1, Р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
