Посмотрим на картинку. Это просто какая‑то страница с текстом:
Что здесь происходит? У нас заданы какие‑то поля: верхнее, два боковых и нижнее. Соотношения этих полей очень сильно влияют на ощущение от любой вёрстки. Я хочу сейчас дать какие‑то базовые рекомендации.
Одно из самых важных соотношений — это верхнее поле и левое поле. Хорошо, когда они контрастируют друг с другом.
Хорошо, когда прямоугольник, который образовывается в левом верхнем углу, не квадратный, а именно прямоугольный.
Ещё лучше, чтобы этот прямоугольник примерно по пропорциям был похож на тот формат, который вы сейчас осваиваете. Если у нас вертикальный лист, то этот прямоугольник получился тоже плюс‑минус вертикальный, по пропорциям похожий на лист. Это базовое правило, не совсем обязательное к соблюдению, но наиболее безопасное.
Следующая штука — это нижнее поле. Здесь играет роль такая вещь, как поправка на гравитацию. Если мы посмотрим на предыдущую картинку, то кажется, что текст провалился вниз. Это выглядит не очень круто, поэтому наиболее безопасный путь — это нижнее поле делать в 1,5–2 раза больше, чем верхнее. Это такая простая конструкция:
И, конечно, смотрите на то, как соотносятся левое поле и правое поле. Здесь не случайно правое поле сильно больше, чем левое, просто потому что текст набран левым флагом. Здесь, если присмотреться, край строчек слегка рваный и им хочется справа дышать. В результате получается такая плюс‑минус классическая полоса текста.
Если мы смотрим на разворот журнала или книги, то они обычно всё‑таки стремятся к какой‑то симметрии:
Если вы посмотрите, то здесь внешние поля одинаковые и внутренние одинаковые. При этом, конечно же, слегка нарушается закономерность, при которой левое поле побольше, чем правое. Но ничего страшного в этом нет, правое поле всё равно достаточное, чтобы текст дышал.
Видите, насколько могут быть свободные поля, если мы говорим про какие‑нибудь классические книги. Например, у студийной книги очень похожие пропорции. Кстати, здесь ещё то, что мы с вами обсуждали: заголовок — якорный объект. Посмотрите, как он отступил от всего:
Вот ещё пример — это разворот журнала «Юрист компании». Здесь мы к полям относимся более экспериментально, но полосы опять же симметричны:
И ещё два журнала — здесь поля почти идентичные, но всё равно симметричные:
Переходим на так называемую полисистему, то есть у нас уже не две полосы симметричные, а больше, скажем, это буклет или брошюра. Там эта симметрия теряет всякий смысл, поэтому можно делать по‑разному. Но в принципе, конечно же, какую‑то одинаковость полей соблюдать правильно. Здесь, если присмотреться, левое и правое поле на каждой полосе этой брошюры одинаковы, хотя не симметричны:
Если мы говорим про веб‑страницу или приложение, там вообще не имеет смысла говорить про симметрию полей. Веб‑страница или экран интерфейса состоят не из отдельных разворотов, а из кучи модулей с отдельными линейками, плашками, какие‑то просто из модулей за счёт вёрстки разделяются. И внутри каждого из них возникают свои отношения между содержимым и полями:
Поля влияют на ощущения от вёрстки. И их можно соответственно использовать. Давайте просто посмотрим на несколько форматов, которые мы все знаем, и как можно к ним относиться.
Во‑первых, плакат. С одной стороны, плакат — это обычно что‑то довольно большое, формат А2, А1 или ещё больше. То есть это какая‑то афиша, которую видно издалека. И за счёт того, что она большая, мы можем сделать довольно большие поля. Если бы мы делали какой‑нибудь плакат художественной выставки, особенно классической живописи, там это было бы уместно. Но если мы делаем поля очень плотными, как на плакате выше, то мы можем добиться очень выразительного контраста между этими плотными полями и отступами внутри самой вёрстки. В случае плаката можно всячески экспериментировать:
Вот швейцарский плакат — здесь поля тоже очень плотные, при этом огромные отступы между элементами. В результате получается контрастная швейцарская вёрстка, которую ни с чем не спутаешь:
Кстати, берите на вооружение, прямо очень хорошая конструкция: сверху пачка маленьких строчек, заголовок, снизу иллюстрация. Прямо готовый шаблон для обложки журнала или плаката.
Вот ещё пример. Здесь тоже типа швейцарская вёрстка. Поля свободнее, чем на предыдущем примере. Кстати, ещё соблюдено правило внутреннего и внешнего — расстояние между строчками существенно меньше, чем поля вокруг:
Вот сайт и его мобильная версия:
Как я уже сказал, на сайте можно экспериментировать совершенно по‑разному. Здесь весь сайт нарезан на кучу маленьких модулей: есть белый модуль, есть куча цветных плашек. Чтобы это всё выглядело однообразно, мы постарались сделать так, чтобы поля в рамках каждого модуля были одинаковы. Так это выглядит не как какая‑то выставка плашек, а как цельная система. Но речь о симметрии здесь не идёт. А ещё обратите внимание на мобильную версию. Возможно, вы даже сразу не заметите, но поля в мобильной версии сильно меньше, чем в десктопной. Но благодаря тому, что мы постарались соблюсти пропорции — соотношения полей и кегля, полей друг с другом, — кажется, что всё одинаково. Это тоже такой клёвый трюк. И в результате две версии выглядят преемственно по отношению друг к другу.
Если говорить про мобильные приложения, версии сайтов и всё такое, тут сам формат и польза делу подсказывают, что здесь лучше экономить с полями, потому что сам носитель маленький, информации обычно нужно впихнуть как можно больше, поэтому во всех приложениях обычно, которые мы с вами видим, поля довольно компактны:
Временами очень сильно может нарушиться внутреннее и внешнее и, может быть, ещё какие‑то принципы, потому что важно показать больше информации.
Ещё какие‑то экраны. Тоже всё компактно умещается:
Ещё один пример — художественные книги и альбомы:
Здесь иногда бывает уместно сделать огромные поля, потому что большие поля создают ощущение, что перед тобой действительно альбом. Просто вспомнить любые такие альбомы — и возникает ощущение солидности, повышается важность каких‑то иллюстраций или объектов, которые находятся в этом альбоме. Всё клёво.
Здесь перед нами книжка про корабли или какой‑то исторический альбом, смотрите, какие огромные поля. Ты берёшь эту огромную книгу в руки, и большие пальцы, которые держат эту книгу, налезают на эти поля, и ощущение — кайф листать. Иногда на большие поля можно вытащить вспомогательные сноски, мелкие фотки, это клёво выглядит.
Вот ещё разворот книги про живопись Леонардо да Винчи:
Тоже обратите внимание: книга посвящена классическому искусству, и тоже большие поля. Такое ощущение, что я с собой ношу маленький переносной музей.
Кстати, ещё классное соотношение — огромная картинка и очень интеллигентная подпись под ней. Тоже легко представить, что такая вёрстка оказалась бы в музее.
Это ещё какие‑то развороты из Леонардо да Винчи:
Ещё есть такая штука, как газета. Газета — это довольно специфичный формат. Обычно газета выходит очень часто: раз в неделю, иногда раз в день. Поэтому в неё нужно быстро вколачивать материал и быстрее отдавать в типографию. При этом в газету нужно запихнуть как можно больше информации, чтобы люди её увидели, особенно на передовице в газетном киоске, и сказали продавцу: «Да‑да‑да, давай мне эту газету, я сейчас пойду читать». Поэтому в газете приветствуются очень компактные поля, всячески можно, понятное дело, с оглядкой на смысл, нарушать внутреннее и внешнее. Чтобы побольше информации влезло:
Здесь мы в своё время задизайнили бухгалтерскую газету «Учёт. Налоги. Право». Поля довольно компактные, при том что сам формат большой. Смотрите, как плотно стоят заголовки к своим модулям, как плотно набраны строчки. Как весь текст влипает в линейки по бокам. Но в результате всё выглядит довольно эстетично.
Ещё развороты той же газеты:
Здесь хочу обратить внимание, что в газете «Учёт. Налоги. Право» иногда случаются специальные темы — очень большие статьи, посвящённые чему‑то. И там мы намеренно от этой плотной вёрстки отошли. Когда ты листаешь обычные плотные развороты, там всё было плотно‑плотно, много информации. А потом долистал до этой штуки, и — бдыщ! — контраст, свободная вёрстка, что‑то новое. Сразу хочется изучать.