Вертикальный ритм. Основы.

Вертикальный ритм и веб-дизайн

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

Вертикальный ритм и веб-дизайн

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

Для чего?

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

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

Правильный и неправильный ритм
Автор не найден :(

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

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

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

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

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

Show or hide rulers, grids and more

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

Layout Settings

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

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

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

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

Интерлиньяж

В заключение

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

7 комментариев

  1. Привет, Антон. Ответь на интересующий меня вопрос :
    А собснна зачем веб-дизайнеру нужны знания HTML & CSS & JQuery + инструменты верстальщика (редактор код, сайты-пособия и пр.). Опыт работы верстальщиком у меня есть, хоть и не особо большой. Но никак не могу понять, зачем все эти знания веб-дизайнеру?

        1. — «А собснна зачем веб-дизайнеру нужны знания HTML & CSS & JQuery…»

          Например для прототипирования макетов) Полистай ссылку которую я дал, там очень подробненько.

  2. Бесполезная статья, на самом деле. Про сетку все знают.

    В статье нет главного — как ей пользоваться и в каких случаях. Как делать вертикальный ритм, как располагать элементы с разными размерами.

    Какой толк от ритма, если ты однородные элементы ставишь. Это уже паттерн, получается, а не ритм.

    В общем, я крайне огорчен долбаным кликбейтом, потому что вместо того, что написано в названии — ниже лоу левела.

    1. ПРИ ЭТОМ у тебя у самого на сайте лютый косяк с вертикальным ритмом.

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

      Да, вот настолько я расстроился.

  3. Извините, дружище ;) просто остро строит эта проблема ща

Обсуждение закрыто.