Дизайн-система: как хорошо начать и не закончить плохо

Всем привет!

Меня зовут Толокнова Ксения, я UX/UI дизайнер и арт-директор в Газпромбанке. Раньше работала в Rambler&Co, mos.ru и онлайн-кинотеатре ivi. Очень люблю свою работу, и любовь эта длится примерно 8 лет.

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

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

Дизайн-система нужна всем

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

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

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

Сначала — самая важная часть работы, которая поможет избежать нервного срыва

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

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

Например, цель моей последней системы состоит из нескольких частей:

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

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

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

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

Модульная сетка — порядок в макетах и любовь разработчиков

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

Квадратные модули

Вот два три вида сеток, которые встречаются чаще всего. Это сетки 8, 4 и 5 dp (dp — density independent pixels). Эта величина — базовая единица, которой подчиняется вся система. Например, 8 dp=1 модуль (его еще называют микромодуль). Значит, ваша базовая единица — 8 dp, и вы всё в ней измеряете, как в старом мультике про попугаев.

Сетка 8 dp родом из Material Design, поэтому так популярна. Но 8 dp — слишком большой шаг для сложных интерфейсов: вам часто придется использовать 0,5 модуль, чтобы интерфейс был более аккуратным. Поэтому я люблю сетку 4 dp: она более гибкая, а ещё способна закрыть все потребности.

Сетка 5 dp более воздушная. Но использование 0,5 модуля станет проблемой: 5 не делится ровно на 2, а использовать 0,5 пикселя — заведомо плохая идея. Такая сетка может подойти только для низконагруженных интерфейсов. Прежде чем определиться, советую примерить сетку на несколько макетов. Так вы с самого начала поймете, правильный ли выбор сделали.

Если вы разрабатываете веб-интерфейс, то для вас 1dp-1px.

Начинайте применять сетку сразу. Межстрочные интервалы, размеры компонентов, внутренние и внешние отступы, настройки прозрачности, боксы иконкок — всё это должно подчиниться вашей сетке. Да здравствует порядок и систематизация!

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

Типографика

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

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

1. Посмотрите, как шрифт отображается в разных браузерах, чтобы избежать моих ошибок. Мы с командой делали сайт онлайн-кинотеатра, и когда надо было начинать frontend-разработку, меня ждал неприятный сюрприз — текст на кнопках в некоторых браузерах выглядел очень жирным и даже плохо читался. В итоге нам пришлось уменьшить жирность, и ещё повезло, что не понадобилось менять шрифт везде.
2. После жирности обратите внимание на наличие необходимых начертаний, как минимум regular и bold. Если вам нужны специальные символы (например, знаки валют), стоит залезть поглубже и проверить, поддерживает ли шрифт эти символы.
3. Когда шрифт выбран, смело приступайте к созданию системы шрифтов

Пример наложения модульной системы на систему шрифтов

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

Цвет

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

Стандартные рекомендации по выбору цветов звучат так: основывайтесь на цветовой гамме бренда и не используйте чистый черный цвет для набора текста. Я с этим согласна, но этого, конечно, недостаточно. И вот, почему:

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

1. Подойдите к выбору цветовой гаммы для текста ответственно. Чтобы чтение информации на вашем сайте не стало проблемой, можно обратиться к международному стандарту WCAG. Там написано много хорошего и правильного, но сейчас вам нужна только формула расчета коэффициента читаемости текста относительно подложки. Чтобы рассчитать этот коэффициент, можно воспользоваться готовым сервисом: например, этим.
2. Уделите время палитре серых цветов. Вам понадобится как минимум 4 оттенка серого (от темного для текстов до светлого для подложек), но я не рекомендую использовать больше 8 разных оттенков. Не увлекайтесь игрой в полутона, особенно если вы работаете на мониторе с ретиной. Помните, что вы создаете систему не ради лайков на behance, а ради своих пользователей.

Документация

Документация — очень большая и сложная задача. Эта тема требует отдельной серии статей. Здесь я обозначу тему кратко.

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

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

Эта документация — последнее звено, после которого можно передавать систему в разработку.

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

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

• Модульная сетка или как мерить в попугаях
• Выбор типографики для хорошей дизайн-системы
• Цвет и дизайн-система

Буду рада вашим лайкам, репостам и просто добрым словам :)