Дизайн-система и адаптивы для сайта катка в Сколково The Rink

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

Контекст

Мои задачи на проекте:
1.Создание набора компонентов для экономии ресурсов и удобства разработки.
2.Разработка дизайн-системы, отражающей все визуальные элементы сайта.
3.Введение структуры и стандартов для упрощения работы команды дизайнеров и разработчиков.
4.Разработка адаптивных версий сайта.

Роль

1.Изучила и проанализировала текущие макеты.
2.Создала базовые токены (цвета, типографику, отступы и сетку).
3.Разработала набор универсальных компонентов: кнопки, инпуты, формы, карточки и.т.д.
4.На основе собранных компонентов разработала адаптивы для обеих тем сайта.
5.Подготовила подробную документацию для разработчиков, описывающую структуру компонентов, принципы их использования и взаимодействия.

Дизайн-процесс

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

Результаты