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

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

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

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

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

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

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

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

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

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

Плашка:

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

Иллюстрации

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

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

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

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

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

Галерея

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

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

Новые материалы — на канале интерфейсов без шелухи