Создавая чудесные сайты, веб-дизайнер опирается не только на свой талант и креатив. Он использует еще и модульную сетку, благодаря которой яркие идеи структурируются и превращаются в интересный и удобный для восприятия проект. Что же такое сетка? Из чего она состоит и как с ней работать?
Модульная сетка – важный элемент создания сайтов. Она выстраивает своеобразный «скелет» проекта, систематизирует его и определяет конкретное место каждому блоку и элементу. С ее помощью работа над дизайном становится проще, а конечный результат – понятнее для восприятия пользователем. Помимо этого, строгое следование правилам сетки позволяет упростить дальнейшие действия по верстке готового сайта.
Разрешение экрана
Прежде чем приступить к разбору элементов сетки, стоит обратить внимание на понятие «разрешение экрана». Разрешение – это число пикселей, определяющее ширину и высоту экрана. Например, монитор с разрешением 1080p имеет ширину в 1920px и высоту в 1080px.
Именно разрешение экрана определяет ширину холста и ширину рабочей области, в которой будет располагаться модульная сетка. Обычно для создания адаптивного дизайна используются холсты следующей ширины:
- 1920px – версия сайта для персональных компьютеров;
- 768px– версия сайта для планшетов;
- 320px – мобильная версия сайта.
Под эти и иные параметры ширины холста стоит подстраивать ширину рабочей области с модульной сеткой.
Из чего состоит модульная сетка
Модульная сетка включает в себя два элемента:
- Поля;
- Рабочая область, которая состоит из колонок и отступов.
Поля располагаются по обе стороны от модульной сетки и обозначают области, на которых должен отсутствовать любой контент сайта. Это «запретная зона» для дизайна. Благодаря полям сайт на холсте в 1920px могут посмотреть не только пользователи с аналогичной шириной экрана, но и со значительно меньшим разрешением.
Непосредственно в рабочей области располагается модульная сетка, где дизайнер и создает сайт. Оптимальной шириной рабочей области в десктопной версии является 1140px. Именно здесь и размещаются колонки и отступы. Ширина полей в этом случае составляет 390px.
Также для персональных компьютеров сайты могут проектироваться с рабочей областью в 1600px. Поля здесь уже меньше и, соответственно, сайт на этой сетке будет испытывать некоторые трудности с отображением на мониторах низкого разрешения. Однако и такая сетка имеет место быть, и с ее помощью можно также создавать интересные проекты.
У версий сайта для планшетов и смартфонов рабочие области практически идентичны ширине холста. Это определяется особенностями экранов данных гаджетов. Размеры полей у сеток для них – от 20 до 30px.
Элементы рабочей области — колонки и отступы
Колонка, или модуль – важная часть сетки. В ней размещается контент в виде блоков, кнопок, текста и изображений. У каждой колонки есть начало и конец – ее левая и правая направляющие соответственно.
Под отступом понимается вертикальный интервал между колонками. С помощью отступов создается воздушный, но в то же время логичный и структурированный дизайн.
В современном дизайне для десктопных проектов чаще всего используется сетка с 12 колонками. Она позволяет выстраивать множество комбинаций, создавая при этом блоки контента шириной в две, три и более колонок.
Мобильные версии сайта создаются с использованием сеток в 3, 4 и 6 колонок.
Как правильно разместить контент в колонках
Существует два важных правила, которым стоит следовать для формирования четких линий в дизайне и логичности проекта в итоге.
Правило №1: Блок или изображение должны выравниваться строго по началу и концу колонки
Например, ваш блок выполнен на три колонки. Соответственно, его начало должно находиться строго на первой (левой) направляющей колонки, а его конец – на конечной (правой) направляющей.
Ошибкой будет разместить блоки или изображения где-то посередине колонки, оставив без внимания ее направляющие. В дальнейшем это создаст сложности при верстке сайта.
Исключение: тексты. Если ваш текст по левому краю, то выравнивать его строго стоит только по первой направляющей колонки, чтобы текст в итоге выглядел аккуратно.
Что касается конечной направляющей, она дает лишь понимание того, какой ширины должно быть предложение. Строго выравнивать по ней текст не нужно. Тем более что это невозможно при абзаце по левому краю, а абзац по ширине в создании сайтов не используется.
Если ваш текст выровнен по центру, то и располагать его нужно по центру, без привязки к первой направляющей. В этом случае обе линии просто показывают ширину предложения.
Правило №2: блоки на сайте должны быть выровнены горизонтально
Например, у вас три блока. Их стоит расположить ровно по горизонтали, чтобы они смотрелись безукоризненно. Плюс, четкое горизонтальное выравнивание важно и при конечной верстке сайта.
Модульная сетка – отличный инструмент для создания сайтов. Она позволяет расположить элементы логично, аккуратно и проектировать стильные сайты, удобные для пользователей.