---

Ниже — расширенная версия. Чтобы гарантированно вышло около 20 листов, добавлены развёрнутые абзацы, описания, обоснования и уточнения. При указанных настройках (Times New Roman 14 пт, интервал 1,5, поля 30/15/20/20 мм, отступ 1,25 см) этого объёма хватает на 19–21 лист с титульным листом и приложением.

---

Настройки Word:

· Шрифт Times New Roman, 14 пт.
· Межстрочный интервал 1,5.
· Поля: левое 30 мм, правое 15 мм, верхнее и нижнее 20 мм.
· Абзацный отступ 1,25 см, выравнивание по ширине.
· Нумерация страниц внизу по центру, на титульном листе номер не ставится.
· Заголовки структурных элементов по центру, прописными буквами, без точки в конце, каждый с новой страницы.

---

ТИТУЛЬНЫЙ ЛИСТ (номер страницы не ставить)

Министерство науки и высшего образования Российской Федерации
[Наименование учебного заведения]
[Наименование кафедры]

КУРСОВАЯ РАБОТА
по дисциплине «[Название дисциплины]»
на тему: «Разработка прототипа интернет-магазина спортивных товаров в Figma»

Выполнил: студент группы [номер] [Фамилия И. О.]
Руководитель: [должность, учёная степень] [Фамилия И. О.]

[Город] [Год]

---

СОДЕРЖАНИЕ (новая страница)

ВВЕДЕНИЕ
1 Теоретическая часть
1.1 Понятие прототипирования и его роль в веб-разработке
1.2 Обзор инструмента Figma
1.3 Особенности проектирования интернет-магазинов
1.4 Понятие пользовательского опыта и юзабилити
1.5 Роль дизайн-системы в проектировании интерфейсов
2 Практическая часть
2.1 Анализ предметной области и целевой аудитории
2.2 Структура и карта сайта магазина спорттоваров
2.3 Разработка дизайн-системы
2.4 Создание макетов ключевых экранов
2.5 Интерактивный прототип и его тестирование
2.6 Оценка удобства прототипа и выводы по результатам проверки
ЗАКЛЮЧЕНИЕ
СПИСОК ИСПОЛЬЗОВАННЫХ ИСТОЧНИКОВ
ПРИЛОЖЕНИЕ А

---

ВВЕДЕНИЕ (новая страница)

Современная торговля всё больше смещается в цифровую среду. Интернет-магазины спортивных товаров позволяют покупателям быстро находить нужный инвентарь, сравнивать характеристики и оформлять заказы без посещения физических точек. Покупатель больше не привязан к району или городу: он сравнивает предложения нескольких магазинов за несколько минут и выбирает тот, где проще найти товар, понятнее условия доставки и удобнее оформление заказа. В этих условиях конкуренция всё меньше зависит от ассортимента и всё больше — от качества интерфейса и пользовательского опыта.

Актуальность работы обусловлена ростом рынка онлайн-продаж спортивных товаров и необходимостью создания качественных интерфейсов на этапе проектирования. Ошибки, допущенные на этапе проектирования, обходятся значительно дороже, если обнаруживаются после разработки: изменение готового интерфейса требует переработки вёрстки, логики и повторного тестирования. Прототип же позволяет проверить структуру, навигацию и сценарии до начала программирования и тем самым снизить затраты на доработки.

Цель работы — разработать прототип интернет-магазина спортивных товаров в программе Figma.

Задачи работы:

1. изучить теоретические основы прототипирования и возможности Figma;
2. рассмотреть понятия пользовательского опыта, юзабилити и дизайн-системы;
3. проанализировать целевую аудиторию и структуру магазина спорттоваров;
4. создать дизайн-систему и макеты ключевых экранов;
5. разработать интерактивный прототип и оценить его удобство.

Объект исследования — процесс проектирования интерфейсов интернет-магазина.
Предмет исследования — прототип магазина спортивных товаров, выполненный в Figma.

Методы исследования: анализ литературы, моделирование, прототипирование, визуальное проектирование, экспертная оценка удобства.

Структура работы. Работа состоит из введения, двух глав, заключения, списка использованных источников и приложения. В первой главе рассмотрены теоретические вопросы прототипирования, возможности Figma, принципы проектирования интернет-магазинов, понятия пользовательского опыта и дизайн-системы. Во второй главе описаны анализ целевой аудитории, структура сайта, дизайн-система, макеты ключевых экранов, интерактивный прототип и результаты его проверки.

---

1 ТЕОРЕТИЧЕСКАЯ ЧАСТЬ (новая страница)

1.1 Понятие прототипирования и его роль в веб-разработке

Прототипирование представляет собой создание упрощённой модели будущего продукта для проверки идей, структуры и логики взаимодействия до начала программирования. Прототип не является финальным продуктом: его задача — быстро и дёшево ответить на вопросы, которые иначе пришлось бы решать на этапе разработки. Именно поэтому прототип намеренно упрощают: в нём важнее структура и сценарии, чем детальная прорисовка.

Прототипы принято делить по степени детализации. Низкодетализированные прототипы (эскизы, вайрфреймы) представляют собой схемы без цвета и графики и используются для обсуждения структуры и расположения блоков. Высокодетализированные прототипы (макеты) приближены к финальному дизайну, содержат реальные цвета, шрифты и изображения и позволяют оценить не только структуру, но и визуальное восприятие интерфейса. На практике часто сначала создают низкодетализированный прототип для проверки структуры, а затем на его основе — высокодетализированный макет.

Прототипирование решает несколько задач. Во-первых, оно позволяет выявить ошибки навигации на ранних этапах, когда исправление стоит минимальных усилий. Во-вторых, сокращает затраты на переделку готового продукта. В-третьих, помогает согласовать видение между дизайнером, заказчиком и разработчиками: обсуждение конкретного макета идёт предметнее, чем обсуждение текстового задания. В-четвёртых, прототип даёт возможность провести юзабилити-тестирование без написания кода и получить обратную связь от реальных пользователей.

В веб-разработке прототип служит связующим звеном между техническим заданием и вёрсткой. Техническое задание описывает требования словами, а прототип показывает, как эти требования выглядят и работают. Разработчик, получивший прототип, точнее понимает, какие блоки и состояния нужно реализовать, а заказчик видит будущий продукт до начала работ и может внести правки на этапе, когда они ещё дешевы.

1.2 Обзор инструмента Figma

Figma — облачный инструмент для совместного проектирования интерфейсов. Его ключевое отличие от настольных редакторов состоит в том, что проект хранится в облаке, а несколько участников могут работать над ним одновременно, видеть изменения друг друга и оставлять комментарии прямо на макете. Это особенно удобно в учебных и командных проектах, где важно согласование между участниками.

К основным возможностям Figma относятся векторное редактирование, работа с компонентами и их вариантами, Auto Layout для адаптивной компоновки, режим Prototype для связывания экранов, совместная работа в реальном времени, плагины и Dev Mode для передачи макетов разработчикам. Компоненты позволяют создать элемент один раз и переиспользовать его на всех экранах: при изменении компонента обновляются все его экземпляры, что обеспечивает единообразие интерфейса. Варианты компонентов позволяют описать разные состояния одного элемента, например кнопку в обычном состоянии, при наведении и в неактивном состоянии.

Режим Prototype предназначен для создания интерактивного прототипа: экраны связываются переходами, настраиваются анимации и оверлеи, после чего прототип можно пройти как реальное приложение. Auto Layout задаёт правила расположения элементов и позволяет макетам подстраиваться под изменение содержимого. Dev Mode показывает разработчику размеры, отступы, цвета и шрифты выбранного элемента, что упрощает передачу макета в разработку.

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

1.3 Особенности проектирования интернет-магазинов

Проектирование интернет-магазина подчиняется нескольким общим принципам, нарушение которых напрямую снижает конверсию. Первый принцип — понятная навигация: пользователь должен быстро понимать, где он находится и как перейти к нужной категории. Второй — информативная карточка товара: фотографии, цена, характеристики, наличие и отзывы должны быть доступны без лишних переходов. Третий — минимальное число шагов при оформлении заказа: каждая дополнительная форма повышает вероятность, что пользователь уйдёт. Четвёртый — формирование доверия через отзывы, гарантии, способы оплаты и контакты. Пятый — адаптивность под мобильные устройства, поскольку значительная часть покупателей совершает покупки со смартфона.

Для спортивных товаров перечисленные принципы дополняются отраслевыми особенностями. Покупателю важны фильтры по виду спорта, размеру, бренду и полу: ассортимент спортивных товаров широк, и без фильтров найти нужное сложно. Важно сравнение характеристик, поскольку похожие товары разных брендов могут существенно различаться по материалам и назначению. Наконец, ценны фотографии товара в использовании: они помогают оценить посадку и условия применения, которые не видны на фотографии на белом фоне.

Отдельно стоит учитывать сезонность спортивных товаров. Спрос на лыжи и зимнюю экипировку смещён к холодному сезону, спрос на велосипедные товары — к тёплому. Поэтому в структуре главной страницы предусматривают сезонные блоки и акции, которые можно менять без переработки всей страницы.

1.4 Понятие пользовательского опыта и юзабилити

Пользовательский опыт (UX) — это совокупность впечатлений и эмоций, которые возникают у человека при взаимодействии с продуктом. UX шире, чем интерфейс: он включает и то, насколько быстро пользователь достигает цели, и то, насколько уверенно он себя чувствует в процессе, и то, возникает ли у него желание вернуться. Два магазина с одинаковым ассортиментом могут давать разный пользовательский опыт, если у них по-разному организованы поиск, фильтры и оформление заказа.

Юзабилити — это степень удобства использования продукта для достижения конкретных целей. Юзабилити оценивают по нескольким критериям: результативность (достигает ли пользователь цели), эффективность (сколько усилий и времени это требует), удовлетворённость (какие эмоции вызывает процесс) и обучаемость (насколько быстро новый пользователь осваивает интерфейс). Для интернет-магазина ключевыми метриками становятся время поиска товара, число шагов до оформления заказа и доля пользователей, завершивших покупку.

Практическая ценность юзабилити-тестирования состоит в том, что оно выявляет проблемы, которые дизайнер не замечает из-за привычки к собственному макету. Даже проверка на небольшом числе пользователей (пять-семь человек) позволяет обнаружить большинство серьёзных проблем навигации и понять, какие элементы требуют доработки. Именно поэтому в практической части работы прототип проверяется на пользователях, а не только оценивается автором.

1.5 Роль дизайн-системы в проектировании интерфейсов

Дизайн-система — это набор повторно используемых компонентов, правил и стандартов, которые обеспечивают единообразие интерфейса и ускоряют проектирование. В дизайн-систему входят цветовая палитра, типографика, сетка, отступы, иконки и библиотека компонентов. Дизайн-система нужна не только крупным продуктам: даже в учебном проекте она упрощает работу, поскольку избавляет от необходимости заново рисовать кнопки и карточки на каждом экране.

Главное преимущество дизайн-системы — согласованность. Если все кнопки созданы из одного компонента, они одинаковы на всех страницах, и пользователь не задумывается, почему кнопка на одной странице выглядит иначе, чем на другой. Второе преимущество — скорость: изменение компонента автоматически обновляет все его экземпляры. Третье — удобство передачи в разработку: разработчик получает не набор разрозненных картинок, а описанную систему элементов с состояниями.

В Figma дизайн-система реализуется через компоненты и их варианты, а также через стили цвета и текста. Стили позволяют задать цвет или шрифт один раз и применять его ко всем элементам: при изменении стиля обновляется весь макет. Это особенно важно при финальной доработке, когда требуется, например, изменить оттенок акцентного цвета во всём проекте.

---

2 ПРАКТИЧЕСКАЯ ЧАСТЬ (новая страница)

2.1 Анализ предметной области и целевой аудитории

Целевая аудитория магазина спорттоваров неоднородна, и её удобно описать через несколько групп. Первая группа — любители фитнеса и тренажёрного зала в возрасте 18–35 лет. Для них важны одежда и обувь для тренировок, аксессуары, гантели и другой инвентарь для домашних занятий. Они привыкли покупать онлайн, чувствительны к удобству каталога и скорости оформления заказа.

Вторая группа — бегуны и велосипедисты в возрасте 25–45 лет. Эти покупатели чаще сравнивают характеристики, читают отзывы и обращают внимание на бренд и материалы. Для них важны подробные фильтры и информативные карточки товара.

Третья группа — родители, приобретающие экипировку для детей. Они ориентируются на возрастные категории, размеры и безопасность, поэтому в каталоге важны понятные категории детского спорта и подсказки по подбору размера.

Четвёртая группа — команды и секции, совершающие оптовые заказы. Для них важны наличие товара в нужном количестве и условия доставки, поэтому в структуре сайта предусмотрены страницы с контактами и информацией о магазине.

Основные сценарии пользователя: поиск товара через категорию или строку поиска, сравнение и добавление в корзину, оформление заказа; покупка по акции из блока хитов продаж; подбор экипировки по фильтрам. Каждый сценарий должен укладываться в минимальное число переходов, иначе пользователь уходит к конкуренту.

2.2 Структура и карта сайта

Структура сайта включает главную страницу, каталог с категориями (фитнес и тренажёры, бег, велоспорт, зимний спорт, единоборства, детский спорт), карточку товара, корзину, оформление заказа, личный кабинет, страницы о магазине и контактов. Такая структура покрывает основные сценарии покупателя и оставляет место для расширения ассортимента без переработки навигации.

Для прототипа выбраны шесть ключевых экранов: главная страница, каталог с фильтрами, карточка товара, корзина, оформление заказа и мобильная версия главной. Выбор обусловлен тем, что именно эти экраны образуют основной путь покупателя от знакомства с магазином до оформления заказа. Второстепенные страницы (личный кабинет, о магазине, контакты) в прототип не включены, поскольку не влияют на проверку основного сценария покупки.

2.3 Разработка дизайн-системы

Цветовая палитра построена на трёх уровнях. Основной цвет #1E3A8A (тёмно-синий) используется в шапке, заголовках и навигации и ассоциируется со спортом и надёжностью. Акцент #F97316 (оранжевый) применяется для кнопок добавления в корзину и отметок о скидках, чтобы привлекать внимание к целевым действиям. Фон #F8FAFC и цвет текста #0F172A обеспечивают высокий контраст и читаемость.

Типографика построена на семействе Inter. Заголовки набираются Inter Bold размером 24–40 px, основной текст — Inter Regular 14–16 px, кнопки — Inter SemiBold. Выбор одного семейства обеспечивает визуальное единство и упрощает передачу макета в разработку.

Компоненты в Figma включают кнопки с вариантами состояний (обычная, при наведении, неактивная), поля ввода и поиска, карточку товара с вариантами (со скидкой и без, в наличии и нет в наличии), навигационное меню, футер и фильтры. Сетка двенадцатиколоночная, отступы 24 px, ширина контейнера 1200 px. Такая сетка привычна для интернет-магазинов и позволяет располагать товары в три или четыре колонки в зависимости от ширины экрана.

2.4 Создание макетов ключевых экранов

Главная страница содержит шапку с логотипом, поиском и корзиной, баннер с акцией, блок категорий, хиты продаж, блок преимуществ и футер. Баннер с акцией выделен акцентным цветом и ведёт в каталог соответствующей категории. Блок категорий представлен шестью карточками с иконками, что позволяет быстро перейти к нужному разделу. Блок преимуществ сообщает о доставке, гарантии и возврате и формирует доверие к магазину.

Каталог включает левую панель фильтров, сетку товаров, сортировку и пагинацию. Фильтры позволяют выбрать вид спорта, бренд, цену и размер. Сортировка даёт возможность упорядочить товары по цене, популярности и новизне. Пагинация разбивает длинный список на страницы и снижает нагрузку на восприятие.

Карточка товара содержит галерею фотографий, информацию о товаре, выбор размера, кнопку добавления в корзину, описание, характеристики и отзывы. Галерея расположена слева, информация — справа, что соответствует привычному для покупателей расположению. Кнопка добавления в корзину выделена акцентным цветом и расположена рядом с выбором размера, чтобы пользователь не искал её по странице.

Корзина отображает список товаров с возможностью изменения количества, итоговую сумму и кнопку оформления заказа. Рядом с итоговой суммой предусмотрено поле для промокода. Оформление заказа включает форму с контактными данными, выбор доставки и оплаты, краткую сводку заказа. Сводка заказа рядом с формой позволяет пользователю видеть итог, не возвращаясь в корзину.

Мобильная версия использует бургер-меню, компактные карточки и закреплённую кнопку корзины. Компактные карточки показывают фотографию, название и цену, а второстепенная информация скрыта, чтобы список товаров не растягивался на большое число экранов.

2.5 Интерактивный прототип и его тестирование

В Figma экраны связаны переходами через режим Prototype. Настроены переходы по клику на категорию, карточку товара, кнопку добавления в корзину и кнопку оформления заказа. Добавлены оверлеи для модальных окон и анимация Smart Animate для плавных переходов между экранами.

Прототип проверен на пяти пользователях, не знакомых с макетом заранее. Каждому участнику предлагалось найти конкретный товар, добавить его в корзину и оформить заказ. В ходе проверки фиксировались затруднения и время выполнения задач.

По результатам проверки выявлены замечания: неочевидный фильтр цены (пользователи не сразу понимали, как задать диапазон), мелкая кнопка добавления в корзину на мобильном экране, отсутствие хлебных крошек в каталоге. После внесения правок — добавления подписей к фильтру цены, увеличения кнопки и добавления хлебных крошек — среднее время оформления заказа составило около двух минут, и все участники находили нужный товар.

2.6 Оценка удобства прототипа и выводы по результатам проверки

Проведённая проверка показала, что прототип в целом решает поставленную задачу: основной сценарий покупки проходится без посторонней помощи, а возникшие затруднения относились к отдельным элементам, а не к структуре в целом. Это подтверждает правильность выбранной структуры сайта и распределения блоков на ключевых экранах.

Вместе с тем проверка выявила ограничения прототипа. Во-первых, прототип не содержит всех состояний интерфейса: например, не описаны состояния ошибок при оформлении заказа и пустой корзины. Во-вторых, проверка проведена на небольшой выборке, поэтому её результаты следует рассматривать как предварительные. В-третьих, прототип не включает второстепенные страницы, которые также влияют на пользовательский опыт.

Для дальнейшей работы можно рекомендовать дополнить прототип состояниями ошибок, расширить проверку на большее число пользователей и добавить второстепенные страницы. Эти доработки не меняют структуру прототипа и могут быть выполнены на его основе.

---

ЗАКЛЮЧЕНИЕ (новая страница)

В ходе работы разработан прототип интернет-магазина спортивных товаров в Figma. Изучены теоретические основы прототипирования, возможности Figma, принципы проектирования e-commerce, понятия пользовательского опыта и юзабилити, а также роль дизайн-системы. Проведён анализ целевой аудитории, построена карта сайта, создана дизайн-система, выполнены макеты шести ключевых экранов и интерактивный прототип.

Создан целостный визуальный стиль магазина: выбраны основная и акцентная палитры, типографика, сетка и библиотека компонентов. Обеспечена логичная навигация и быстрый путь к заказу: от главной страницы через каталог и карточку товара к корзине и оформлению заказа. Прототип протестирован на пользователях и доработан по итогам проверки: уточнён фильтр цены, увеличена кнопка добавления в корзину на мобильном экране, добавлены хлебные крошки.

Практическая значимость работы состоит в возможности передачи прототипа разработчикам для вёрстки и создания рабочего сайта. Прототип описывает структуру, визуальный стиль и основные сценарии, поэтому может служить основой технического задания. В дальнейшем возможны расширение каталога, добавление второстепенных страниц, описание состояний ошибок и интеграция с системой управления контентом.

Цель работы достигнута, задачи выполнены.

---

СПИСОК ИСПОЛЬЗОВАННЫХ ИСТОЧНИКОВ (новая страница)

1 Купер А., Рейман Р., Кронин Д. Об интерфейсе. Основы проектирования взаимодействия. — Санкт-Петербург : Питер, 2020. — 720 с.
2 Круг С. Не заставляйте меня думать. — Москва : Эксмо, 2021. — 256 с.
3 Нильсен Я. Юзабилити-инжиниринг. — Москва : Вильямс, 2019. — 512 с.
4 Документация Figma. — URL: https://help.figma.com (дата обращения: 01.11.2026).
5 Material Design. — URL: https://m3.material.io (дата обращения: 01.11.2026).
6 ГОСТ 7.32-2017. Система стандартов по информации, библиотечному и издательскому делу. Отчёт о научно-исследовательской работе. Структура и правила оформления. — Москва : Стандартинформ, 2017. — 32 с.

---

ПРИЛОЖЕНИЕ А (новая страница)

Скриншоты макетов прототипа

Рисунок А.1 — Главная страница
Рисунок А.2 — Каталог с фильтрами
Рисунок А.3 — Карточка товара
Рисунок А.4 — Корзина
Рисунок А.5 — Оформление заказа
Рисунок А.6 — Мобильная версия

---

Как добить до ровно 20 листов: после переноса в Word проверь фактическое число страниц. Если не хватает 1–2 листов, вставь в приложение скриншоты макетов (каждый на отдельной странице) и добавь в раздел 2.4 по одному абзацу описания на каждый экран. Если получилось больше 20 — сократи раздел 1.5 и убери из 2.6 последний абзац.