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

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

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

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

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

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

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

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

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

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

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

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

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

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

Сетка

Микромодуль

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

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

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

Микромодуль отвечает на вопрос: или 10 px, или 15 px. Контраст в 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

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

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

Типографика

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

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

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

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

Эрик Гилл

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

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

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

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

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

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

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

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

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

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

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

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

Пример уже систематизированных стилей. По опыту обычно для проекта достаточно 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 пт)
Выноска (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 кегль.

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

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

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

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

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

Графика

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

0
37 комментариев
Написать комментарий...
Алексей Траньков

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

Ответить
Развернуть ветку
Кирилл Вихарев

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

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

Ответить
Развернуть ветку
Алексей Семагин

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

Ответить
Развернуть ветку
Дмитрий Сонько

Сёма в треде, бегите

Ответить
Развернуть ветку
Кирилл Вихарев

Я хз о чем ты) у нас за всю историю 12 клиентов ушло. И большая часть из за цены.

Ответить
Развернуть ветку
Алексей Семагин

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

Ответить
Развернуть ветку
Кирилл Вихарев

плохо ты знаешь нашу компанию) но спасибо за комплимент.

Ответить
Развернуть ветку
Алексей Семагин

Это не комплимент

Ответить
Развернуть ветку
Кирилл Вихарев

Я уже запутался, кто кого тролит)

Ответить
Развернуть ветку
airbeard

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

Ответить
Развернуть ветку
Dmitrii Kuchev
Автор

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

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

Ответить
Развернуть ветку
Кирилл Сиренко

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

Ответить
Развернуть ветку
Dmitrii Kuchev
Автор

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

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

Ответить
Развернуть ветку
Аккаунт удален

Комментарий недоступен

Ответить
Развернуть ветку
Евгений Зведенюк

По этой теме наиболее интересен вопрос, как потом заставить верстальщика соблюдать горизонтальную сетку, а не только вертикальную

Ответить
Развернуть ветку
Miroslav Tsarev

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

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

Ответить
Развернуть ветку
Bender Rodriguez

Пиздить.

Ответить
Развернуть ветку
Dmitrii Kuchev
Автор

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

Ответить
Развернуть ветку
Аккаунт удален

Комментарий недоступен

Ответить
Развернуть ветку
Bender Rodriguez

Бля, ну наконец-то нормальные дизайнеры подъехали, а не трешак, который 10 лет на рынке, а в понртфолио — хуй

Ответить
Развернуть ветку
Bagrat Bagdasarov

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

Ответить
Развернуть ветку
Evgeny Rodionov

Когда программисты решили заняться дизайном

Ответить
Развернуть ветку
Евгений Зведенюк

И не слышали ничего о визуальной компенсации

Ответить
Развернуть ветку
Ejex Xeffer

Нормальные слышали.

Ответить
Развернуть ветку
Ejex Xeffer

Получается размер кегля шрифта вы не считаете относительно формата строки, а берете по наитию?

Ответить
Развернуть ветку
Dmitrii Kuchev
Автор

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

А можете привести пример расчета?

Ответить
Развернуть ветку
Ejex Xeffer

Да, могу. К примеру можно ориентироваться на формулы из книги Джеймса Феличи (Часть 2, глава 9 стр174). - "Кегль и формат колонки. Идеальное соотношение равно примерно 2:1 или 2.5:1, что означает от 20 до 25 пик для шрифта 10 кегля. Когда соотношение приближается к 1:1 хорошая верстка становится практически невозможной. Соотношение 1.5:1 это уже хождение по тонкому льду."
Подобная калькуляция есть для всего - интерлиньяж, трекинг и кернинг, ширина апрошей и полуапрошей. Многое из этого уже реализованно в SCSS плагинах, и мне как версталщику стала интересна эта тема, поэтому я спросил это у вас. Интересно используют ли топовые студии такие вещи в деле?
Если честно, примеры рассчета Феличи мне понравились, но есть в них одна особенность - он говорит про книжный или газетный текст. В типографике есть другие примеры, которые могут подходить для UI - например текст набранный исходя из рамок плоского дизайна (когда тот был придуман для карт). Поэтому всегда можно отступить от правил, как никак верить собственному глазу - основа всего в типографике.
А что вы об этом думаете?

Ответить
Развернуть ветку
Dennis Lypovetsky

Есть замечательный курс по веб-типографике от Метея Латина (Matej Latin), и вот глава про вертикальный ритм:
https://betterwebtype.com/rhythm-in-web-typography

В конце есть формула и миксин для SCSS.

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

Буду рад с вами поговорить о типографике и вебе. Я не гранд, мне можно писать без обиняков)

[email protected]

Ответить
Развернуть ветку
Dmitrii Kuchev
Автор

Кайф! Спасибо за ссылку!

Ответить
Развернуть ветку
Ejex Xeffer

Круто, я еще вот такую систему видел. http://matejlatin.github.io/Gutenberg/

Ответить
Развернуть ветку
Ejex Xeffer

А по поводу scss видел похожее:

Ответить
Развернуть ветку
Dennis Lypovetsky

Вот это и есть проект Матея Латина)

Ответить
Развернуть ветку
Ejex Xeffer

Понятненько. Скоро буду блог значит переделывать под scss - учту опыт.

Ответить
Развернуть ветку
Dmitrii Kuchev
Автор

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

Будет круто, если скинете что-то почитать на эту тему. [email protected]

Ответить
Развернуть ветку
Ejex Xeffer

Спасибо за ответ. Даже не знаю, чего я такого скину крутанам. Я то всего ничего прочитал. Конечно, если будут какие то сподвижки я поделюсь.

Ответить
Развернуть ветку
Avramov Max

Отличная статья, спасибо! Особенно порадовало наличие не только правильных, но и неправильных примеров.

Ответить
Развернуть ветку
Сергей Даронин

Хороший материал, в правильном направлении двигаетесь!

Ответить
Развернуть ветку
34 комментария
Раскрывать всегда