Модульные сетки в веб-дизайне
Начало
Вам нарисовали дизайн сайта. Красивый, яркий, но какой-то нестройный и разваливающийся? Прислали макет на верстку, а в нем черт ногу сломит от разнообразия отступов и блоков?
Не волнуйтесь! Просто дизайнер рисовал этот макет от души, позабыв заложить в него логику компоновки. Как же быть? Элементарно! Просто слегка приведем макет в систему — применим к нему модульную сетку!
Что такое модульная сетка?
Макет сайта будет выглядеть красиво, если он построен на основе системы модульной верстки, в простонародье — модульной сетки.
Попытки «систематизировать красоту» предпринимались еще в Средние века переписчиками книг. Они использовали набор специальных правил для разметки страниц.
После Второй мировой войны несколько графических дизайнеров, включая Макса Билла и Джозефа Мюллера-Брокмана, вдохновленные работой «Новая типографика» Яна Чихольда, задались вопросом верстки страниц.
Они начали разрабатывать систему, которая бы позволила наилучшим образом располагать текст и иллюстрации на странице. Фундаментальная работа Мюллера-Брокмана — «Grid Systems in Graphic Design» — способствовала распространению модульных сеток в европейской, а позже и американской типографике.
Модульная сетка — система верстки, основанная на сетке с вертикальным и горизонтальным ритмом. Условной единицей в этой системе является модуль, откуда, собственно, и пошло название.
Модуль — условный блок в конкретной сетке, шаг в ее ритме.
Зачем использовать модульную сетку?
«Чтобы ровненько выстраивать блоки!» — скажет сферический дизайнер в вакууме. И будет прав… ну, на треть половины, например.
Прежде всего, модульную сетку стоит использовать потому, что это очень удобный инструмент для проектирования. Модульная сетка четко задает структуру макета, описывает размещение блоков в дизайне сайта.
Кроме того, она позволяет создать единый стандарт возможного расположения блоков для всех страниц сайта.
А ещё, использование модульной сетки дает преимущества при верстке проекта, облегчает добавление новых элементов и поддержку проекта в целом. Не возникает путаницы с размерами колонок и отступов, а при необходимости немного изменить страницу, например, добавить один-два рекламных блока — это будет легко сделать, не нарушив целостности сайта.
Как этим пользоваться
Как пример — сайт компании А2К. В нем мы для удобства использовали фиксированную 12-колоночную сетку. По этой сетке у нас выстраиваются все ключевые элементы — начиная от меню и переключателя языков, логотипа, телефонов и заканчивая копирайтами.
На этой странице видно, как добавляется новый элемент — боковое меню, которое тоже прекрасно вписывается в сетку. И если нам понадобится поменять контент и боковой блок местами…
…благодаря сетке, страница останется все такой же целостной и собранной.
Но сеткой нужно пользоваться с умом. Многие дизайнеры забывают о том, что модульная сетка — это всего лишь инструмент, а не самоцель.
Типичная реакция дизайнера, открывшего для себя модульную сетку
Полезные ресурсы
Сетки для Photoshop
Grid 960 — замечательный макет 960-пиксельной сетки в любых форматах. Благодаря 6-пиксельному вертикальному модулю, обеспечивает гибкий контроль текстового ритма.
The Golden Grid Template — шаблон, построенный на базе css-фреймворка The Golden Grid.
CSS-фреймворки на основе сеток
1KB Grid — замечательная библиотека, которая ставит во главу угла скорость. Выберите количество колонок, их ширину и ширину отступа — нажмите «Скачать» и приступайте к верстке вашего сайта.
Baseline — еще одна библиотека для быстрого прототипирования, на этот раз с уклоном в типографику.
Twitter Bootstrap — огромная библиотека, фреймворк «для быстрой фронт-энд разработки», как называют его авторы. Построен на модульной сетке, причем с фиксированным и резиновым вариантами.
Вооружаться, однозначно!
Модульные сетки — это удобно, полезно, модно, молодежно! Стоит набить руку, и через некоторое время вы будете подбирать оптимальную сетку интуитивно. И пусть макеты дизайна, которые вы создаете, будут аккуратными, целостными, да просто — совершенными.
