Отступы в дизайне: системный подход – Дизайн-кабак

Как дизайнеры работают с системой

Мы работаем в Скетче. Для вертикальных отступов подходят символы. У нас есть библиотека, в которой уже забит стандартный набор вертикальных отступов.

Когда дизайнер понимает, какие отступы ему понадобятся, он берет символы из библиотеки и подгоняет под свои высоты и цвета. Потом расставляет вертикальные отступы по странице и группирует все в папку Vertical Rythm. Для удобства у нас есть небольшой плагин, который по хоткею скрывает и показывает папку с отступами.

Конечно, расставить отступы по странице — дело не быстрое. Это муторно. Но и профиты некислые. Макеты выглядят аккуратнее; проще рисовать после перерыва; новый дизайнер, которого подключают к проекту, рисует в той же системе координат, для фронтендеров не будет сюрприза; поддержка проекта опирается на конкретные цифры при разработке.

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

Как фронтендеры работают с этой системой

Слово нашему тимлиду-фронтендеру Коле Шабалину:

«В гайде дизайнер собирает таблицу, которая содержит все брейкпоинты всех отступов проекта. Эта таблица — единая точка для всего проекта. Все специалисты в курсе, куда смотреть. Удобно же.

С дизайнерами есть договоренность, что в макетах они разделяют все отступы цветом. Допустим, зеленый прямоугольник между заголовком и текстом — это 72px, а красный — 80px.

Наша система позволяет нам ничего не знать о цифрах. Мы отныне оперируем цветами. Почему цветами? Потому что хочется верстать, а не мучиться. Какого цвета прямоугольник, я буду видеть на макете, и к такому цвету и буду обращаться.

Каждый цвет — это ряд в таблице, а проще говоря, один набор отступов. Другой цвет — другой набор отступов.