Теория

Сетка

1.

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

 

 

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

 

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

 

W

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

W

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

W

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

W

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

W

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

Практика

Сетка

5.

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

 

 

 

 

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

 

6.

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

 

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

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

7.

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

 

 

 

Считается, что сетки бывают двух видов — типометрические и метрические.
На самом деле, это деление во многом искусственно, а сами понятия «типометрический» и «метрический» — скорее, названия двух систем мер
(в первой принято измерять в пунктах, а во второй — в миллиметрах).

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

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

Design School

Design Almanac

ru  / eng

Типографика

Сетка

Цвет

Анимация

о проекте

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

команда

 

Куратор

Антон Герасименко

 

Дизайнер

Ждан Филиппов

 

Продюсер

Диана Касай

 

Редактор (Типографика)

Антон Терехов

 

Редактор (Сетка)

Дима Девишвили

 

Редактор (Цвет, Анимация)

Цветелина Митева

 

Переводчик

Говард Голдфингер

 

Советники

Type Journal