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