Сборка страницы из модулей

По статьям Артёма Горбунова

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

Сетка — не догма, от нее можно и нужно отходить в отдельных модулях. Но если все модули на странице не соблюдают сетку, она выглядит неряшливо.

В сетке обычно 12 или меньше колонок.

Бутерброд и чередование слоев

Самый распространенный способ сборки страницы — «бутерброд»: модули находятся слоями один под другим, каждый слой занимает 100% ширины страницы.

Чтобы страница выглядела цельной, верхний модуль бутерброда доминирует над остальными.

Хорошо разнообразить бутерброд:

• некоторые слои делать многоколоночными;
• иногда отступать от сетки (сетка 4 колонки, модуль в три).

Плашка:

• объединяет несколько блоков в один;
• отделяет их от соседних;
• привлекает внимание к модулю.

Иллюстрации

Доминирующая иллюстрация собирает страницу вместе. Ее помещают на самом верху или в верхней части страницы.

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

Чередовать ритм

Не повторять на соседних этажах:

• количество колонок;
• верстку иллюстраций;
• стилистику «спокойный-яркий»;
• тип содержимого (текст, иллюстрация, таблица, отзывы).

Галерея

Галерея — модуль из иллюстраций (и подписей к ним).

Плохо: матрица и кирпич. Хорошо: плитка.