Дизайн-система для Интернет Магазина Стадион

Роль
UX/UI Designer
Сфера
FinTech
Срок работы
6 месяцев
Год
2023
О проекте
Весной 2024 года к нам обратился владелец офлайн-точки спортивных товаров. До этого он уже имел небольшой сайт на Tilda, через который осуществлялись онлайн-продажи, однако из-за ограниченных возможностей и отсутствия развитого функционала сайт не мог масштабироваться под растущие потребности бизнеса.
«Стадион» — это интернет-магазин спортивных товаров с широким ассортиментом: от профессиональной экипировки до стильной одежды для фитнеса.
Задача клиента
Клиент поставил задачу — создать крупный федеральный интернет-магазин «Стадион» с каталогом более 10 000 товаров, охватывающим различные виды спорта.
Он хотел, чтобы новый магазин был сопоставим по уровню с крупными игроками рынка, такими как «Спортмастер», Кант», «Декатлон», «Триал-спорт».
Потенциальные проблемы
Мы понимали, что масштаб проекта неизбежно приведёт к ряду сложностей:
  • Большое количество компонентов и сценариев усложнит поддержку и развитие проекта без единого стандарта.
  • Без единого визуального подхода интерфейс будет разрозненным, что снизит восприятие бренда.
  • Разработка новых страниц и функциональности займёт больше времени без переиспользования готовых решений.
  • Трудности с масштабированием проекта при росте ассортимента и функционала.
Чтобы избежать потенциальных проблем на старте и в будущем развитии проекта, мы предложили клиенту разработать полноценную дизайн-систему для «Стадиона».
Разработка дизайн-системы требовала дополнительных инвестиций на начальном этапе.
Однако мы показали клиенту, что эти вложения окупятся за счёт следующих преимуществ:
Наше предложение
Снижение стоимости развития проекта
С готовыми компонентами и шаблонами внесение новых изменений, запуск акций, добавление новых страниц и функций будет происходить быстрее и дешевле.
Ускорение выхода на рынок новых функций
Повторное использование готовых модулей существенно сокращает сроки проектирования и разработки.
Поддержание целостного фирменного стиля
Независимо от количества новых страниц и разработчиков в проекте, визуальная целостность и узнаваемость бренда останется стабильной.
Упрощение масштабирования
При росте ассортимента, категорий или запуске новых сервисов не потребуется перерабатывать сайт — достаточно будет адаптировать существующие элементы.
Минимизация ошибок и человеческого фактора
Готовые стандарты компонентов снижают вероятность ошибок и упрощают контроль качества.
Мы объяснили клиенту
Вложение в дизайн-систему — это не разовая трата, а стратегическое решение, которое создаст устойчивую основу для роста и развития бизнеса в онлайне.
Команда проекта
Для разработки дизайн-системы была собрана компактная, но эффективная команда:
Арт-директор
Я отвечал за разработку архитектуры дизайн-системы, контроль визуальной стилистики, организацию работы дизайнеров и взаимодействие с разработчиками.
UI/UX-дизайнеры
Создавали и документировали компоненты на основе выбранной методологии и визуальных гайдлайнов.
Тестировщики
Проверяли качество отображения компонентов и соответствие спецификациям.
Фронтенд-разработчики
Адаптировали компоненты в Storybook, настраивали переменные и обеспечивали техническую совместимость с системой разработки.
Бэкенд-разработчики
Обеспечивали интеграцию дизайн-системы с CMS-платформой и внутренними сервисами.
Командная работа позволила построить масштабируемую, устойчивую и удобную в поддержке дизайн-систему, которая стала основой для развития цифровых продуктов "Стадиона".
При разработке дизайн-системы для интернет-магазина "Стадион" мы опирались на лучшие практики в области проектирования сложных цифровых экосистем.
В основе нашей работы лежали пять ключевых принципов:
Подход к созданию дизайн-системы
Атомарность
Блочный подход
Универсальность
Консистентность
Доступность
Мы применили методологию Atomic Design, структурируя все элементы от самых мелких «атома» до масштабных интерфейсных блоков.
Мы выделили пять основных групп дизайн-токенов:
  • Цветовая палитра — базовые и функциональные цвета, построенные на основе брендбука.
  • Отступы и интервалы — стандартизированные расстояния между элементами.
  • Точки перестроения — адаптивные размеры для разных устройств.
  • Тени и скругления — для визуальной глубины и дружелюбности интерфейса.
  • Размер типографики — отдельные токены для десктопа и мобильных устройств.
Атомарность
Цвет
Мы взяли основные цвета из брендбука Стадиона и сделали из них примитивы
У нас есть специальный набор токенов, с помощью которых мы выстраиваем наши цветовые палитры. Каждая группа отвечает за свою функциональность, каждый элемент использует определённую группу цветовых токенов.
Таким образом, если нам нужно будет внести какие-то изменения в цвета, мы можем обратиться к токену. А когда мы вносим изменения в корневой токен, то меняем всё, что было построено на его основе.
Отступы
Дизайн-токены отвечают не только за цвета, но и за пространство между элементами. Используя токены отступов и интервалов, мы можем легко управлять пространством между кнопками, блоками, текстом и другими компонентами.
Точки перестроения
Также у нас есть точки перестроения — это дизайн-токены, которые помогают адаптировать интерфейс под разные размеры экрана. Они задают границы, при переходе через которые наши макеты автоматически подстраиваются под нужное устройство. Наши основные точки перестроения — для десктопа, планшета и мобильных устройств.
Текст
В нашей дизайн-системе есть отдельные наборы текстовых токенов для десктопных и мобильных устройств. Это позволяет нам сохранять оптимальную читаемость текстов. Таким образом, один и тот же текст, которому назначен заголовок Title M, будет адаптироваться под разные экраны, меняя свой размер в зависимости от типа устройства.
Скругления
Также у нас есть скругления. Скругления делают интерфейс более дружелюбным и визуально комфортным для пользователей.
Мы строили макеты как набор взаимозаменяемых блоков, вдохновляясь методологией БЭМ (Блок-Элемент-Модификатор).
Каждый элемент — это самостоятельный «кубик», который можно легко встроить в наши макеты, что обеспечивает их гибкость и масштабируемость.
Блочный подход
  • Лейаут — задаёт структуру: где будет шапка, где тело, где подвал.
  • Паттерн — повторяющиеся элементы, из которых строится весь интерфейс (например, карточки товаров, списки, кнопки).
  • Контент — уже конкретный текст, картинки и данные, которые заполняют паттерны.
Мы делим макеты на три слоя:
Зачем это нужно в Дизайн-Системе?
Масштабируемость
Проще строить большие проекты. Новые страницы создаются из уже готовых "кубиков".
Единообразие
Все дизайнеры и разработчики используют одни и те же компоненты и правила, интерфейс выглядит всегда единообразно.
Экономия времени
Не нужно каждый раз рисовать кнопки, карточки и лэйауты с нуля. Просто собираешь из готовых паттернов.
Лёгкость обновлений
Хочешь изменить радиусы всех карточек? Меняешь один токен — и всё само обновляется.
Следовать принципам универсальности — значит создавать такие компоненты, которые можно легко адаптировать и использовать в разных сценариях и продуктах.
Рассмотрим на примере компонента TitleBody, который состоит из двух частей: TitleBodyLeading, и TitleBodyTrailing. Каждую можно подстраивать под определённые нужды. Так мы получаем большой и гибкий, но при этом элегантный компонент с множеством вариаций.
Универсальность
Этот компонент хорош в перевоплощении, и его можно использовать в разных сценариях. TitleBody по праву можно называть компонентом — швейцарским ножом.
Это основа для создания интуитивно понятных и удобных интерфейсов. Помогает сделать так, чтобы у пользователя не было ощущения, будто каждый компонент существует сам по себе.
Единообразие делает продукт цельным, что улучшает пользовательский опыт и повышает эффективность работы с ним.
Мы выделяем четыре группы консистентности:
Консистентность
Сюда относятся цветовая палитра, типографика, иконография, отступы и интервалы. Согласованность этих групп помогает пользователям легче ориентироваться в продукте и больше ему доверять.
Визуальная
Чтобы понять, для чего она нужна, возьмём нашу библиотеку компонентов — Ul Kit. Без модификаций мы используем её в наших проектах более десяти тысяч раз.
Это достаточно большая цифра, которая показывает, как часто мы применяем одни и те же элементы из нашего «конструктора». И мы знаем, что эти элементы действуют одинаково и предсказуемо.
В функциональную консистентность также входят различные гайды, по которым мы работаем.
Функциональная
Выстраивается по нашим гайдам, помогает создавать понятные и дружелюбные тексты для пользователей.
Семантическая
Доступность
И последний (но не по значимости!) принцип. Гарантирует, что все пользователи, независимо от качества их устройств, от их физических, и когнитивных особенностей, смогут эффективно взаимодействовать с нашим продуктом.
Выстраивая наши правила доступности, мы ориентируется на международный стандарт WCAG и на ГОСТ.
Основные аспекты доступности:
Цветовая палитра
Типографика
Визуальная валидация
Навигация
Мы проверяем компоненты на контрастность и регулируем размер шрифта, обеспечивая их хорошую читаемость.
Также уделяем внимание доступной навигации и понятной визуальной валидации, чтобы пользователи могли легко и комфортно проходить наши сценарии.
Результат
В результате создания дизайн-системы "Стадион" мы достигли следующих эффектов:
Снижение затрат на разработку
Повторное использование компонентов и стандартизированная библиотека сократили время и стоимость внедрения новых страниц и функций.
Ускорение выхода новых функций на рынок
Готовая дизайн-система позволила переиспользовать компоненты. Время на проектирование и разработку новых разделов магазина значительно сократилось без необходимости переработки интерфейсов.
Упрощение масштабирования
Благодаря модульной структуре стало проще добавлять новые категории товаров, запускать маркетинговые кампании и внедрять дополнительные сервисы.
Усиление бренда в цифровой среде
Единая визуальная система повысила узнаваемость бренда и обеспечила целостность восприятия "Стадиона" как надёжного и современного продавца.
Создание дизайн-системы для интернет-магазина "Стадион" стало важным стратегическим шагом для устойчивого роста проекта.
Я не только выстроил архитектуру системы и организовал работу команды дизайнеров, но и заложил фундамент, который позволил ускорить развитие продукта, сохранить целостность бренда и оптимизировать бизнес-процессы.
Мой опыт в проектировании комплексных дизайн-систем позволяет создавать эффективные цифровые продукты, масштабируемые и удобные как для пользователей, так и для бизнеса.
Вывод