nobelfaik


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

Доктор, мой макет не дышит!


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
?

Log in

No account? Create an account