Дизайн-система — это набор правил, компонентов и инструментов, который помогает дизайнерам и разработчикам программного обеспечения работать наиболее эффективно и согласованно. Она включает в себя всё: от цветовых палитр и шрифтов до кнопок, форм и правил взаимодействия с ними. Когда в проекте есть своя дизайн-система, команды могут быстро создавать новые элементы и страницы, избегая неразберихи и повышая качество своего продукта, а пользователи в свою очередь получают интуитивно понятный интерфейс, с которым приятно иметь дело. 

Я разработчик в компании bpm (ранее “ЛАНИТ - Би Пи Эм”). Столкнувшись с хаосом в интерфейсах и постоянными правками, я решила изучить, как можно организовать процесс создания дизайн-системы самостоятельно. Результат вы видите в этой статье. Очень надеюсь, что описанные правила помогут вам сделать первые шаги в создании дизайна для вашего проекта.

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

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

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

Основные правила

Раньше мне казалось, что для создания приятного и красивого приложения нужно обладать каким-то огромным творческим потенциалом. Где-то ходят те самые дизайнеры, которые долго учились, и у них все так круто получается. А я что? Просто кнопки крашу по их макетам. Однако, когда я погрузилась в тему чуть глубже, оказалось, что дизайн – это тоже набор основных правил. Соблюдая их, можно добиться того, что интерфейс будет удобным и пользователю и разработчику.

Итак, что нужно запомнить в первую очередь?

Упрощение. Золотое правило хорошего интерфейса. Все, что можно убрать – убираем. Лишние рамки, разделители, кнопки с дублирующимися действиями.

Понятность и доступность. Не лишним будет периодически останавливать себя и смотреть на приложение взглядом новичка, который впервые его открыл. Насколько интуитивны действия? Удобно ли расположены кнопки? Многие приемы пользователям уже интуитивно знакомы, не стоит их ломать. К примеру, мы привыкли видеть списки вертикально, не стоит придумывать велосипед и располагать элементы по горизонтали.

Компоновка. Во-первых, размеры отступов: расстояния должны быть кратны четырем пикселям. Использование сетки, основанной на кратных четырем отступах, помогает создавать пропорциональные и гармоничные интерфейсы. Во вторых, с помощью расстояний можно группировать логические единицы. К примеру, у вас на странице есть блок с информацией и форма для заполнения. Между ними можно установить расстояние 24 пикселя. А вот между элементами, которые находятся в одной форм, – 12. Цифры условны и зависят от ваших потребностей, но суть, думаю, ясна.

Единообразие. Его лучше придерживаться во всем: в цветах, в размерах, стилях. Яркий пример - на скрине ниже.

План действий

Для себя я выделила несколько пунктов.

• Выбор цветовой палитры

• Определение шрифтов

• Фиксация основных значений

• Наполнение UI-кита

• Компоновка более сложных элементов

• Описание принципов работы

Сделать это все можно разными способами. Выбирайте, какой вам по душе. Можно создать компоненты в Figma или Pixso. Можно взять какую-то готовую библиотеку с дизайн-системой и изменить ее под себя. А можно просто по хардкору начать разрабатывать прямо в проекте.

Цвет

Мне всегда хочется начать с выбора цветов. Они меня вдохновляют. Поэтому первым делом я как настоящий художник набираю свою палитру. Выбор цвета – задача не тривиальная. Цвет должен соответствовать, как минимум трем критериям: быть визуально приятным, соответствовать своему назначению, сочетаться со всеми остальными цветами.

Чтобы случайно не переборщить, выберем только самые необходимые.

• Основной цвет фона. Он должен быть максимально нейтральным. Если вы обратите внимание, то заметите, что в большинстве интерфейсов он белый. Может показаться, что это банально и скучно, но белый не отвлекает на себя внимание и обеспечивает хороший контраст с текстом. А нам стоит помнить о том, что интерфейс должен быть не только стильный, модный, молодежный, но и максимально юзер-френдли.

• Дополнительный цвет фона. Пригодится для того, чтобы помещать какие-то элементы перед фоном, выделяя их цветом, но при этом обеспечивая читаемость текста.

• Цвет обводки – им будем красить разделители и рамки. 

• Цвета текста. Как и в случае с фоном, выбираем основной и дополнительный. С помощью цвета можно делить текст на странице по его смысловому значению, используя для этого не только его жирность и размер.

• Основной цвет. Он указывает на элементы, с которыми пользователю необходимо взаимодействовать: кнопки, чекбоксы, ссылки и т.д.

• Цвет ошибки – оттенок красного. Если пользователь неправильно заполнил форму, он поймет это, уже бросив беглый взгляд на страницу, даже не читая сообщение об ошибке. 

• Цвет успеха – оттенок зеленого. Тут тоже нам на руку играет паттерн “Зеленый – хорошо, красный – плохо”. 

Типографика

Следующий шаг – типографика. Иногда хочется добавить чего-то эдакого, например, красивый шрифт с засечками. Как правило, это не лучший вариант. Шрифты без засечек читаются легче. Советую выбирать их, не забывая об упрощении.

Самый минимум – это три размера заголовка, основной текст и дополнительный. Обычно в качестве размера основного шрифта используют 14-й кегль, для дополнительного – 12-й, меньше – только в самых крайних случаях.

Также важно унифицировать и остальные “числа”. Такие, как закругления углов (размер закругления внутренних элементов рекомендуется делать в два раза меньше, чем внешних), внутренние и внешние отступы (помним про группировку элементов с помощью расстояния).

Части и целое

Теперь можно приступать к разработке атомарных частей интерфейса. Это кнопки, инпуты, чекбоксы, уведомления и т.д. При их разработке соответственно используем только то, что определили в прошлых шагах. На этом же этапе прорабатываем различные состояния компонента. Если это кнопка, предусматриваем как минимум наведение на нее. Если это поле ввода, отображаем и ошибку при неправильном его заполнении.

А теперь мой самый любимый момент - собираем это все в красивый осмысленный блок.

Гайд

Конечно, все обозначенные выше правила не стоит держать в голове. Лучше оформить их в небольшой, но емкий документ. Так то, что вы собрали, станет похоже на настоящую “взрослую” дизайн-систему, и разработчик, который зайдет в проект, сможет в ней легко и быстро освоиться.  В документацию стоит включить описание основных компонентов, правил их использования, цветовых и типографских стилей, а также примеры правильного применения. Это позволит обеспечить единообразие и упростит поддержку проекта в будущем. Не стоит забегать сильно вперед и пытаться проработать все сразу. Дизайн-систему можно постоянно дорабатывать и масштабировать по мере роста проекта. В этом ее большое преимущество.

Когда у вас будет готов промежуточный результат, поступите как художник: отойдите от своей картины, взгляните на нее целиком и под другим углом. В идеале - покажите ваши наработки кому-то еще. И это не обязательно должен быть ваш будущий пользователь. Любой сторонний комментарий ценен, ведь вы разрабатываете приложение не для себя, а для других.

Не забывайте, что дизайн-система — это не статичный документ, а живой организм, который требует регулярного обновления и доработки. Начните с создания атомарных частей интерфейса и постепенно стройте вокруг них удобный и красивый проект.

 Ну и в конце хотелось бы оставить ссылки вам для вдохновения:

• Material Design от Google  

• Fluent Design от Microsoft

• Adobe Spectrum 

• Ant Design   

• Nord от Nordhealth 

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

 *Статья написана в рамках ХабраЧелленджа 4.0, который прошел в ЛАНИТ весной 2025 года. О том, что такое ХабраЧеллендж, читайте здесь.