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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Тут есть:

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

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

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

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

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

Суть в том, что 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 кегль.

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

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

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

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

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

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

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

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

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