строение сеток

А теперь разберём составляющие модульной сетки, поскольку это самая полная по количеству элементов сетка.

Первое — это margin / отступ. У любой сетки есть границы, которые мы можем выставить, а можем не выставлять, и тогда границей будет формат.

Column / колонка. Деление вертикалями. Колонок может быть сколько угодно. Часто используют 12-колонную сетку, поскольку она делится на 12, на 6, на 4, на 3, на 2. Вариативность.

Raw / Ряд. Деление горизонталями. Часто используется с фиксированными по высоте форматами (приложения, журналы, книги и т.п.)

Gutter / Средник. Иногда ещё называется межколонник. Расстояние между колонками или рядами. Практически воздух в сетке.

Module / Модуль. Одна ячейка сетки. Свойственно именно модульным сеткам.

Marker / Маргиналь. Правый нижний угол. Помните в манускриптных сетках монахи рисовали иллюстрации и оставляли комментарии на полях? 
Так вот это маргинали.

Микромодуль. Также ещё называется pixel grid. Микромодуль — это атом сетки. Самый маленький элемент, от которого можно высчитывать всё. Может быть квадратным, может быть подобен формату.

Манускриптные сетки

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

Это удобно, поскольку у нас есть на странице одна силовая линия, по которой стоит текст. Не ошибёшься.

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

Переносим сетку в веб. Мы наследуем принципы канона, так что текст не по центру, а чуть сбоку. В освободившемся пространстве ставим комментарии, ибо место есть. Или даже иллюстрации. При этом силовая линия сохраняется. Чётко понятно где основная информация, а где второстепенная.

Колонная сетка

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

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

Можем выстроить любую нужную нам прогрессию. Можем её придумать, можем её согласовать с какими-нибудь законами, с контентом.

Можем выстроить любую нужную нам прогрессию. Можем её придумать, можем её согласовать с какими-нибудь законами, с контентом.

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

Ширина средника (gutter) либо равна ширине колонки, либо меньше её. Во всех остальных случаях это уже не средник.

Такая композиция позволяет нам играть с масштабами, что в свою очередь помогает создавать и настроение, и контролировать процесс считывания страницы.

Немного углубимся. Возьмём числовой ряд Фибоначчи. Его любят использовать дизайнеры и не только. Суть его построения это прибавить число 
к предыдущему число. Например, 1+2 = 3, потом 2+3 = 5. И так далее.

Модульная сетка

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

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

Ломаные сетки

Невозможно рассказать, как точно строить ломанные сетки. Тут надо отталкиваться от ощущения формы, ритмики и всего того, что мы изучили. Небольшая вещь, которую стоит подметить. Берём обычную сетку. Ломаем её. Но ломаем не полностью, какие-то направляющие надо сохранить, какую-то симметрию оставить.

В общем, логику надо оставить, просто убавить её количество. Тогда это работает.

Примеры ломаных сеток — это работы, которые вы можете найти по запросам швейцарский панк, grunge design и anti-grid design. Известные дизайнеры, которые пользовались этим приёмом — Вольфганг Вайнгарт, Дэн Фридман, Эприл Грайман, Вилли Кунц, Дэвид Карсон.