ОБУЧЕНИЕ

Создаем дизайн-систему

Вне всякого сомнения, о дизайн-системах меня спрашивают чаще, чем о чем-либо другом. За последние несколько лет я посвятил много времени размышлениям о том, как выстраивать, реализовывать и представлять дизайн-системы для таких продуктов, как Marvel, Bantam и Modulz, и теперь решил, что пришла пора поделиться тем, чему научился в процессе.
Что такое дизайн-система?
Ни для кого не секрет, что дизайнеры любят хорошие UI-киты. Но, по моим наблюдениям, в последнее время все больше внимания уделяется не просто наборам инструментов и руководствам по стилю, а созданию систем, которые связывают воедино целые продукты. Компании вроде Shopify и Intercom формируют особые команды, которые занимаются только и исключительно дизайн-системами. Люди начинают осознавать, как важен системный подход в дизайне. Это внушает оптимизм. Кто знает, возможно, в один прекрасный день появится инструмент для дизайнеров, который не будет предполагать, что в каждом новом проекте мы начинаем все с нуля.


Дизайн-система (применительно к IT продуктам) — это не просто фреймворк, набор UI-инструментов или библиотека компонентов. Это больше, чем руководство по стилю или набор инструкций по написанию кода. Больше даже, чем все перечисленное в совокупности. Дизайн-система — это постоянно эволюционирующий свод правил, который определяет порядок создания продукта.

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

Определившись с этими ключевыми параметрами, вы можете стройно и последовательно изложить свое видение средствами дизайна.

Создаем палитру стилей

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

Даже такой компонент, как самый простой заголовок, на самом деле представляет собой сочетание целого ряда стилей, которые используются в дизайне многократно.
Так мы должны разбирать каждый компонент, пока не останутся мельчайшие элементы, которые уже не разложишь — это и будут базовые стили. Начать можно со списка атрибутов стилей CSS. Большинство из атрибутов могут принимать только предзаданные значения и, соотвественно, могут применяться на любом сайте в Интернете. Те атрибуты, которые принимают произвольные значения, в конечном итоге и составляют то, что отличает наш продукт от всех прочих. Эти произвольные значения будут определять палитру стилей на глобальном уровне. Глобальную палитру стилей мы будем использовать при создании абсолютно всех аспектов каждого из продуктов компании.

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

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

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

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

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

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

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

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

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

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

Шрифты в нашем дизайне должны выстраиваться в гамму, как ноты в мелодии. Это помогает выдержать стройный ритм по вертикали. Все эти сравнения вас, возможно, немного обескуражили, но, на наше счастье, умные люди уже успели во всем разобраться за нас. Tim Brown создал отличный вебсайт, на котором представлены наборы шрифтов разных размеров. Adam Morse выложил в открытый доступ свою имплементацию диатонической шкалы шрифтов. На мой взгляд, терция подходит для большинства продуктов.

Следующий шаг — прикинуть, какие размеры шрифта нам понадобятся, а затем наложить их на основную терцию типографической шкалы.
  • в качестве исходного (1em) размера текста, который будет часто появляться на нашем маркетинговом сайте, в интерфейсе и так далее, я предлагаю взять 16px, как размер, который выставляется в браузерах по умолчанию;
  • размер побольше для крупного текста — постов в блоге, допустим;
  • еще пара вариантов покрупнее для заголовков и подзаголовков;
  • до неприличия огромный шрифт — его мы будем использовать, например, чтобы выделять цены на соответствующих страницах;
  • также нужно включить несколько вариантов поменьше для примечаний «мелким шрифтом», подсказок в полях ввода и прочих вспомогательных текстов.
Шкала шрифтов
Закругление углов
Общая идея в том, чтобы из раза в раз применять одну и ту же схему для каждого атрибута, который принимает произвольные значения. Для закругления углов нам нужны будут следующие радиальные значения:
  • небольшой радиус для маленьких компонентов — флажков, тэгов, ярлыков;
  • средний радиус для кнопок, окошек ввода и тому подобного;
  • большой радиус для карточек, модулей и других крупных компонентов.
Разные радиусы скругления: 2px, 4px и 8px

Примечание: понадобится также значение 50% для создания круглых компонентов — аватарок и так далее.
Пара советов напоследок
Общая идея в том, чтобы из раза в раз применять одну и ту же схему для каждого атрибута, который принимает произвольные значения. Для закругления углов нам нужны будут следующие радиальные значения:
  • Для некоторых компонентов понадобятся величины, которые мы не определяли в палитре (скажем, ширина боковой панели). Иногда эти величины будут определяться просто как «треть ширины области просмотра» или что-то в этом роде. В других случаях это будут произвольные величины, которые используются только в этом конкретном случае — ничего страшного в этом нет. Смысл в том, чтобы продумать, какие величины можно использовать многократно (таких большинство), а какие — нет.
  • Позвольте компонентам жить своей жизнью. Не пытайтесь задавать размер поля для кнопок, окошек ввода, заголовков и так далее. На уровне компонентов вам следует определять только те стили, которые имеют одинаковый вид во всех случаях употребления данного компонента. Так как ширина поля отличается от случая к случаю, лучше применять враппер . Harry Robberts написал отличную статью на эту тему.
ИСТОЧНИК
Автор: Алексей wdmaster
Рерайт: Redex
Made on
Tilda