Веб-дизайн: использование модульных сеток

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

Как это работает

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

Сетка, или совокупность направляющих, – основа гармонии и порядка. И чем понятнее в определённой  ситуации принцип выравнивания, тем легче мозг находит закономерность, то есть модель, осваивает информацию и продолжает движение.

Хотя в природе нет сеток, но есть закономерности и порядок; но природа – не веб-дизайн и не способ привлечения на сайт и увеличения конверсии. А вот при исследовании успешных сайтов и их дизайна ясно видно, по каким сеткам расположены элементы и информация. На сетке зиждется структура страницы и логический шаблон, по которому посетитель видит и осваивает информацию.

Порядок – не скучно ли это?

Разве что если всё на сайте квадратно-гнездовое, без разнообразия форм и цвета. Применяя сетку, дизайнер не теряет чувство меры, выстраивая всё по стойке «смирно».

Порядок – основа гармонии!

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

Способы поиска модульной сетки

Их два: берёшь готовую сетку или создаёшь свою.

1. Готовые модульные сетки

Их можно легко скачать из Сети, причём бесплатно, или проанализировать и «передрать» из работающей страницы сайта. В целом, готовые шаблоны бывают:

• Фиксированных размеров, предлагаемые многими сервисами.
• Адаптированные или «резиновые», более популярные благодаря возможности приспособить дизайн сайта к любому устройству.

2. Свои модульные сетки

Любые вариации, основанные на визуальных, математических или геометрических зависимостях, на правиле третей или золотом сечении – всё в ваших руках!

В подготовке статьи принимали участие студии дизайна http://webakula.ua/ из Харькова.