Модульная сетка



Модульной сеткой называется виртуальная сетка, которая обычно образуется при помощи горизонтальных и вертикальных линий. После чего, к ним начинают привязывать основные элементы страницы.
Это не новый термин, он был заимствован из издательского дела. Модульная сетка чрезвычайно актуальна в процессе создания Web-страницы. Благодаря ей определяются главные блоки для сайта . Даже, если не пытаться специально ее построить, она получится сама по себе.

Объекты, которые используются на сайте (текст, видео, картинки, рекламные баннеры, навигационные панели) должны иметь типовой дизайн шаблона. Что такое модульная сетка? Это набор линий и направляющих в шаблоне, на которых должны располагаться элементы дизайна. Работа с модульной сеткой значительно упрощает как проектирование интерфейса, так и последующую верстку макета.

Сложность модульной сетки автоматически предопределяет сложность верстки составных блоков для сайта. Стоит заметить, что контент любого интернет-сайта визуально делится на определенные модули. Модульная сетка является отражением второго уровня структуры сайта, то есть его страничной компоновки.

Двух и трех-колоночные сетки являются самыми популярными. На них построено большинство сайтов. Так же существует множество других вариантов сеток, которые выглядят нестандартно.

Стоит сказать, что данным методом проектирования интерфейса интернет-сайта стали пользоваться совсем недавно. Он позволяет намного упростить задачу проектирования интерфейса и последующей работы с макетом. Модули в веб-дизайне характеризуются непостоянной шириной в отличие от издательского дела. Их растяжение предопределяется шириной браузерного окна.

Модульные сетки в веб-дизайне могут иметь динамические размеры, другим словом, высота и ширина могут растягиваться. Как и любой другой аспект дизайна, она должна определяться целями создания сайта.

Прежде чем приступать к работе , необходимо прояснить вопрос о содержании, которое будет использоваться на веб-странице. Оно определяется такими факторами, например как: цель сайта, информационный текст, аудитория, рекламные блоки и т.д. После этого анализа создается форма и структура сетки.

Преимущества работы с модульной сеткой в дизайне:

1. Сетка позволяет представить информацию на странице цельной, упорядоченной и гармоничной.
2. Модульная сетка позволяет ускорить процесс работы , снизить временные затраты на поиски свободного или подходящего места в макете.
3. Сетка позволяет добавить новую информацию , при которой не нарушится общая концепция дизайна.
4. Разработанная модульная сетка может стать основой для построения дизайна для других страниц на сайте.
5. Модульные сетки позволяют пользователю облегчить восприятие материала , и помогают найти нужную информацию, при переходе по страницам.

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

Как создать модульную сетку?

В интернете существует достаточно много полезных сервисов, расскажу об одном из них, это сайт 960.gs , который предлагает готовую сетку с разрешением 1024 на 768 пикс .

1. Открываем сайт 960.gs
и жмем на большую кнопку «Big ol’ DOWNLOAD button:)» Она находится прямо по центру, так что не увидеть невозможно. Качаем архив.
2. Тут можно использовать либо psd шаблон (templates) либо плагин (app_plugins)

Рассмотрим вариант с плагином:

Установка простая, закидываем плагин в папку
c:\Program Files\Adobe\Adobe Photoshop CS3(4,5)\Presets\Actions\ (для английской версии)
c:\Program Files\Adobe\Adobe Photoshop CS3(4,5)\Наборы\Операции\ (для русской)

Далее переходим в фотошоп, нажимаем кнопки Alt+F9 , из панели Операции выбираем нужную нам сетку, после этого нажимаем Play , все готово!


Минусы: сеток всего 3 и нет горизонтальных направляющих.

Небольшой совет на будущее – не перегружайте дизайн. Свободное пространство и поля на странице необходимы для зрительного восприятия.




  1. Юлия:

    Офигенный блог! Все моменты, которые сама когда по кусочкам собирала и выбирала лучшее — всё тут сразу. Надо в закладки)

  2. Mistli:

    Спасибо за комментарий!))

  3. Ola:

    Я бы сказала: ШИКАРНЫЙ сайт!!!

Ваш отзыв