?

Log in

No account? Create an account

nobelfaik


Блог Игоря Штанга

light gray is the new white, dark gray is the new black


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

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

Передовица газеты 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

Записи из этого журнала по тегу «статья»

  • Швейцарские плакаты по-русски

    Недавно я опубликовал заметку под названием « Кириллица и латиница». Главная мысль такая: Несовершенство кириллического алфавита не…

  • Бутерброды текста

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

  • Как я делал афишу «Большой переверстки»

    «Большая переверстка» — это мастер-класс, который я придумал два года назад и провел в нескольких городах. Афиша делалась долго, но…



  • 1
«Я пользуюсь старым приемом - если не знаешь, как организовать лист, организуй его треугольником. Ну в смысле три массивных пятна отлично держат лист.» говорит Быстроновский.

Это Людвиг Быстроновский, арт-директор студии Лебедева, говорил :)

Это я выписал давно из Фуршета, там Быстроновский отвечал. Я не знаю контекста ситуации, в ответ на какой вопрос он так ответил и тд. Просто такое предложение записано в эверноуте.

Вопросы

(Анонимно)
Писал большой комментарий. Но в итоге попытался свести к краткому вопросу. Получается, что чем меньше мозгу надо додумывать прямоугольник, тем крепче верстка, правильно?

Если исходить из этого и выстроить приемы по убыванию силы получается:
1. Самый сильный инструмент — рамка или плашка, тут и думать вообще не надо мозгу, границы видны, даже если ничто ничего не касается и не закреплено http://take.ms/i9nPs
2. Закрепить все углы — мощно и просто http://take.ms/cicyM
2.1. Закрепить три угла, очевидно http://take.ms/3rPjQ Правда тут дилемма, мне кажется диагональные углы лучше держат, при условии, что разный вес в них. В следующем пункте скриншот это иллюстрирует.
3. Закрепить только диагональные углы — просто, но уже додумывать мозгу надо http://take.ms/Mazbw
3.1 Закрепить два недиагональных угла и коснуться оставшейся стороны http://take.ms/9zimI
4. Закрепить один угол и коснуться остальных сторон — http://take.ms/DMvDk
5. Коснуться каждой стороны без закрепления углов. Здесь все углы формы надо додумывать мозгу, а не быстро глазам http://take.ms/lz14J

Дальше уже идут варианты с незакрытой композицией, которые по идее будут менее четко читаться.

Re: Вопросы

Не уверен насчет порядка приемов, но ход мысли мне нравится. «Чем меньше мозгу надо додумывать прямоугольник, тем крепче верстка» — вывод правильный.

(Анонимно)
Правда, если мы применяем плашку, мы фактически создаем новую форму внутри формы. А значит нам надо озаботиться хорошей версткой уже внутри этой формы. Рекурсия :)

  • 1