Грамотные решения по разработке и продвижению веб-сайтов.
+380 93 988 5312
hello@qmiart.com
helloqmi

Звоните, пишите, всегда рады помочь!

October 30, 2012

Модульная сетка в Веб-дизайне. Что это и зачем оно нужно

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

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

Модульная сетка – это набор направляющих вдоль которых располагаются различные элементы. Служит она для ускорения и упрощения художественного конструирования и максимальной автоматизации верстки при использовании компьютерных настольно-издательских систем. Это по научному. Проще говоря, это рука помощи для дизайнеров , которая помогает дизайнеру ровно и гармонично размещать элементы на странице. Конечно понятие «модульная сетка» существовало задолго до появления интернета. Модульные сетки использую в первую очередь полиграфисты для верстки печатных изданий. Веб-дизайнеры с успехом переняли опыт использования сеток и применяют для макетирования веб-страниц. Вообще использование модульных сеток вызвано, наверное, самым старым и верным принципом дизайна – выравнивание. Как вы уже наверное заметили, наш ум всегда стремится все упростить, упорядочить, навести прядок в хаотичных вещах. Бывают конечно и исключения. Красота бывает и в хаотичных вещах, но это другая тема для разговора. Давайте рассмотрим 2 макета страниц ниже: модульная сетка дизайн сайтов, модульная сетка сайтаКак мы видим, это просто набор из прямоугольников разной ширины и высоты. Какой из макетов вам нравится больше? Я думаю, совершенно очевидно, что второй. Смотреть на него куда приятнее, картинка кажется логично правильной, упорядоченной, структурированной. На втором рисунке комбинация прямоугольников выстроена по модульной сетке, на первом – хаотично. Стоит отметить, что модульной сеткой пользоваться не обязательно, но очень желательно. Это всего лишь инструмент, которым нужно уметь пользоваться. Многие дизайнеры выставляют элементы макета на глаз, руководствуясь лишь внутренним чувством прекрасного и хорошим глазомером. Но такими способностями, к сожалению, наделены далеко не все.

Где взять сетку и как это работает?

Простейшую сетку вы можете построить самостоятельно с помощью стандартных возможностей Photoshop-а, а именно – направляющих. (рус: Просмотр >Вспомогательные элементы, eng: View> New Guide). Для Photoshop также есть специальные плагины, которые существенно облегчают построение сеток. Задача дизайнера заключается лишь в указании строк, столбцов и отступов. 1. GuideGuide. Простейший инстумент для дизайнеров помогающий быстро строить сетки. Скачать GuideGuide можно у нас. 2. Modular Grid Pattern. Как по мне более удобный плагин, суть та же. Сайт: http://modulargrid.org/ Там же и качаем. Есть множество онлайн сервисов для генерации модульных сеток по заданным параметрам. К примеру: Grid Designer, Grid System Generator. Но я рекомендую использовать готовые шаблоны сеток с срвиса 960.gs Как пользоваться сиим чудом, читаем на Хабре: http://habrahabr.ru/post/80915/.

Теги: