Ozon · один из трёх дизайнеров · 2022 · webДизайн-система для лендингов Ozon
В Ozon каждый день десятки дизайнеров собирают лендинги и промо-страницы. Нам поручили сделать дизайн-систему со свежим визуалом, чтобы страницы собирались быстрее и выглядели современно. Нас было трое, я отвечал в основном за интерфейсную часть и структуру.
Точка старта
Начали с базы: старый UI kit и сотни лендингов, которые давно от него ушли. Разобрали компоненты — каких не хватает, что обновить, а что оставить в прошлом. Потом изучили самые популярные блоки и приёмы на живых лендингах: важно было сохранить привычные решения и освежить их новыми стилями.
Лендинги, которые разбирали
Структура
Сделали документацию, вынесли шрифты и цвета в отдельные файлы и разложили компоненты по страницам Figma по атомарному подходу. На каждой странице — заголовок раздела, ссылка на документацию и шаблоны с примером использования.
Стилистика
Визуал разделили на три части: типографика, цвета и эффекты, скругления. Главная фишка — новая крупная акцентная типографика: гарнитура работает на полную, и «вау» получается без лишних украшений. Ещё собрали 70 цветовых стилей по сценариям, новые блюры и плашки, сглаживание углов и систему теней.
Компоненты
В основе — наборы готовых решений, из которых дизайнер собирает страницу как из «Лего». Шаблон выбирается через экземпляры под свой контент, а у каждого компонента есть варианты: размер шрифта, выравнивание, высота, иллюстрация. Экран собирается за пару минут.
Правила и адаптив
Прописали правила построения: колонки, отступы, размеры, цвета и типографику. Они держат консистентность и помогают быстрее ввести в курс дела новых дизайнеров. Каждый компонент и шаблон адаптивен в трёх брейкпоинтах — у дизайнеров остаётся время на креатив и логику, а не на ресайзы.
Видео: как работает адаптив ↗
Результат
На новом UI kit уже собрали сайты Ozon Seller, Ozon Реклама, Ozon Rocket и промо брендирования авто. Следующий шаг — масштабировать компоненты на все команды и завести единый Storybook.
