Web design, usability and its promotion
Description: The discipline introduces the theoretical and practical foundations of web design as an integrated system for designing and developing digital interfaces: principles of visual communication and composition; website typologies; Figma and Tilda tools; UX design, prototyping, and usability testing; UX copywriting and tone of voice; responsive layout (front-end); animation in ProtoPie and After Effects; information architecture, patterns, and iOS/Android guidelines. Particular emphasis is placed on integrating design, usability, and marketing into business processes: formulating hypotheses and building funnels, conducting analytics, preparing for launch, and optimizing interfaces to meet product and commercial goals, in order to increase conversion and enhance the quality of the user experience.
Amount of credits: 5
Пререквизиты:
- Principles of Marketing
Course Workload:
| Types of classes | hours |
|---|---|
| Lectures | 15 |
| Practical works | 30 |
| Laboratory works | |
| SAWTG (Student Autonomous Work under Teacher Guidance) | 30 |
| SAW (Student autonomous work) | 75 |
| Form of final control | Exam |
| Final assessment method | Exam |
Component: Component by selection
Cycle: Profiling disciplines
Goal
- Goal of the discipline «Web design, usability and its promotion»: to develop students’ systematic knowledge and practical skills in designing digital interfaces, including visual communication; work with Figma and Tilda; UX copywriting; prototyping; information architecture; iOS/Android patterns and guidelines; responsive layout; animation; testing; analytics; and integration with marketing objectives.
Objective
- сформировать понимание базовых принципов веб-дизайна: типографика, композиция, работа с цветом и сеткой;
- освоить профессиональную работу в Figma: фреймы, стили, компоненты, Auto Layout, прототипирование и экспорт;
- разрабатывать дизайн для разных площадок: визуалы и элементы сайтов, лендингов;
- проектировать адаптивные макеты под десктоп, планшет и смартфон с корректным выбором breakpoints;
- проектировать удобные интерфейсы на основе поведенческих сценариев и принципов юзабилити;
- выполнять быстрые UX-проверки/тесты прототипов и вносить итеративные улучшения;
- выстраивать минимальную дизайн-систему (палитры, типографика, сетка, компоненты) для единообразия решений;
- Связывать дизайн с задачами продвижения: подбирать форматы, учитывать требования контента и базовые метрики эффективности.
Learning outcome: knowledge and understanding
- Students demonstrate knowledge of the principles of visual communication, composition, color theory, and typography; website typologies; the fundamentals of UX and information architecture; and they understand the capabilities of Figma, Tilda, ProtoPie, and After Effects, as well as the iOS/Android guidelines, for creating adaptive interfaces.
Learning outcome: applying knowledge and understanding
- Students put their knowledge into practice: they develop prototypes and design concepts in Figma; build and configure websites in Tilda (including Zero Block); design adaptive (responsive) interfaces; prepare assets; animate elements; and set up basic analytics tracking.
Learning outcome: formation of judgments
- Students justify design decisions based on usability testing and analytics data, make informed choices of UX patterns, prioritize hypotheses, and strike a balance between user experience, technical constraints, and business objectives.
Learning outcome: communicative abilities
- Students clearly present design solutions to stakeholders, create clear project documentation and specifications, develop UI kits, and write UX copy with an appropriate tone of voice for various digital channels.
Learning outcome: learning skills or learning abilities
- Students independently plan their professional development, learn new tools and guideline updates, run A/B experiments and reflect on the results, integrating improvements into the design system and workflows.
Teaching methods
Figma (https://www.figma.com/ ). Используется как основная среда проектирования интерфейсов: разработка пользовательских потоков, вайрфреймов и визуальных макетов, сборка дизайн-систем и UI-китов, создание интерактивных прототипов с микровзаимодействиями. Обеспечивает командную работу в реальном времени (комментарии, версии, библиотеки компонентов) и экспорт графических ассетов под веб и мобильные платформы для последующей интеграции.
Tilda Publishing (https://tilda.cc/ru/ ). Применяется для быстрой сборки и публикации адаптивных лендингов и промо-страниц по макетам из Figma, включая работу в Zero Block, настройку сеток, типографики и форм обратной связи. В рамках курса выполняются интеграции базовой аналитики и SEO-настроек, тестирование гипотез (прототипы с реальным контентом) и подготовка материалов к запуску рекламных кампаний.
Adobe After Effects. Используется для разработки анимаций интерфейсных элементов (лоадеры, ховеры, переходы, скролл-эффекты) и коротких промо-роликов, повышающих вовлечённость и конверсию. Осваиваются принципы тайминга и плавности (easing), подготовка графики из Figma, оптимизация экспорта (видео/GIF/Lottie через соответствующие плагины) и передача анимационных спецификаций разработчикам.
Assessment of the student's knowledge
Teacher oversees various tasks related to ongoing assessment and determines students' current performance twice during each academic period. Ratings 1 and 2 are formulated based on the outcomes of this ongoing assessment. The student's learning achievements are assessed using a 100-point scale, and the final grades P1 and P2 are calculated as the average of their ongoing performance evaluations. The teacher evaluates the student's work throughout the academic period in alignment with the assignment submission schedule for the discipline. The assessment system may incorporate a mix of written and oral, group and individual formats.
| Period | Type of task | Total |
|---|---|---|
| 1 rating | Устный опрос | 0-100 |
| Разбор практических кейсов | ||
| Разбор практических кейсов | ||
| Рубежное тестирование | ||
| 2 rating | Устный опрос | 0-100 |
| Разбор практических кейсов | ||
| Разбор практических кейсов | ||
| Составление презентации | ||
| Рубежное тестирование | ||
| Total control | Exam | 0-100 |
The evaluating policy of learning outcomes by work type
| Type of task | 90-100 | 70-89 | 50-69 | 0-49 |
|---|---|---|---|---|
| Excellent | Good | Satisfactory | Unsatisfactory | |
| Различные виды работ (устный опрос, рубежное тестирование, проектный практикум в Figma/Tilda, разбор практических кейсов, составление презентации/портфолио) в зависимости от задания оцениваются по 100-% шкале по следующим критериям | Работа выполнена полно и безошибочно, решения оригинальны и методически обоснованы с опорой на гайдлайны HIG/Material и WCAG, корректно применены инструменты Figma/Tilda (Auto Layout, компоненты, Zero Block, формы/аналитика). Презентация и документация демонстрируют высокий уровень визуальной культуры: стройная типографическая иерархия, корректная сетка, ясная микрокопия с соблюдением Tone of Voice. Ответы по содержанию курса развёрнуты и точны, отражают глубокое понимание UX-принципов, адаптива и критериев юзабилити. | Решения в целом верны и соответствуют заданию, но наблюдаются отдельные недочёты: недостаточная детализация документации, единичные огрехи визуальной иерархии или адаптивных состояний. Использование Figma/Tilda корректно, хотя встречаются мелкие несоответствия в консистентности компонентов или настройке метрик. Ответы по теории адекватны, однако аргументация местами неполна и требует уточнений. | Задание выполнено частично: имеются заметные неточности в применении сеток/брейкпоинтов и выборе паттернов, компоненты и стили оформлены непоследовательно. Отсутствуют отдельные требуемые артефакты (варианты состояний, спецификация, проверка доступности) либо отчёт содержит методические и терминологические огрехи. Теоретические ответы и пояснения фрагментарны, рекомендуется существенная доработка с обращением к учебным материалам. | Имеются существенные пробелы в знаниях и методике, решения не соответствуют требованиям задания или стандартам курса; ключевые артефакты (прототип/лендинг/документация) отсутствуют или невоспроизводимы. Применение Figma/Tilda некорректно, обнаружены критические ошибки в адаптиве, структуре контента и логике взаимодействий. Ответы по содержанию курса неверны либо сведены к формальным высказываниям, академические нормы и требования к оформлению не соблюдены. |
Evaluation form
The student's final grade in the course is calculated on a 100 point grading scale, it includes:
- 40% of the examination result;
- 60% of current control result.
The final grade is calculated by the formula:
| FG = 0,6 | MT1+MT2 | +0,4E |
| 2 |
Where Midterm 1, Midterm 2are digital equivalents of the grades of Midterm 1 and 2;
E is a digital equivalent of the exam grade.
Final alphabetical grade and its equivalent in points:
The letter grading system for students' academic achievements, corresponding to the numerical equivalent on a four-point scale:
| Alphabetical grade | Numerical value | Points (%) | Traditional grade |
|---|---|---|---|
| A | 4.0 | 95-100 | Excellent |
| A- | 3.67 | 90-94 | |
| B+ | 3.33 | 85-89 | Good |
| B | 3.0 | 80-84 | |
| B- | 2.67 | 75-79 | |
| C+ | 2.33 | 70-74 | |
| C | 2.0 | 65-69 | Satisfactory |
| C- | 1.67 | 60-64 | |
| D+ | 1.33 | 55-59 | |
| D | 1.0 | 50-54 | |
| FX | 0.5 | 25-49 | Unsatisfactory |
| F | 0 | 0-24 |
Topics of lectures
- Основы веб-дизайна: принципы визуальной коммуникации между пользователем и интерфейсом, виды сайтов и их назначение, основы проектирования интерфейсов и разработки дизайн-концепции, методы вдохновения и творчества, а также ключевые инструменты композиции: модульная сетка, работа с цветом и типографикой для адаптивных интерфейсов на разных устройствах
- Инструменты дизайнера - 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 и других ИИ-инструментов - формулирование эффективных промптов для генерации изображений и логотипов, создание и стилизация визуальных концептов по описанию, подбор референсов, фотореалистичный рендер и очистка фона/артефактов, исследование аудитории и делегирование рутинных задач
Key reading
- Купер А., Рейман Р., Кронин Д. Алан Купер об интерфейсе. Основы проектирования взаимодействия. – Пер. с англ. – СПб.: Символ'Плюс, 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
Further reading
- Яблонски Дж. Законы UX-дизайна: Пер. с англ. — СПб.: БХВ-Петербург, 2022. — 160 с.: ил. ISBN 978-5-9775-6771-8
- Сьюзан Уэйншек. 100 новых главных принципов дизайна: Питер; Санкт-Петербург; 2016 ISBN 978-5-496-02239-2
