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

Category:

Позиционирование элементов на плоскости

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

Ни один элемент не должен стоять случайно.


Неслучайно — значит, согласно определенному принципу. Их несколько:

1. Формат

Элементы привязывают к формату: его сторонам, углам и центру. Эти «направляющие» есть даже на пустом листе. Формат — самый большой объект на макете. Он ограничивает область действия элементов и влияет на них. Представьте, что это рамка: в нее можно упереться, коснуться, пройти насквозь. Всё как с картинками или текстовыми блоками.



2. Сетка

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



3. Форма

«Направляющими» для объектов могут быть другие объекты: геометрические фигуры, иллюстрации, блоки текста. В этом случае зависимый элемент повторяет или обыгрывает форму главного. Подробнее в одноименной статье.




Три принципа не существуют отдельно друг от друга, между ними много общего. Форма — это, по сути, та же сетка, только другого порядка. Модули сетки — это доли формата, и заполняются они схожим образом: с опорой на стороны, углы и центр. И чтобы окончательно всех запутать: формат — это форма макета :-)

Несколько примеров.

Здесь всё по формату: текст и картинка по углам, полоса по горизонтальному центру:





Всё по сетке, за исключением мотылька и колонтитула с линейкой:





По форме:





Крупные текстовые блоки держатся за верхнюю и нижнюю стороны формата. Колонки и строчки заголовка расставлены по сетке:





Подписи стоят по форме, рядом с теми объектами, к которым относятся. Даже если здесь есть сетка, мы всё равно ее не видим. Элементы в углах поддерживают формат, в том числе черная труба слева:





Рецепты заверстаны по форме, прямо на кувшинах. Остальные элементы по формату: заголовочный блок в ЛВУ, номер слайда (1/2) в ПНУ, подпись автора вдоль правой стороны. Стикеры, штампы и ярлычки можно шлепать куда угодно: они на отдельном слое. Подпись Tap for more повторяет форму стикера:





Текст старается заполнить пустоту вокруг фотографии и одновременно описывает рамку формата. Сетки нет вообще. Так компонуют обложки глянцевых журналов. Слова заголовка The Art of fashion пристраиваются друг к другу по форме:





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

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

  • Заголовки в многоколоночной верстке

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

  • Набрать крупно

    Прием очень простой и очень эффективный — набрать текст крупно. При увеличении кегля происходят интересные вещи. Во-первых, акцент…

  • Наглядность в таблицах

    Наглядность — это такое свойство верстки, которое помогает пользователю вникнуть в суть, не читая текст или читая по минимуму. Взглянул —…

  • 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.
  • 6 comments