Макетные сетки

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

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

Многие популярные фреймворки используют систему сеток на 12 столбцов с равной шириной. Из небольших чисел именно 12 проще всего делить: можно использовать 12, 6, 4, 3, 2 или 1 равномерно распределённый столбец. Это также удобно для адаптивного дизайна.

Но не всегда нужно ориентироваться на базовую 12-ти колоночную сетку. Контент определяет сетку, а не наоборот. Количество столбцов должно соответствовать содержимому.

Примеры сеток

Примеры сеток

Читайте также:

Прототипирование

читать

Организация компонентов и вариантов

читать

Общие принципы

читать

Организация стилей, цветов и шрифтов

читать