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

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

Дизайн

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

Формат

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

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

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

Поля

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

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

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

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

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

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

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

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

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

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

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

Хорошие поля

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

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

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

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

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

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

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

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

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

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

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

Интерлиньяж

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

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

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

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

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

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

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

Хорошие бесплатные фотобанки

Хорошие бесплатные фотобанки

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

10 мая 2015
Процесс создания логотипа "Живое Слово"

Процесс создания логотипа «Живое Слово»

Одна из наших последних работ — логотип для литературного сообщества «Живое Слово», которым руководит психолог Леа Веденски. Проект создан для развития культуры самовыражения, мышления и речи.

24 мая 2015
Честные переговоры. Часть 1

Честные переговоры. Часть 1

Избранные цитаты из книги Джима Кэмпа «Сначала скажите нет».

21 сентября 2015