Дизайн-система

Состав команды: 6 дизайнеров

Моя роль: ведущий дизайнер

Задача: ускорить разработку продуктов экосистемы и сохранить при этом консистентность.

О дизайн-системе

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

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

Все проекты экосистемы DLS разработаны на основе данной дизайн-системы.

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

Стили

Базовая единица

Мы продумали систему размеров, интервалов, скруглений и обводок. Чтобы интерфейс был визуально сбалансирован, большинство измерений соответствуют базовой единице в 4px. Все размеры элементов, расстояния между элементами должны стремится к размеру, кратному базовой единице.

Размер компонентов изменяется с шагом 4px, что обеспечивает единый визуальный ритм на каждом экране.

Мы выбрали систему наименований значений в формате “маек” для удобного обозначения.

Палитра цветов

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

*на изображении показана часть палитры, всего палитра насчитывает более 180 цветов

Типографика

Основным шрифтом продуктов был выбран Roboto. Мы предусмотрели четыре набора шрифтов - для крупных заголовков, для обычных заголовков, для основного текста и для подписей.

Для каждого набора шрифтов представлены 4 типа толщины от regular до bold и три типа начертания - обычный, курсив и подчеркнутый.

Иконки

Было разработано более 150 иконок. Большинство иконок имеют строковый стиль. Все иконки разделены на подгруппы в зависимости от области их применения. Для удобства разработчиков иконки были преобразованы в шрифт.

Основные элементы

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