Сетка — #базис

Гайд для новичков в дизайне о сетках. Кратко рассказали о сетке, ее видах и о том, как ей пользоваться и почему это важно.

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

Сеток есть два вида, колончатые и модульные. Колончатые сетки проще и больше подходят для веб-дизайна. Модульные больше для печати.

Колончатые сетки
Сетка такого типа проще всего и используется повсеместно. На вебе и на мобайле работает одинаково, подходит для печатных носителей и удобна в использовании. Проще говоря идеал :)

12 колонок. Самый стандартный вид колончатой сетки, 12 делится на 2, 3 и 4. Очень удобна в использовании. Обычно используется на широких носителях, например в вебе. Этой сетки достаточно. Она вездесуща.

6 колонок. Второй по популярности вид колончатой сетки, используется на мобайле. Также просто делится и удобна.

X-колонок. Сетки с большим или меньшим количеством колонок — извращение, но тоже где-то используется. Обычно на каких-то «креативных» сайтах, именно в кавычках, это извращение.

Модульные сетки
Более сложный вид сеток, используется в печати и подобных носителях. Не часто применяется в вебе и я не часто с этим сталкивался. Колончатые сетки проще. Этот вид сеток не будет рассматриваться в этой статье. О нем лучше прочитать в книге Мюллера-Брокманна: Модульные системы в графическом дизайне

Чтобы сетка работала, для начала ее нужно грамотно создать. Расстояния между колонками, от краев справа и слева - все это должно гармонировать между собой и создавать читаемый и привлекательный визуал. Разберем по порядку каждое из расстояний и поговорим об ошибках.

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

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

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

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

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

Если расстояние между колонками слишком большое, контент перестает быть связанным и появляется слишком много воздуха, приходится делать вертикальные расстояния больше.

Если расстояние между колонками слишком мало контент слипается и создаются ненужные группы.

Это не плохо для информационных сайтов, но есть риск, что слипнется контент между колонками и запутает пользователя, как в примере ниже.

Выберите количество колонок
Для маленьких девайсов используйте меньше колонок, для больших — больше.

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

Композиция
Следите, чтобы общая композиция блока не «портилась» за счет неправильной сетки. Скажем строка контента, в которой сетка делится на 4 элемента, а затем строка, в которой делится на 3 элемента. Это неправильно. Более правильно было бы разделить вторую строку на 2 или 4 элемента.

Также можно, в случае особой нужды сменить ритм, сильно визуально отделить конфликтующие блоки.

Тоже самое относится к отцентрированному тексту. Так например сделано у Apple на сайте. Между разными по ритмике блоками делаются некие перебивки, это может быть как большое расстояние, так и какой-то элемент (например разделительная линия)

Если есть меню, следите, чтобы оно гармонировало с контентом композиционно. Например есть слева логотип занимает 3 колонки и все остальное меню 9, то желательно, чтобы контент справа или слева тоже был в 3 колонки.

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

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

Еще больше о дизайне в Телеграм канале: t.me/design_logovo