Дизайнерам. Формат, поля, интерлиньяж

28 декабря 2016 · Таня Соколовская

Дизайн

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

Формат

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

На выбор формата влияет задача. Детскую книгу для печати нельзя вписать в формат А3 или больше, потому что такую книгу ребенок просто не удержит в руках, а вот газетное издание можно. Формат продукта для телефона будет отличаться от формата для ПК в первую очередь из-за разницы в управлении. Чтобы удачно подобрать формат, ответьте на три вопроса:

  1. Кто будет пользоваться продуктом?
  2. Как?
  3. В каких условиях?
Если бы книга была больше, девочке было бы тяжело с ней обращаться. Фото из сети

Поля

В печати и на ПК поля выстраиваются по схожим принципам. Допустим, у нас есть вертикальная страница и какой-то текст в ней:

Нарушено правило близости — в модуле нет полей

Сейчас явно нарушено правило близости. Межстрочное расстояние — внутреннее, меньше внешнего — полей, их практически нет.

Добавим поля:

Правило близости соблюдено, но результат плохой

Результат лучше предыдущего, но все еще плохой. Всё дело в квадрате, который образовался в левом верхнем углу.

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

Квадрат в левом верхнем углу — плохо

Так как у нас страница вертикальная, то вертикальные поля должны быть меньше горизонтальных. И наоборот — в горизонтальном формате горизонтальные поля будут меньше вертикальных. То есть прямоугольник в левом верхнем углу пропорционально соответствует формату. В нашем случае, это выглядит так:

Вертикальные поля меньше горизонтальных, а верхнее поле меньше нижнего

Сейчас поля выглядят значительно лучше, но можно улучшить ещё — увеличить правое поле:

Хорошие поля

А теперь посмотрим, как эта страница будет выглядеть в развороте. Добавим вторую страницу:

Плохое положение блоков в развороте

Разворот — это единый организм. Традиционно блоки внутри него тянутся друг к другу:

Хороший разворот

Определить поля в работе с книгами поможет канон Виллара:

Канон Виллара описывает Ян Чихольд в «Облике книги»

Также можно расчитывать поля по Мюллер-Брокманну: левое поле равно 1; верхнее — 1,5; правое — 2; нижнее — 3.

Но не стоит слепо следовать правилам, всегда есть исключения. Нужно опираться на задачу. В работе над журналом важно учесть, что читатель может держать журнал одной рукой за корешок, а второй рукой быстро пролистывать страницы. Так он будет просматривать только внешние края страниц, поэтому на внутренней части полос лучше не размещать значимую информацию и внутренние поля сделать больше, чем полагается. Это противоположно тому, о чём я писала выше, но правила подчиняются задаче, а не наоборот.

Правила подчиняются задаче, а не наоборот

Любой формат — это модуль. Поля внутри него могут поддерживаться пустым пространством, линейками, плашками, рамками. Если в модуль добавить линейку, то образуется новый формат. Чем больше в модуле элементов, тем больше образуется форматов:

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

Интерлиньяж

Интерлиньяж — интервал между базовыми линиями соседних строк. Не путайте с межстрочным интервалом.

Интерлиньяж влияет на удобочитаемость текста, поэтому к выбору его размера нужно относиться внимательно. Слишком тесно набранные строки оптически сливаются и читаются вместе. То же касается и слишком большого интерлиньяжа — читатель будет терять начало следующей строки. Правильно подобранный интерлиньяж поможет оптически вести глаз от строки к строке и задаст ровный ритм чтения.

В выборе интерлиньяжа нет единого правила, но я рекомендую исходить из длины строки: чем длиннее строка, тем больше кегль и интерлиньяж. И наоборот. Хорошо, когда строка умещает 5—8 слов. От этого можно отталкиваться в выборе размера кегля.

Чем больше интерлиньяж, тем больше должны быть и поля. Посмотрите на эти три блока:

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

Выстраивайте соотношения в таком порядке: длина строки → кегль → интерлиньяж → левое поле → верхнее поле → и еще раз сначала. Тогда ваш макет станет увереннее и привлекательнее.

Читайте также

Дизайн сайтов в программе Sketch 3

Дизайн сайтов в программе Sketch 3

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

26 ноября 2015
Типографика и верстка книг. Часть 2

Типографика и верстка книг. Часть 2

В первой части этой статьи собраны рекомендации и способы вычисления расположения полосы набора и каноны строения титульного листа. Рекомендую прочитать, если еще не успели.
В продолжении моего конспекта «Облика книги» Яна Чихольда мы углубимся в правила набора и форматирования текста и в верстку иллюстраций. Будет познавательно и интересно :-)

26 февраля 2016
Принцип управления проектами

Принцип управления проектами

Чтобы достигать качества, при создании сайтов мы используем принцип «ФФФ» — фиксируем время и бюджет, а функциональность оставляем гибкой. В этой статье я расскажу подробно о принципе, и почему мы к нему пришли.

19 августа 2015