Основы вертикального ритма в дизайне

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

Что такое вертикальный ритм? Если коротко — это последовательное, предсказуемое расположение контента на странице. Касательно текста — это соотношение размера шрифта, межстрочных интервалов и вертикальных отступов. Другими словами, ритм подразумевает расстановку текстовых и графических объектов по базовой сетке сайта таким образом, чтобы элементы не выходили за её пределы, находясь на заданных расстояниях друг от друга.

Для чего?

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

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

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

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

Базовая сетка в Sketch 3

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

Кликаем на иконку в Toolbar, которая дословно называется «Show or hide rulers, grids and more» и переходим в меню Layout Settings.

Изменяя параметр Gutter Height вы сможете добиться желаемого межстрочного расстояния. Но как же найти подходящее значение?

Я начинаю с того, что первым делом подбираю правильный интерлиньяж для основного текста.

Есть мнение, что минимальный интерлиньяж равен размеру шрифта умноженному на 1,5. Другими словами, если основной шрифт на странице 16px, то комфортный межстрочный интервал начинается от 24 (16*1,5). Больше — можно, меньше — не желательно. Главное получить четное значение (24, 26, 28 и т.д.).

Далее возвращаемся в Скетч и задаем параметр Gutter Height вдвое меньше полученного ранее значения, 12 (24/2).

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

В заключение

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