» » Что такое модульная сетка Как сделать модульную сетку

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

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

Все, что окружает нас, имеет свои пропорции. Еще в детстве мультик «38 попугаев» научил нас тому, что все можно поделить на части, равные друг другу (длина удава состояла из 38 попугаев). Также все мы знаем о том, что рост человека равняется семи его головам, сантиметр состоит из десяти миллиметров, метр из ста сантиметров и так далее. Таким образом, попугай из мультика, голова человека, миллиметр и сантиметр — это модули.

38.a.vdrug.poluchitsya.0-03-55

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

Итак, приступим: 

 У вас отличный сайт? Номинируйте его на

«Рейтинг Рунета»

1. Определяем функциональность

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

Стоит отметить, что существует два способа создания сетки шаблона:

Способ №1: Создайте свою собственную сетку

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

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

Возможно, в этом вам помогут следующие статьи:

Вот несколько примеров сетей, созданных в Photoshop с помощью направляющих (View> New Guide):

2

В открывшемся окне настройки задайте параметры модульной сетки. В области Grid выберите цвет линий, образующие элементы сетки и шаг линий. Нажмите «Ок», и проверьте, как принятые изменения повлияют на вид изображения. В среде разработки веб-проектов Adobe DreamWeaver модульная сетка включена по умолчанию в макет разрабатываемой страницы.

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

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

Из-за своего удобства такие двухколонные сетки стали стандартом при создании информационных сайтов. Здесь все «под рукой» — и основной текст и навигация, и ссылки, к тому же эта сетка позволяет применение горизонтальной навигации.

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

Трехколонный макет

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

едрен батон.....

Использование модульной сетки в AdobePhotoshop.

Аналогично сетка строиться и в фотошопе. Но здесь дизайнеры пошли дальше и сейчас можно скачать различные плагины для построения модульной сетки с заданными параметрами. Это значительно облегчает и упрощает создание лаконичных дизайн-макетов.

Выводы.

Модульная сетка используется повсеместно. Её значение велико, а возможности нельзя недооценивать.

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

Наверх