Модульная сетка в дизайне

Сетка строится на основе модулей — вертикальных и горизонтальных линий, разделяющих страницу на прямоугольники. К этим линиям привязываются основные элементы страницы.

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

1. Зачем использовать модульную сетку?

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

2. Как использовать сетку?

• Определите необходимое количество колонок. Чтобы узнать количество колонок, проанализируйте контент. Сделайте набросок, где будут расположены все элементы. Это даст вам более четкое представление о том, сколько колонок нужно. 12-и колоночная сетка самая популярная, потому что страницу легко разделить на модули по 2, 3, 4 и 6 колонок. Но нет смысла ее использовать, если для вашего макета достаточно 6 колонок.
Для создания сайта meatland-tula.ru самой подходящей стекой стала 12-и колоночная
• Не бойтесь выходить за пределы сетки. Легко соблюдать правило, где каждый блок начинается и заканчивается на столбце сетки. Пренебрегайте им, чтобы визуально выделить элемент и вызвать к нему интерес. Но будьте аккуратны, непродуманное растягивание элементов за пределы колонок может нарушить визуальную иерархию.
На сайте dieseltula.ru элементы баннера выходят за границы сетки и привлекают внимание.
• Не забывайте об оптической компенсации. Если вписать в круг треугольник и расположить его по центру, будет казаться, что треугольник смещен влево. Чтобы треугольник выглядел так, будто он в центре круга, его надо немного сместить вправо. Так как сетка не учитывает оптических иллюзий и искажений, чтобы правильно распределить визуальный вес, используется оптическая компенсация.
На примере треугольников в круге хорошо понятна суть оптической компенсации.
• Соблюдайте горизонтальные и вертикальные интервалы. При размещении большого количества элементов следите, чтобы интервал между ними и по горизонтали и по вертикали был одинаков. В противном случае это будет создавать визуальный шум.
На сайте legallex.ru расстояние между карточками вверху и внизу—24px.Это создает ощущение порядка.
• Сетки для мобильных устройств. Экран мобильного устройства имеет ограниченное пространство и пользователи могут просматривать ограниченнее количество контента за раз. Мобильный контент обычно ограничен одним-двумя столбцами. В этом случае хорошим решением будет использование плиточной сетки, в которой высота столбцов и строк одинаковая и образует квадратные плитки, которые позволят разместить изображенное достаточно большое для того, чтобы разглядеть его, но и достаточно маленькое, чтобы видеть больше контента за раз.
Для создания мобильной версии сайта zsaritm.com использовалась сетка для мобильных устройств.

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