Дизайн-система в клиентских проектах

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

По сравнению с крупными студиями из топа «Тэглайна», Reactive — небольшое агентство: штат дизайнеров — два–три человека. Над одним клиентским проектом редко работают одновременно два дизайнера. Чаще один проект — один дизайнер. Казалось бы, причем тут дизайн-системы, если нет командной работы над дизайном?

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

Расскажу о штуках, на которые я обращаю внимание и прорабатываю. Это поверхностный гид для начинающих веб-дизайнеров, менеджеров и руководителей проектов. Пригодится тем, кому предстоит делать большой проект.

Зачем нам дизайн-система

Задачи три: стандартизировать работу над долгосрочными проектами, ускорить проектирование и держать качество при работе разных дизайнеров.

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

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

Стандартизация приёмов помогает ускорить проектирование. Скорость — это деньги. Обычно бюджет и срок проекта зафиксированы. Поэтому жизнеспособность студии немало зависит от скорости работы.

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

Чтобы делать быстро и качественно, нужна система. Здесь качество зависит от степени проработанности дизайна. Ничто не должно быть произвольным или случайным.

Стандартизация — это уважение и забота о пользователе.

Сейчас у нас описаны три раздела: принципы работы с сеткой, типографикой и графикой. За полгода хотим систематизировать подходы к работе с цветом и анимацией.

Сетка

Микромодуль

Микромодуль 5х5 px
Микромодуль 5х5 px

Каждый интерфейс, который я проектирую, основан на сетке. Основа сетки — микромодуль, всё начинается с него. Я использую пятипиксельный модуль, то есть все размеры и отступы кратны пяти. Главная задача микромодуля — упростить решение.

Какой выбрать отступ между элементами — 10 px, 11 px, 12 px, 13 px, 14 px, 15 px? Можно потратить массу времени и энергии, если выбирать между близкими вариантами. Сразу тяжело выбрать, какой из них визуально лучше. Если умножить это на количество вариантов, где в интерфейсе нужно принять решение, то никакого времени не хватит.

Микромодуль отвечает на вопрос: или 10 px, или 15 px. Контраст в 5 px достаточно виден, чтобы сразу решить, какой лучше.

Часто студии используют четырёх или восьмипиксельные модули. Не так важно, какой модуль выбрать, главное, чтобы команде было понятно и удобно с ним работать. Мы выбрали пятипиксельный. Это упрощает счет: делить на пять проще, чем на четыре и восемь. Математику не обманешь.

Карточка товара. Каждый квадрат сетки — 5х5 px
Карточка товара. Каждый квадрат сетки — 5х5 px

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

Вертикальная сетка

Вертикальная сетка — обязательное составляющее адаптивного дизайна. Адаптивный — значит тот, который подстраивается под разные размеры экрана. Ширина экрана может быть 1024 px, 1200 px, 1440 px и так далее. При проектировании мы должны строить надёжную систему — одну для всех.

Я использую три разрешения экрана для адаптивных сайтов — 320 px для мобильных интерфейсов, 768 px для планшетов и 1440 px для десктопов. Три разрешения — это необходимый минимум. Кажется, что трёх мало и нужны промежуточные — для больших смартфонов, альбомной ориентации планшета, ноутбуков и 4К-десктопов.

Но дополнительные экраны — это дополнительное время на проектирование и разработку и дополнительные расходы для клиента.

Я использую стандартную 12-колоночную сетку. 12 колонок — это удобный стандарт, на котором легко построить множество комбинаций макромодулей. На 12 колонках легко строить и воздушные композиции с малым количеством элементов и высокодетализированные макеты.

Дизайн-система в клиентских проектах

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

Дизайн-система в клиентских проектах

Горизонтальная сетка

Горизонтальная сетка — это система вертикальных отступов. Она нужна, чтобы в большом проекте делать отступы между блоками предсказуемыми. Предсказуемость — это опять про понятность решений и скорость их принятия.

Какой лучше отступ между картинкой и текстом — 10 px, 15 px или 20 px? Как и в случае с микромодулем, система лучше, чем каждый раз выбирать на глаз.

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

Отступы строятся на микромодулях. В каждом проекте система своя — в зависимости от того, что нужно: плотность или воздух. Обычно достаточно четырёх–пяти видов отступов: между логическими этажами страницы; большой, средний и маленький между блоками внутри этажа; и, например, самый маленький — для отступа между иллюстрацией и подписью. Например, так:

Здесь минимальный отступ — 15 px. Остальные строятся на его базе: 2x15, 3x15, 5x15
Здесь минимальный отступ — 15 px. Остальные строятся на его базе: 2x15, 3x15, 5x15

Размер минимального отступа зависит от интерлиньяжа наборного текста. Например, наборный текст 16, 20 px, значит, минимальный шаг сетки — 20 px. Остальные отступы строятся от него. Это удобно, потому что текстовые блоки всегда будут заканчиваться на границе сетки.

Типографика строится так, чтобы каждая строчка попадала в шаг сетки
Типографика строится так, чтобы каждая строчка попадала в шаг сетки

Типографика

Использовать максимум два шрифтовых семейства

Работа с типографикой начинается с выбора шрифтовых пар. Выбор шрифта относится к работе над стилем сайта, поэтому это вопрос не стандартизации, а создания образа.

Правило: «Использовать не больше двух шрифтов», уходит корнями в печатную типографику. В «Эссе о типографике» Эрик Гилл пишет:

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

Эрик Гилл

Я думаю, что использовать не больше двух шрифтов учат потому, что в руках неопытного дизайнера сочетание более двух гарнитур выглядит неряшливо и хаотично. Найти гармонию между двумя шрифтами проще, чем между тремя или четырьмя. Но это не значит, что использовать больше двух запрещено. На сайте газеты «Ведомости» дизайнеры из Charmer использовали четыре шрифта: Arial, Georgia, Roboto Slab Serif и Fedra Sans.

Четыре шрифта гармонично сочетаются на одном экране
Четыре шрифта гармонично сочетаются на одном экране

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

Чтобы выбрать шрифтовую пару, я знаю четыре пути:

  • Выбрать один раз две–три любимые и работать с ними из проекта в проект.
  • Подсмотреть у крутых дизайнеров. Я ориентируюсь на Charmer. Мне кажется они самые сильные в работе с типографикой в России.
  • Использовать пару шрифтов из одной гарнитуры. Например PT Sans и PT Serif.
  • Использовать сервисы подбора пар. Например, комбинатор шрифтов Артема Помельникова.

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

  • в какой среде живут тексты;

  • какой и сколько контента;

  • сколько колонок занимают заголовки и параграфы;

  • какой объем воздуха нужен блокам.

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

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

Пример уже систематизированных стилей. По опыту обычно для проекта достаточно 10–12 стилей. Таким набором можно покрыть все задачи с условием адаптивности макетов
Пример уже систематизированных стилей. По опыту обычно для проекта достаточно 10–12 стилей. Таким набором можно покрыть все задачи с условием адаптивности макетов

Тут есть:

  • назначение (подзаголовок в статье);

  • семейство и плотности (Geometria Bold);

  • кегли и интерлиньяжи (24,36 px).

Все это для десктопа, планшета и мобильных устройств.

Минимизировать количество стилей

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

Одним стилем решать как можно больше задач.

Разнообразие стилей достигаю минимумом используемых кеглей. То есть строю на одном кегле несколько стилей. Например, 16 кеглем названия кнопок, маргиналии и выноски.

Дизайн-система в клиентских проектах

Важно понимать, что кегли нужно объединять осмысленно. Не стоит объединять кегли только потому, что на артборде они кажутся малоразличимыми. В интерфейсе разница в 2 пт может быть значимой. Покажу на простом примере.

На сайте Reactive Media мы используем 14, 16, 18, 21, 24, 32, 36, 56 кегли. Кажется, что между 14 и 16 небольшая разница — зачем использовать такие близкие кегли, может быть, от одного отказаться? Похожая ситуация с 21 и 24 кеглями, 32 и 36. Но отказаться не получилось.

Выноска (14 пт) чересчур контрастна к основному тексту (21 пт)
Выноска (14 пт) чересчур контрастна к основному тексту (21 пт)
Выноска (18 пт) недостаточно контрастна к основному тексту (21 пт)
Выноска (18 пт) недостаточно контрастна к основному тексту (21 пт)
Идеально
Идеально

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

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

Слева — не ок, все одним кеглем, глазу сложно выделить главное. Справа — классно, иерархия элементов очевидна.
Слева — не ок, все одним кеглем, глазу сложно выделить главное. Справа — классно, иерархия элементов очевидна.

Использовать кегельные ряды

Стили делю на интерфейсные и контентные. Интерфейсные — это стили статичных элементов сайта: навигации, выносок, ссылок, кнопок, элементов карточки товара и так далее. Контентные — это стили для текстовых страниц, которые клиент создаёт сам: новости, описание акций, описание условий продажи, технические страницы и так далее.

Синие — интерфейсные стили. Красные — контентные
Синие — интерфейсные стили. Красные — контентные

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

Наполнением контентных страниц дизайнер не управляет. Клиент может написать заголовок в четыре строки, а может в одно слово; может написать абзац из одной строчки, а может из 20. Поэтому важно для контента создавать надежную систему.

Для контентных стилей я придумываю систему кеглей, чтобы выстраивались ряды с логикой. Например, 12, 18, 24, 36, 48, 72. Тут все делится на 6 или 12. Или 15, 20, 30, 60, 100 — тут на 15 или 20. Кажется, что так получаются более гармоничные шрифтовые композиции.

На сайте Reactive для контента используем 14, 21, 36 и 56 кегли — ряд с делением на 7 (вместо 35 взяли 36 кегль как более привычный в использовании).

Система может сломаться об контент. Увидеть и проверить это можно только при тестировании на «живом материале». В дизайне карточек проектов для названия проекта я использовал 21 кегль.

<p>Разрешение 1440 px, названия проектов в 21 пт</p>

Разрешение 1440 px, названия проектов в 21 пт

При проверке на маленьких экранах, длинные слова вроде «государственных», «информационный» не входили в ширину карточки.

<p>Разрешение 1024 px, названия проектов в 21 пт</p>

Разрешение 1024 px, названия проектов в 21 пт

В обход системы в карточках названия проектов уменьшили до 18 пт. Элементы стали менее контрастными, но зато контент выглядит аккуратно.

Разрешение 1024 px, названия проектов в 18 пт
Разрешение 1024 px, названия проектов в 18 пт

Графика

Использовать размеры, кратные пяти

Как писал выше, в макетах я использую микромодульную сетку основанную на 5 px. Рисуя иконку, я вписываю ее в квадрат, состоящий из микромодулей. Размеры квадрата кратны пяти. Так иконку удобнее располагать в макете. При этом, размер самой иконки определяет оптическая сетка.

<p>Фрейм иконки — 30 px. Размер контентной области — 20 px</p>

Фрейм иконки — 30 px. Размер контентной области — 20 px

Использовать оптическую сетку

Оптическая сетка нужна, чтобы иконки в наборе имели одинаковый визуальный вес. Так набор будет более целостным. Как правило, иконки сводятся к шести базовым формам: квадрат, круг, треугольник, горизонтальный, вертикальный и диагональный прямоугольники.

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

Дизайн-система в клиентских проектах
Дизайн-система в клиентских проектах

Использовать пиксельную сетку

Пиксельная сетка нужна, чтобы иконки выглядели резкими на экранах без Retina. Для этого надо:

  • Располагать опорные точки в целочисленных значениях. Не 8,93 px, а 9 px. «Вываливание» опорных точек за границы пикселя приводит к размыванию иконки на неретиновых экранах.
<p>Сверху не ок, снизу ок</p>

Сверху не ок, снизу ок

  • Не использовать выравнивание линии по центру. Для контурных иконок границу шириной в 1 px лучше выравнивать по внутренней или внешней стороне, но не по центру. Выравнивание по центру приведёт к полупрозрачным пикселям, иконка будет выглядеть размытой.
Дизайн-система в клиентских проектах
  • Использовать углы в 45 градусов. Сглаживание неровностей при 45 градусах производится равномерно: активные пиксели хорошо прилегают друг к другу. Если стиль иконки не позволяет использовать 45 градусов, то лучше использовать кратные 45: 22,5, 30, 60. Диагонали с такими углами выглядят четче, чем с нестандартными (например, 18,5 градуса).
Верхняя иконка будет выглядеть размытой при 100%. Хотя при увеличении выглядит достаточно четко. Нижняя будет четкой всегда
Верхняя иконка будет выглядеть размытой при 100%. Хотя при увеличении выглядит достаточно четко. Нижняя будет четкой всегда

Придерживаться одного стиля

Стандартизация стиля внутри набора помогает сохранить узнаваемость. В наборе я делаю одинаковыми:

  • Толщину. Например, 2 px для крупных деталей и 1 px для мелких.
Дизайн-система в клиентских проектах
  • Скругления. Это придаёт набору единство формы.
Дизайн-система в клиентских проектах
  • Размеры промежутков. Расстояние между близкими элементами не должны быть слишком маленькими, иначе контуры «слипнутся». Минимальный размер промежутка — толщина линии.
Дизайн-система в клиентских проектах
  • Заливку. Либо все иконки с заливкой, либо все без. Если одни залить, то может показаться, что они важнее.
У залитых иконок больший визуальный вес. Поэтому их можно использовать как акцентные, либо для наведенного состояния
У залитых иконок больший визуальный вес. Поэтому их можно использовать как акцентные, либо для наведенного состояния

Стилистика набора зависит от общей стилистики сайта, но в целом все подчиняется этим правилам.

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

3838
37 комментариев

Очень полезная информация, которой часто не хватает. Спасибо автору.

8
Ответить

Ребята из реактива! Пожалуйста переименуйтнсь в дизайнерское агенство и перестаньте делать сайты!

Пишу вам от имени всех разработчиков которым достаются ваши сайты потом на поддержку.

4
Ответить

Вы бы слышали, что говорят о стартмедиа...

3
Ответить

4px сетка более гибкая, интересно послушать про исключения потому что сохранить те же отступы внутри кнопок практически нереально, либо сильно ограничит возможности

3
Ответить

Да, например, в элементах с центрированием отступы должны быть четными, чтобы не было полупрозрачных пикселей. Поэтому либо беру кратные 10, либо просто отхожу от 5.

Микромодуль — это условность, чтобы быстрее собирать макет. Но это не жесткое правило, конечно.

Ответить

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

1
Ответить

Норм работает, когда делаешь плюс-минус похожие проекты: интернет-магазины, медиа, госпорталы, корп.сайты. Там, где контента много.

В лендосах система обычно излишня.

4
Ответить