Виды модульных сеток
1. Вертикальные (колонки).
Выделяют сетки с разной шириной (под стандартные разрешения экранов - 960, 1200, 1440, 1920 пикселей и другие), а также сетки с кратным количеством колонок (8, 9, 12 и т.д.) и без (7, 11 и т.д.).
К примеру, мы имеем некий новостной сайт, главное внимание на котором уделено баннеру - на главном экране он расположен на всю ширину модульных сеток. Далее слева идут блоки новостей, к примеру, в ¾ ширины экрана, а справа в ¼ экрана некие виджеты из соцсетей, подписка, и другая второстепенная информация. Таким образом мы четко выстраиваем акценты и располагаем информацию на сайте согласно им, а в итоге создаем смесь графики и смысла, привязанную к модульным сеткам.
Еще один хороший пример использования сеток: пример из трех страниц сайта, на котором размещена совершенно разнообразная информация - текст, фотографии, факты с цифрами и списки. Благодаря сеткам каждому из элементов мы находим свое место, выделяя самую важную информацию акцентами (размером и цветом). Таким образом, имея разный контент на всех 3-х страницах, мы получаем единообразие сайта, сохраняющее его целостность и обеспечивающее хорошее восприятие.
2. Горизонтальные (ряды).
В вебе часто используются не только колонки, но и ряды (горизонтальный ряд), его можно вычислить из основного размера шрифта по следующей формуле:
n = 1.5 * m
где
n - высота ряда (расстояние между базовыми линиями или интерлиньяж),
m - размер основного шрифта.
Очень удобно использовать горизонтальный ряд в том случае, когда мы делаем некие сноски у текста, т.к. основной текст имеет больший размер, а сноски меньший, но интерлиньяж у обоих текстов должен между собой гармонично соотноситься. Однако не обязательно всегда использовать коэффициент 1.5 - это лишь усредненный вариант.
Очень популярными являются сетки Bootstrap - это самый популярный framework для HTML, CSS и JS для разработки адаптивного дизайна. Одной из самых популярных является сетка на 12 колонок, т.к. в ней можно создать раздел с 3-мя блоками (по 4 колонки на каждый) и с 4-мя блоками (по 3 колонки на каждый). Так что в своей работе старайтесь использовать колонки с кратным числом, особенно если в вашем проекте планируется размещение информационных блоков.
Очень у многих дизайнеров есть так называемая “боязнь чистого листа”, когда он только начинает работать на пустом макете и не может ничего нарисовать, и к нему не приходят никакие идеи. Чтобы побороться с этим ступором, необходимо использовать ориентиры, к примеру сетки, тогда у вас уже будут некие зацепки, от которых можно отталкиваться для создания композиции.
Важно понимать, что модульная сетка не должна быть для вас строгим ограничением, а лишь инструментом и помощником. К примеру, дизайнер использует сетку и пытается закончить некий раздел кнопкой, однако она никак не вписывается в сетку, в итоге дизайнер ее удаляет, не выполнив до конца задачу данного раздела. Это неверный ход - лучше решить задачу, просто грамотно расположив кнопку относительно остального содержимого раздела. Абсолютно все сделать по сетке невозможно, лучше сделать некоторые решения на глаз, если это смотрится лаконичнее.
Как вы уже поняли виды модульных сеток разнообразны, каждый дизайнер работает с теми которые ему удобней.
