---

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

Важно: Это план-каркас для написания. Вам нужно будет наполнить его конкретным текстом, скриншотами вашего макета в Figma и расчетами (если требуются). Объем и оформление (шрифт Times New Roman 14, интервал 1.5, поля) уточните в методичке вашего вуза .

---

Курсовая работа

Тема: Разработка интерактивного прототипа интернет-магазина спортивных товаров средствами Figma

Введение

Актуальность. Рынок спортивных товаров в России характеризуется высокой конкуренцией и активным переходом в онлайн-среду. Потребитель expects удобный и быстрый способ выбора экипировки. В условиях, когда крупные сети (например, «Спортмастер») занимают значительную долю рынка , малому и среднему бизнесу необходимо предлагать пользователям качественный цифровой опыт. Инструменты прототипирования, такие как Figma, позволяют на ранних этапах проверить удобство интерфейса (UX) и визуальную концепцию (UI) без затрат на разработку.

Объект исследования: Процесс проектирования пользовательского интерфейса интернет-магазина.
Предмет исследования: Технология создания интерактивного прототипа интернет-магазина спортивных товаров в программе Figma.
Цель работы: Разработать интерактивный прототип интернет-магазина спортивных товаров, готовый к передаче в разработку или верстку.

Задачи:

1. Изучить теоретические основы UX/UI дизайна и возможности Figma для e-commerce.
2. Провести анализ целевой аудитории и конкурентов в сфере спортивного ритейла.
3. Разработать структуру (wireframe) и визуальный стиль магазина.
4. Создать интерактивный прототип с основными пользовательскими сценариями (каталог, карточка товара, корзина).
5. Провести юзабилити-тестирование прототипа (опционально, если требуется по методичке).

---

Глава 1. Теоретические аспекты проектирования интернет-магазина

1.1. Специфика UX/UI дизайна для e-commerce
В разделе описывается, чем отличается дизайн магазина от лендинга. Ключевой акцент делается на каталоге и карточке товара. Пользователь принимает решение о покупке, изучая характеристики и наличие. Важно упомянуть «правило трех кликов» и необходимость минимизации шагов при оформлении заказа (чекаут). Согласно исследованиям, около 70% пользователей бросают корзину, и одна из главных причин — сложный или неочевидный процесс оформления .

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

· Компоненты (Components): создание переиспользуемых элементов (кнопки, карточки товаров) для быстрого редактирования.
· Варианты (Variants): создание состояний кнопок (обычная, при наведении, нажатая) или карточек (скидка, нет в наличии) .
· Auto Layout: адаптивность элементов под разную длину текста (например, длинное название товара).
· Prototype (Prototype tab): связывание экранов для имитации переходов по клику.

---

Глава 2. Анализ и проектирование магазина спортивных товаров

2.1. Анализ целевой аудитории и конкурентов
Краткий анализ (можно оформить в виде таблицы):

· ЦА: Люди от 18 до 45 лет, ведущие активный образ жизни. Сегменты: профессиональные спортсмены (нужны характеристики), любители (нужен стиль и цена), родители (покупают детям).
· Конкуренты: «Спортмастер» (широкий ассортимент, но сложная навигация из-за огромного числа брендов), «Decathlon» (акцент на низкие цены и простоте), локальные магазины.
· Вывод: Прототип должен сочетать простоту навигации (как у Decathlon) и акцент на визуальной привлекательности товара.

2.2. Разработка структуры (Wireframe) и пользовательских сценариев
Опишите экраны, которые вы нарисовали в Figma (Low-fidelity):

1. Главная страница: Баннер с акцией, блок «Новинки», категории (Обувь, Одежда, Тренажеры, Питание).
2. Каталог: Фильтры (по виду спорта, бренду, размеру, цене). Сетка товаров.
3. Карточка товара: Фото, цена, выбор размера, кнопка «В корзину», блок «Похожие товары».
4. Корзина: Список выбранного, итоговая сумма, кнопка «Оформить заказ».

---

Глава 3. Практическая реализация прототипа в Figma

3.1. Дизайн-концепция и UI Kit
В этом разделе опишите визуальный стиль:

· Цветовая палитра: Например, темно-синий (ассоциируется со спортом и надежностью) + яркий акцент (оранжевый или лаймовый для кнопок действия).
· Типографика: Шрифты без засечек (например, Inter или Roboto) для лучшей читаемости на экранах .
· Иконки: Линейные иконки для категорий.

3.2. Создание компонентов и интерактивных состояний
Опишите, как вы использовали Figma:

· Создали Component Set для карточки товара. Внутри настроили свойства (Property), чтобы можно было переключать наличие скидки или статус «Нет в наличии».
· Создали прототип главной страницы. Настроили взаимодействие (Interaction): при клике на категорию «Обувь» происходит переход (Navigate to) на фрейм «Каталог обуви».
· Настроили Smart Animate (если использовали) для плавного перехода между экранами.

3.3. Тестирование прототипа (если предусмотрено)
Опишите, как вы отправляли ссылку на прототип (Presentation view) друзьям или одногруппникам. Какие замечания были получены (например, «непонятно, как вернуться назад» или «кнопка маленькая») и как вы их исправили.

---

Заключение

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

Список использованных источников

1. Официальный сайт Figma (раздел обучения и справки).
2. Руководство по UX/UI дизайну (например, книги Алана Купера или статьи на Habr).
3. Методические указания по выполнению курсовой работы (вашего вуза) .
4. Исследование Baymard Institute о брошенных корзинах (Cart Abandonment) .

---

Приложение А
Ссылка на интерактивный прототип в Figma (режим Presentation).
Приложение Б
Скриншоты основных экранов (Главная, Каталог, Карточка, Корзина) и UI Kit (кнопки, цвета, шрифты).