Skip to content

Все о модульных сетках

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

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

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

Использование модульной сетки не означает, что ваш дизайн станет скучным или квадратным. Вы несете ответственность за создание уникального дизайна, и модульную сетку, равно как и адпативный дизайн, следует рассматривать как нечто, что позволит вам сделать это, а не ограничит вас.

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

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

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

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

Пример модульной сетки
Пример модульной сетки

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

Плюсы использования модульной сетки

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

Использование модульной сетки в дизайне также добавляет чувство единообразия и дружелюбия. А также макет спроектированный с использованием модульной сеткой будет намного легче верстать на HTML и CSS.

Модульная сетка с направляющими в Photoshop
Модульная сетка с направляющими в Photoshop

Минусы модульной сетки

Ради баланса, давайте посмотрим на некоторые минусы…

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

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

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

Вот вам еще немного простых, практических советов по работе с модульной сеткой:

  • Наложите модульную сетку на ваш дизайн. Если вы находитесь в Photoshop или другом графическом редакторе, установите верхний слой, который отображает вашу сетку и зафиксируйте ее на месте. И вы всегда сможете ее включить и выключить. Еще лучше в добавок создать несколько направляющих, которые разделят ваши колонки. А вообще я считаю, что лучше каждый важный блок в вашем дизайне отделять направляющими. Поверьте, вам же будет удобнее.
  • Попробуйте работать в ограниченном пространстве. Не в том смысле, что вам надо в шкаф лезть и работать там (хотя кто знает, вдруг именно такм к вам придет вдохновение 🙂 ).  Вам надо научиться проектировать в пределах вашей сетки. Так вы сможете сосредоточить ваш дизайн на том, что наиболее важно и актуально для пользователей.

Заключение

Думаю, вы уже имеете достаточно хорошее представление о модульной сетке. В следующей статье мы поговорим о том, как подойти к выбору модульной сетки: создать свою собственную или работать с готовыми фреймворками.

Источник: WebDesign Tuts+

Данная запись является частью серии "Школа дизайна для разработчиков".

Улучшаем планировку с вертикальным ритмом

Выбор модульной сетки