Сетка

сетка

Дизайн-альманах Readymag — образовательный проект об основах дизайна. Эта глава рассматривает визуальную структуру нескольких онлайн-магазинов, сайтов медиа, книг и журналов. Вы узнаете, как обращать хаос в космос при помощи такого инструмента, как сетка.

1

Вступление

2

Теория

 

 

3

Практика

 

 

 

Невидимые линии

Порядок

Структура

Модуль

 

 

 

 

 

 

 

 

 

 

Структура

Соразмерности

Модульные шкалы

 

 

 

 

 

 

 

Сетка

Теория

вступление

Золотое сечение

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


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


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

 

 

Теория

Сетка

1.

невидимые линии

 

 

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

 

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

 

W

Пример верстки онлайн-магазина formerlyyes.com. Кухонные принадлежности и аксессуары

W

Пример верстки сайта премии swissdesignawards.ch. Перечень победителей премии и их работ

W

Пример верстки сайта smfb.com. Портфолио рекламного агентства

W

Пример верстки магазина sightunseen.com. Товары для дома

W

Пример верстки сайта style.com. Лента новостей

Практика

Сетка

5.

структура обеспечивает цельность

 

 

 

 

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