По традиции начнём с текста без иллюстраций. Простой способ собрать страницу — сделать «бутерброд», то есть расположить модули слоями друг под другом:

«Бутерброд» прекрасно подходит для шаблонов сайтов, сервисов и приложений, потому что страницы хорошо выглядят независимо от набора «слоёв» и их наполнения. Если данных будет слишком мало или слишком много, бутерброд укоротится или вырастет по вертикали без неуклюжих дыр и просветов.

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

Но однородная страница без иллюстраций не цепляет глаз. Введём ритм и расположим модули по колонкам:

Доминирующий блок стал лучше выделен. Но если второстепенных модулей будет слишком много, ритм быстро наскучит, как песня, играющая по кругу:

На помощь приходит чередование ритма по слоям. Мы даже позволим себе нарушить общую четырёхколонную сетку, сделав для разнообразия пару слоёв трёхколоночными:

Если полностью игнорировать сетку и устроить вакханалию колонок, страница развалится:

Этим часто грешат промостраницы в интернете — так и атакуют нас рядами преимуществ и достоинств.

Введём новый приём — плашку. Плашка помогает отделить модуль от соседнего и объединить его собственные части:

Плашка выделяет модуль на странице. Поэтому из соседних блоков нужно ставить на плашку более важный.

Существует миллион разновидностей стилей плашек и рамок от плоских минималистичных до объёмных с градиентами и тенями:

Оформление плашки — дань текущей моде или фирменному стилю, но её функция остаётся одной и той же — объединять и выделять.

Хорошая идея — одновременно сломать сетку важного модуля и поставить его на плашку. Плашка и нестандартный ритм выделят блок среди других, при этом плашка «склеит» нестандартный модуль:

Если бутерброд выглядит суховато, вертикальная колонка разбавит горизонтальную монотонность:

Продолжение следует.