Дизайн система от А до Я. Часть 2: атомы или дизайн язык

Всем привет, прошло немало времени с момента публикации первой, общей статьи на тему нашего опыта работы над дизайн системой. Если пропустили, найти ее можно тут.

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

Итак, что входит в дизайн язык и о чем поговорим в сегодня:

1. Сетка
2. Шрифт
3. Цвет
4. Иконки

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

Каждый фрейм состоит из текстового описания — объяснения причин и преимуществ выбора сетки, шрифта и т.д. (очень полезно иметь такое описание даже для того, чтобы можно было в дальнейшем вернуться и освежить в памяти принятые решения. Дальше мы остановимся на этом подробнее) и примера, дизайн элемента (обязательно заведенного в “ мастер-компонент” или стиль в фигме).

Начнем с более подробного рассмотрения фрейма с сеткой:

Сетка

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

1. Обеспечения согласованности дизайна
   Одинаковый визуальный ритм позволяет вашему дизайну выглядеть более профессионально и структурно.
2. Упрощения работы разработчикам
   Четко утвержденная система отступов в макетах позволяет разработчику не задумываться лишний раз о том какое же расстояние установить между элементами дизайна или какой межстрочный интервал выбрать.
3. Адаптации под разные устройства
   Определившись на берегу как перестраивается ваш макет при изменении размера экрана, в дальнейшем также не придется обсуждать это перед версткой каждого нового макета. И дизайнить макеты станет проще и быстрее с пониманием принципов адаптации.

Модуль

Работу над сеткой всегда необходимо начинать с выбора модуля. Модуль — это отправная точка, минимальная величина, которой будут кратны все элементы дизайна, отступы и т.д. Это очень важно для сохранения визуального ритма дизайна. В своей дизайн системе мы используем модуль в 4 пикселя как самый гибкий вариант. Чем меньший модуль вы используете, тем более гибкой будет ваша сетка, однако в таком случае визуальный ритм будет прослеживаться хуже.

Модульная сетка поможет с выбором размера шрифта и межстрочного интервала. Эти два свойства шрифта тоже в идеале должны быть кратны величине выбранного ранее модуля. То есть в нашем случае при модуле в 4 пикселя размер наших шрифтов будет равняться 14px, 16px, 20px, 24px и т.д. А для выбора правильного межстрочного интервала не забываем умножить размер шрифта на 1,25 или 1,5 в зависимости от размера шрифта и кол-во текста для получения оптимального визуального эффекта и удобочитаемости (чем больше кол-во текста, тем больше интерлиньяж. Можно использовать несколько стилей с одинаковым размером текста, но разным межстрочным интервалом, это распространенная практика).

Структура сетки

Сетка состоит из колонок и отступов (отступы бывают внутренние — между колонками, и внешние — по бокам самой сетки). Мы взяли за основу наиболее распространенный вариант — 12-колоночную сетку с отступами в 30 пикселей для десктопного разрешения, 10-колоночную для планшетов и 2-колоночную для смартфонов.

Колонки (голубые); Отступы (оранжевые)

Брейкпоинты

Очень важно определить кол-во пикселей по ширине, при котором ваш дизайн будет перестраиваться для более грамотного расположения на экране. В нашем случае контент будет иметь статичный вид при разрешении до 767px, далее поменяет структуру и превратится в планшетный вариант и будет таковым до 991px и уже все что выше будет являться десктопной версией сайта.

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

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

Шрифт

Структура фрейма со шрифтом делится на три части:

1. В самом верху фрейма располагается описание шрифта с объяснением причин и преимуществ вашего выбора (справа) и краткий обзор используемых начертаний (слева).

2. Обзор всех стилей текста (слева) и краткое описание для чего необходим тот или иной стиль (справа)

3. Примеры использования шрифта на разных фонах. В нашем случае мы поместили все стили шрифтов на 4 цвета

Веб безопасные шрифты

О выборе красивого шрифта говорить можно долго, однако есть один немаловажный факт, о котором многие забывают. Если вы работаете в продукте и качественная скорость загрузки вашего сайта для вас важна, то выбирать шрифт нужно из вот этого списка веб безопасных шрифтов. Что это значит ? Это значит, что каждый представленный в этом списке шрифт есть как на MAC, так и на Windows уже внутри системы. То есть при загрузке сайта не придется идти на Google Fonts например, чтобы взять оттуда шрифт и применить его на вашем сайте, а сразу прогрузит его взяв из своего встроенного списка шрифтов. Это избавит вас от “мигания” — стартовой замены шрифта на несколько секунд на какой-то из встроенных, пока система сходит в API Google Fonts за нестандартным шрифтом, который вы выбрали для своего проекта.

Подробнее об этом можно прочитать здесь.

1IL test

Если вы все же пошли путем выбора нестандартного шрифта, то хорошим лайфхаком проверки его на удобочитаемость будет провести со своим шрифтом 1Il тест. Это значит сравнить в каждом шрифте цифру “1”, заглавную букву “i” и строчную букву “l”. Они не должны выглядеть одинаково. Это не дает шрифту, который прошел этот тест безоговорочного преимущества, однако немного возвышает его над шрифтами провалившими этот тест, с точки зрения удобочитаемости.

Контрастность WCAG

При работе с расстановкой визуальных акцентов мы должны быть на 100% уверены, что они будут считываться пользователями быстро и без проблем. В этом нам поможет международный стандарт WCAG (​​Web Content Accessibility Guidelines) — руководство по обеспечению доступности веб-контента — это большой и сложный документ, но нам этот стандарт понадобится, чтобы добиться правильного контраста нашего шрифта. Если не вдаваться в подробности, то вот калькулятор https://webaim.org/resources/contrastchecker/, в котором вам необходимо лишь ввести цвет фона и цвет текста на нем и получить вердикт о том, насколько правильно у вас обстоят дела с контрастом.

Вот такой результат, например, получаем мы по нашей Secondary СТА кнопке (см скрин). Не проходим только по одному показателю (ААА), но это допустимо.

Цвет

Как я говорил ранее у нас много сайтов, которые в сложных местах, например флоу заказа или админ панель практически одинаковы. Часто бывает так, что после очередного успешного а/б теста на одном из сайтов, необходимо внедрить изменение на всех остальных сайтах. Выглядеть это изменение будет почти одинаково на всех сайтах, но чтобы не выбиваться из общего вида новый элемент необходимо темизировать (то есть поменять цвет и оформление) для каждого из сайтов. Для того чтобы дизайнеру не делать одни и те же действия каждый раз, была взята такая нехитрая схема:

Берем цветовую палитру HSL(от англ. hue — тон, saturation — насыщенность, lightness — светлота) (в фигме ее можно поменять прямо в панели цвета) и выбираем, для простоты, 3 цвета (для primary CTA, secondary CTA и серый для разных менее значимых объектов и текста). Выглядит это вот так:

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

Определяем предназначение каждого цвета и подписываем какой цвет для чего служит (один цвет может иметь несколько назначений). Далее создаем подобные цветовые диапазоны для каждого из своих сайтов и так же подписываем. Каждый цвет у каждого сайта имеет свое предназначение, главное, чтобы палитры имели одинаковые цели (например чтобы везде была палитра для primary CTA кнопок), тогда при разработке дизайна под один сайт можно не переживать за остальные, т.к. разработчик будет знать какой цвет использовать для каждого из сайтов, и все будет храниться в одном месте.

Еще в нашу палитру обязательно входят 3 системных цвета для обратной связи в интерфейсе (ошибок, успеха и т.д.), а также цвет ссылки (в нашем случае на разных проектах он разный, так что это важно)

Иконки

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

1. Цветные
2. Бесцветные (вспомогательные)
3. Курсоры (для ховеров и остальных состояний)

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

1. Все иконки должны быть заведены в мастер компонент. Так их будет проще искать в панели assets по ключевому слову. А вот если вы, например. создадите иконки вариантами, а не мастер компонентами, то в поиске получите только первую иконку и только достав ее вы сможете поменять ее на панели variants на другую, что совсем неудобно.
2. Второй очень важный момент это обязательное наличие у иконки свойств fill и stroke. Это для того оптимизации скорости загрузки сайта (page speed), чтобы не грузить несколько вариантов одной и той же иконки в разных состояниях, а руководить этими состояниями через свойства самой иконки в коде. Была такая история в одном проекте, что неактивная иконка должна была состоять только из обводки (outline icon), а активная должна была быть закрашенной (filled icon). Так вот при наличии этих атрибутов мы можем инвертировать цвет обводки и заливки и получить разное состояние одной и той же иконки (см скрин ниже).

Итоги

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

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