Блог
Все записи

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

23.08.2010

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

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

Есть несколько неоспоримых плюсов в использовании модульной сетки при разработке макета дизайна сайта.

  • Во-первых, модульная сетка позволяет определенным образом ускорить процесс разработки, снизить временные затраты на поиск подходящего места в макете сайта.

  • Во-вторых, блоки модульной сетки помогают сохранять пропорциональность и сбалансированность элементов макета.

  • В-третьих, разработанные модульные сетки могут стать основой при реализации следующих дизайн проектов сайта.

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

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

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

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

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

Применение модульной сетки в дизайне веб сайта позволяет структурировать, упорядочивать информацию, достигать сбалансированности элементов странички, упрощает верстку макета сайта.

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

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

  • GuideGuide – плагин для Photoshop. Позволяет самостоятельно строить сетки;

  • ModularGridPattern – еще один удобный плагин, позволяющий использовать модульные сетки в Photoshop

Кроме того, существуют онлайн-сервисы, предлагающие уже готовые решения, массу шаблонов, которые экономят время на подготовку модульной сетки. Самым популярным является фреймворк 960.gs, позволяющий дизайнеру или верстальщику как создавать собственные модульные сетки, так и использовать готовые шаблоны. Для создания резиновых модульных сеток существует онлайн-сервис Variable Grid System. Все эти программы облегчают работу дизайнера и экономят его время.

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

Заказать звонок
Введите ваш номер телефона и наши сотрудники свяжутся с вами в ближайшее время.