Игорь Штанг (nobelfaik) wrote,
Игорь Штанг
nobelfaik

Category:

Три способа закрыть прямоугольник

Прямоугольник — базовая фигура верстки. Тим Харроуэр в «Настольной книге газетного дизайнера» формулирует правило так: «Какой бы ни была форма текста (вертикальной, горизонтальной или квадратной), она всегда должна быть прямоугольной». Большинство композиционных ошибок в верстке так или иначе связано с отступлением от этого правила.

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

Передовица газеты Washington Post


По этому же принципу строятся электронные издания:

Передовица электронного издания gazeta.ru


Текст главной новости лег не лучшим образом (правый верхний и правый нижний углы пустуют), однако форму материала обозначают границы соседних модулей: плашка сверху, реклама справа, текстовые блоки снизу и слева:

03-2


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

042


Здесь эту же функцию выполняет линейка:

052


С газетами понятно, но что делать, если вы не хотите забивать всё свободное пространство прямоугольниками текста и иллюстраций? Для этого существуют другие способы закрыть модуль.

1. Взять в рамку или поставить на плашку

Способ простой и безотказный: рамка и плашка замыкают блок, независимо от расположения входящих в него элементов:

Текстовые блоки на плашке и в рамке


41


Форма логотипа непредсказуема, поэтому каждый модуль обвели рамкой (она тонкая и серая, чтобы не отвлекать внимание):

40


Для решения этой задачи подойдут и линейки:

juni-festwochen-zurich-stadttheater


Иногда рамка — единственное спасение слабой верстки. Было и стало:

07


08


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

42

2. Закрепить углы

В журналах по углам традиционно размещают колонцифры и колонтитулы. Какой бы свободной ни была композиция разворота, формат всегда поддержан угловыми элементами:

10


10-3


Крохотная колонцифра держит весь правый нижний угол:

11


Этим же приемом пользуются и веб-дизайнеры. Углы сайта закрепляют логотипом, иконкой, кнопкой, строчкой текста, полем поиска…
Сверху:

15

16


И снизу:

17

19


Еще примеры:

12


13



3. Коснуться каждой из сторон

Здесь три из четырех углов пустуют, при этом композиция очень устойчивая:

21


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

22


Еще примеры:

23


24


3f9186355b6c4b3898105aa9d546bb42


Беспорядок у Чихольда – кажущийся. Конструкция крепко держит формат:

tumblr_mbwr3fYUfq1rfpj7fo1_1280


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

32


30


31
Tags: верстка, знаю как, конструкция, модульность, статья, типографика
Subscribe

Posts from This Journal “статья” Tag

  • Дыра или воздух

    В эфире рубрика ???. Павел Ореховский спрашивает: Не дает покоя переверстка с рецептом. Я понял про этажность и модульную схему. Но клиенту будет…

  • Как мы собираем макеты по алгоритму верстки

    Расскажу об одном задании с мастер-класса «Большая переверстка», а именно о том, как мы собираем макеты по алгоритму верстки. Это метод,…

  • Тире или буллит

    В эфире рубрика ???. Мария спрашивает: Какие маркеры ставить в списках на русском языке: тире или буллиты? Вопрос непростой, поэтому начну…

  • Post a new comment

    Error

    default userpic

    Your IP address will be recorded 

    When you submit the form an invisible reCAPTCHA check will be performed.
    You must follow the Privacy Policy and Google Terms of use.
  • 8 comments