Мобильный логотип Томатус
+7 (495) 181 01 44
Оставить заявку
Ирина

21 Декабря 2011, Ирина

Модульные сетки в веб-дизайне

Начало


Вам нарисовали дизайн сайта. Красивый, яркий, но какой-то нестройный и разваливающийся? Прислали макет на верстку, а в нем черт ногу сломит от разнообразия отступов и блоков?

Не волнуйтесь! Просто дизайнер рисовал этот макет от души, позабыв заложить в него логику компоновки. Как же быть? Элементарно! Просто слегка приведем макет в систему — применим к нему модульную сетку!

Что такое модульная сетка?

Макет сайта будет выглядеть красиво, если он построен на основе системы модульной верстки, в простонародье — модульной сетки.

Попытки «систематизировать красоту» предпринимались еще в Средние века переписчиками книг. Они использовали набор специальных правил для разметки страниц.

После Второй мировой войны несколько графических дизайнеров, включая Макса Билла и Джозефа Мюллера-Брокмана, вдохновленные работой «Новая типографика» Яна Чихольда, задались вопросом верстки страниц.

Они начали разрабатывать систему, которая бы позволила наилучшим образом располагать текст и иллюстрации на странице. Фундаментальная работа Мюллера-Брокмана — «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 — огромная библиотека, фреймворк «для быстрой фронт-энд разработки», как называют его авторы. Построен на модульной сетке, причем с фиксированным и резиновым вариантами.

Вооружаться, однозначно!

Модульные сетки — это удобно, полезно, модно, молодежно! Стоит набить руку, и через некоторое время вы будете подбирать оптимальную сетку интуитивно. И пусть макеты дизайна, которые вы создаете, будут аккуратными, целостными, да просто — совершенными.



Вернуться ко всем статьям