Человек читает слева направо, сверху вниз:

Для простоты обозначим чтение по колонке вертикальной стрелкой:

Если колонка текста разорвана иллюстрацией, чтение прерывается, и глаз ищет продолжение. Если текст разорван посторонним рекламным банером, то читатель может даже решить, что текст закончился:

Если текст разбит на колонки, то дочитав одну колонку, человек ищет наверху начало следующей. При этом сохраняется движение слева направо, сверху вниз:

Направление чтения по колонкам изобразим горизонтальной стрелкой:

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

Выравнивание по верху универсально для колонок обычного текста, таблиц и иллюстраций. Исключения бывают, если колонки не связаны порядком чтения слева направо.

В матрице из текстовых блоков направление чтения не так очевидно и предсказуемо:

Подобные конструкции безопасны, если порядок чтения не имеет значения. Можно попытаться направить взгляд читателя, сблизив связанные блоки по горизонтали или по вертикали.

Или даже применить тяжёлую артиллерию, проведя разделительные линейки или пронумеровав блоки по порядку, как на примере справа. Но если порядок чтения важен, то матрица, скорее всего, вызовет разночтения.

Если «сломать» выравнивание, текст снова объединится в колонки:

В вебе редки высокие и узкие колонки текста, но полно длинных списков ссылок. Если поставить два списка рядом, то при прокрутке заголовки останутся где-то наверху, и ссылки во второй колонке легко по ошибке принять за продолжение первого списка:

Так себе

Такие списки лучше разбить на колонки и поставить друг под друга. Кстати, колонки будет гораздо легче выровнять по высоте:

Лучше

Положение иллюстрации относительно текста тоже задаёт направление:

Текстовый блок со сложной структурой недостаточно «упаковать» в прямоугольник, чтобы отделить от остальной страницы. Модуль не должен изнутри «раздираться» на части противоречивыми направлениями чтения:

Так себе

Лучше

В модульной вёрстке связанные элементы согласованы по ширине и высоте, и благодаря этому визуально объединяются в прямоугольный модуль. Верно и обратное: случайное выравнивание создаёт новый псевдомодуль:

Как-то подозрительно

Новостной блок имеет вид шахматной доски: статьи справа подозрительно связались с крупной фотографией Кудрина, а заголовок заметки о нём — с авторской колонкой Дениса Самсонова:

На макете плаката подпись к верхней иллюстрации с процентами — «В России совершается 49% абортов» — выровнена по верху изображения рекламируемого презерватива, а слоган — по низу. Эти две надписи и изображение упаковки образуют модуль, и фраза об абортах увязывается с товаром. Как будто это презервативы во всём виноваты:

Модульная вёрстка — это деление на прямоугольники. Модули не должны пересекаться, наползать и перекрывать друг друга, если это не сознательный стилистический ход.

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

Обратите внимание, как блок кнопки «Получить доступ» выравнивается сверху с надписями «Айфон» и «Андроид», а снизу — со строкой меню в левой части. В итоге две не связанные строки объединились в псевдомодуль, который пересекается с блоком новостей слева сверху.

Красноватым показаны области пересечения:

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

• Правила модульной вёрстки
• Модуль имеет форму прямоугольника или формирует его антипространством.
• Внутренние элементы модуля согласованы по направлению чтения.
• Выравнивание ширины, высоты и положения элементов создаёт новый модуль (или псевдомодуль).
• Модули не должны пересекаться между собой и влезать в пространство друг друга.
• Соседние модули не должны вводить читателя в заблуждение.