Тема модульных сеток в дизайне и, вообще, модульной системы построения — очень обширная, в рамках одного поста рассмотреть ее нереально. Сегодня я хочу рассказать, почему нужно использовать модульную сетку при разработке, какие есть инструменты, помогающие в работе и как не стать заложником прямых линий и ровных отступов. Моя задача — заинтересовать вас, а каждый сделает для себя какие-то выводы.
Немного истории
Можно считать, что веб-дизайн берет свое начало от традиционных, печатных книг, газет и прочих подобных вещей. Книги и газеты существуют много лет, их верстка давно «устаканилась», есть определенные традиции и нормы, которых придерживаются. Однако, модульные системы появились еще раньше и пришли в книгопечатание из архитектуры. В классической архитектуре за единицу модуля обычно брали радиус колонны у ее основания и соразмерно ему устанавливались остальные элементы конструкции (ширина, высота здания и прочее).
Нынешняя модульная сетка в веб-дизайне появилась относительно недавно и выполняет очень важную функцию — упрощает проектирование и верстку страниц. Что сегодня называется модульной сеткой и как она работает?
Модульная сетка в веб-дизайне
Модульная система вёрстки — система вёрстки, при которой основой композиции полос и разворотов становится модульная сетка с определенным шагом (модулем), одинаковым или разным по горизонтали и вертикали.
Википедия
Сразу скажу, что жесткого стандарта использования модульной сетки нет и вряд ли когда-то появится. Именно поэтому существует масса разновидностей сетки и вы вольны использовать любую, какая понравится. Ниже я расскажу о самых популярных видах сетки, а пока посмотрим, какие есть преимущества использования.
- Привносит порядок и целостность восприятия.
- Модульная сетка это шаблон, а по шаблону всегда работать быстрее и удобнее, что ведет к повышению скорости разработки шаблона и его верстки.
Казалось бы, преимуществ немного, но не спешите с выводами. Посмотрите на скриншоты ниже и попробуйте визуально подвинуть пару блоков в разные стороны.
Что у вас получилось? Я уверен, что композиция уже нарушена и сайт не воспринимается как единое целое.
Вот так мелочи умеют воздействовать на общую картину. Но, в тоже время — «дьявол кроется в деталях» и начинающие дизайнеры, узнав о модульной сетке, начинают воспринимать ее как аксиому. Что из этого получается?
- дизайн становится «академически» скучным
- сетка накладывается даже тогда, когда ее применение неуместно
- используя сетку, легко забыть о главных и дополнительных элементах дизайна — сетка уравнивает всех
- сетка — инструмент, а не самоцель дизайна
Итак, подведем небольшой итог. Модульная сетка — штука, безусловно, нужная и важная. Ее использование необходимо для того, чтобы ваши блоки не плясали по странице и воспринимались как единое целое. Но, в тоже время, она накладывает некоторые ограничения, которые можно и нужно переступать, если того требует идея дизайна.
Не вписывайте дизайн в сетку, наоборот, создавайте сетку под дизайн.
Инструменты для работы с модульной сеткой
Я расскажу о тех сервисах и фреймворках, которыми пользовался лично, но в Сети их огромное количество.
Photoshop
Отличный макет для создания страниц от Алексея Черенкевича в формате PSD — тут
CSS
Здесь большой выбор фреймворков, но я использовал всего два, которые полностью меня устраивают. Это 960Grid и Blueprint. Эти фреймворки сложно назвать полноценными модульными сетками, это, скорее, модульные колонки 
Но работу свою выполняют.
JavaScript
modulargrid — небольшой скрипт для верстальщика с гибкими настройками. Умеет показывать сетку поверх вашей верстки, облегчая и ускоряя процесс. Очень хорошая штука, рекомендую.
Онлайн-сервисы для генерации
http://modulargrid.org/ - неплохой сервис, который позволяет вам создать собственную модульную сетку под ваши нужды и скачать ее в формате PNG, в виде паттерна для Фотошопа или прозрачной маски.
Вот такой получился набор, для полного цикла разработки, от рисования до верстки.
Используйте, только не переборщите… Удачного дня
