Разработка дизайна сайта с использованием модульной сетки

Очень правильно модульную сетку, как технику для построения дизайна, использовать для построение дизайна Интернет-проекта. При помощи модульной сетки можно строить дизайн сайта, баннера или мобильного приложения. Более того, модульная сетка используется при прорисовке автомобилей, и даже в искусстве.

Модульная сетка позволяет:

• внести логику в расположение элементов при проектировании;
• уменьшить человекочасы верстальщика;
• улучшить восприятие сайта.

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

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

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

Давайте разберемся как построить модульную сетку.
Для начала набросайте эскиз сайта. От руки.
Определитесь с размером шрифта, который будете использовать на сайте. Нарисуйте шрифтовую сетку.
Теперь из эскиза определите ширину наименьшего блок.
На основе высоты шрифтовой сетки и ширины наименьшего блока рисуется сетка.
Примерно так:


Дизайн от бессознательного движется при с помощью правильно построенной сетки к более упорядоченному.