Отступы в дизайне: системный подход

Как контролировать отступы между блоками на большом проекте

Проблема: отступы в вёрстке не соответствуют дизайну

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

Как мы боролись с этой проблемой

У нас не было системного подхода к решению. Если в верстке встречались заметные расхождения с макетом, то проблема фиксилась локально.

Решение: система вертикальных отступов

Если разобрать макет или страницу сайта по элементам и посмотреть на вертикальные отступы между ними, вырисовываются закономерности. Разных по высоте вертикальных отступов не так уж и много на отдельно взятом сайте. Например, на главной Яндекса их всего 4. На странице продукта Apple — 8.

Как устроена система

Все элементы страницы группируются в блоки. Блоки выстраиваются по правилам, которые придумал дизайнер.

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

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

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

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

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

Результат

По оценке наших фронтендеров, время на работу с отступами сокращается на 90%. Фронтендер тратит 5–10 минут на заведение настроек в SASS и больше не переживает об отступах. Ему не нужно ничего замерять линейками — он своими глазами видит, какой отступ у блока.

Польза и вред системы

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

--

--

Cамый большой коллективный блог про дизайн на русском языке

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Kelnik

Интерактивное агентство из Санкт-Петербурга. Делаем сайты для недвижимости, 3D-визуализацию и тач-столы, работаем с виртуальной реальностью / www.kelnik.ru