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

Приемлемо

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

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

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

Лучше

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

Скучно

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

Приемлемо

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

Плохо

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

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

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

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

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

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

Хорошо

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

Хорошо

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

P. S. Это был понедельничный совет о вёрстке и типографике в вебе. «Типографика и вёрстка» — одна из дисциплин Школы стажёров. Присылайте вопросы.

Типографика в вебеМодульная вёрсткаМодульная сеткаЧередование ритма
Отправить
Поделиться
Запинить

Рекомендуем другие советы