Сен
25

Модульная сетка или 960 Grid System

Tweet

Многие дизайнеры слышали такое понятие, как «Модульная сетка«, некоторые даже читали о ней, но лишь единицы дизайнеров используют в работе модульную сетку. А зря. Что самое важное в веб дизайне? Далеко не красивая картинка, как думают многие. В дизайне самое важное это простота и удобство восприятия информации конечным пользователем. Чем удобнее предоставлена информация, тем больший рэспект дизайнеру. Человеческий мозг лучше воспринимает упорядоченную информацию, именно поэтому мы любим порядок на рабочем месте, в тумбочке или на рабочем столе своего компьютера. Именно поэтому тетради разлинеивают, что бы текст был написан ровно, а не волнами и не потому, что так красивее, а потому что именно так удобнее воспринимать информацию.

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

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

960 Grid System

В сети я наткнулся на очень полезный ресурс 960 Grid System. Этот ресурс предоставляет вам сетку созданную на основе наиболее часто используемых размеров, при помощи которой вы можете разбить страницу на модули, при том этот ресурс заинтересует не только дизайнеров но и верстальщиков, поскольку вы можете скачать не только PSD файл с сеткой, но Html заготовки с использованием этой модульной сетки.

Система была разработана в 2007 году на основе исследования учитывающего разрешения мониторов, шрифты используемые в разных операционных системах, популярные браузеры, и самое главное удобочитаемости. Ширина макета в 960 пикселей тоже была выбрана не случайно. На то время популярным было разрешение 1024х728 px, если учесть полосу вертикальной прокрутки, то получалось около 990 px. Но автор системы при редизайне своего сайта заметил, что сайт с бэкграундом смотрится намного приятнее нежели без него, тут мнения пользователей могут разойтись, есть ведь и резиновые сайты, но лично мне эта идея нравится. Не говоря уже о том, что 960 легко делиться на парные числа.

Два вида модульной сетки.

960 Grid System предлагает два варианта сетки: с 12-ю столбцами и с 16-ю.

В версии с 12-ю столбцами, мы имеем колонки по 60 px и пробел в 20 px. Так доступные ширины столбцов: 60, 140, 220, 300, 380, 460, 540, 620, 700, 780, 860 и 940 px.

В версии с 16-ю столбцами, мы имеем колонки по 6460 px и пробел в 20 px. Так доступные ширины столбцов: 40, 100, 160, 220, 280, 340, 400, 460, 520, 580, 640, 700, 760, 820, 880 и 940 px.

Если честно, сразу работать с сеткой не очень удобно, кажется что загоняешь себя в некоторые рамки и ограничиваешь. Но уже после первого веб дизайна понимаешь, что модульная сетка — вещь незаменимая.

Комментирование закрыто.

Follow us on Twitter!

Получать на E-mail:


Свежие записи

Разделы