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