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

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

Дизайн

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

Формат

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

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

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

Поля

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

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

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

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

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

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

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

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

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

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

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

Хорошие поля

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

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

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

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

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

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

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

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

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

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

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

Интерлиньяж

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

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

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

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

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

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

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

Процесс создания логотипа музыкального проекта JOOF

Процесс создания логотипа музыкального проекта JOOF

JOOF — новый музыкальный проект британского артиста Джона ’00’ Флеминга. В проекте «JOOF» Джон делает акцент на живые выступления, которые позволят раскрыть его потенциал как музыканта и привнести новое звучание.

14 января 2016
Процесс создания сайта лейбла Digital Om Productions

Процесс создания сайта лейбла Digital Om Productions

Digital Om Production — музыкальный лейбл, расположенный в Индии и Непале. Лейбл выпускает современную электронную танцевальную музыку в стилях Progressive и Psychedelic Trance, а также работает как букинг-агентство для своих артистов.

6 ноября 2015
Переверстка макета афиши

Переверстка макета афиши

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

15 ноября 2016