Три способа закрыть прямоугольник
Прямоугольник - базовая фигура верстки. Тим Харроуэр в «Настольной книге газетного дизайнера» формулирует правило так: «Какой бы ни была форма текста (вертикальной, горизонтальной или квадратной), она всегда должна быть прямоугольной». Большинство композиционных ошибок в верстке так или иначе связано с отступлением от этого правила.
В бумажных газетах каждый кусочек текста аккуратно упакован в свой прямоугольник. Материалы стоят вплотную друг к другу, воздух практически отсутствует:
По этому же принципу строятся электронные издания:
Текст главной новости лег не лучшим образом (правый верхний и правый нижний углы пустуют), однако форму материала обозначают границы соседних модулей: плашка сверху, реклама справа, текстовые блоки снизу и слева:
Ряд колонок также не собрался в ровный прямоугольник, но нижнюю границу этажа закрывает верхняя строчка следующего:
Здесь эту же функцию выполняет линейка:
С газетами понятно, но что делать, если вы не хотите забивать всё свободное пространство прямоугольниками текста и иллюстраций? Для этого существуют другие способы закрыть модуль.
1. Взять в рамку или поставить на плашку
Способ простой и безотказный: рамка и плашка замыкают блок, независимо от расположения входящих в него элементов:
Форма логотипа непредсказуема, поэтому каждый модуль обвели рамкой (она тонкая и серая, чтобы не отвлекать внимание):
Для решения этой задачи подойдут и линейки:
Иногда рамка - единственное спасение слабой верстки. Было и стало:
Не стоит забывать, что рамка и плашка - сильные графические средства, поэтому с ними нужно быть осторожнее. Если выделить одновременно всё, то смысл выделения пропадет, а уровень шума в макете превысит уровень сигнала:
2. Закрепить углы
В журналах по углам традиционно размещают колонцифры и колонтитулы. Какой бы свободной ни была композиция разворота, формат всегда поддержан угловыми элементами:
Крохотная колонцифра держит весь правый нижний угол:
Этим же приемом пользуются и веб-дизайнеры. Углы сайта закрепляют логотипом, иконкой, кнопкой, строчкой текста, полем поиска…
Сверху:
И снизу:
Еще примеры:
3. Коснуться каждой из сторон
Здесь три из четырех углов пустуют, при этом композиция очень устойчивая:
Секрет в том, что элементы макета касаются каждой из его сторон. Справа и снизу - границ формата, слева и сверху - внутренних полей:
Еще примеры:
Беспорядок у Чихольда - кажущийся. Конструкция крепко держит формат:
Особняком стоят центрированные композиции. Масса, собранная в центре, уравновешивает себя самостоятельно, без поддержки углов и сторон:
В бумажных газетах каждый кусочек текста аккуратно упакован в свой прямоугольник. Материалы стоят вплотную друг к другу, воздух практически отсутствует:
По этому же принципу строятся электронные издания:
Текст главной новости лег не лучшим образом (правый верхний и правый нижний углы пустуют), однако форму материала обозначают границы соседних модулей: плашка сверху, реклама справа, текстовые блоки снизу и слева:
Ряд колонок также не собрался в ровный прямоугольник, но нижнюю границу этажа закрывает верхняя строчка следующего:
Здесь эту же функцию выполняет линейка:
С газетами понятно, но что делать, если вы не хотите забивать всё свободное пространство прямоугольниками текста и иллюстраций? Для этого существуют другие способы закрыть модуль.
1. Взять в рамку или поставить на плашку
Способ простой и безотказный: рамка и плашка замыкают блок, независимо от расположения входящих в него элементов:
Форма логотипа непредсказуема, поэтому каждый модуль обвели рамкой (она тонкая и серая, чтобы не отвлекать внимание):
Для решения этой задачи подойдут и линейки:
Иногда рамка - единственное спасение слабой верстки. Было и стало:
Не стоит забывать, что рамка и плашка - сильные графические средства, поэтому с ними нужно быть осторожнее. Если выделить одновременно всё, то смысл выделения пропадет, а уровень шума в макете превысит уровень сигнала:
2. Закрепить углы
В журналах по углам традиционно размещают колонцифры и колонтитулы. Какой бы свободной ни была композиция разворота, формат всегда поддержан угловыми элементами:
Крохотная колонцифра держит весь правый нижний угол:
Этим же приемом пользуются и веб-дизайнеры. Углы сайта закрепляют логотипом, иконкой, кнопкой, строчкой текста, полем поиска…
Сверху:
И снизу:
Еще примеры:
3. Коснуться каждой из сторон
Здесь три из четырех углов пустуют, при этом композиция очень устойчивая:
Секрет в том, что элементы макета касаются каждой из его сторон. Справа и снизу - границ формата, слева и сверху - внутренних полей:
Еще примеры:
Беспорядок у Чихольда - кажущийся. Конструкция крепко держит формат:
Особняком стоят центрированные композиции. Масса, собранная в центре, уравновешивает себя самостоятельно, без поддержки углов и сторон: