«Типографика и вёрстка» А. Горбунов

Обзор "Типографика и верстка"

«Типографика и вёрстка» А. Горбунов

★★★★★
Наверное таким и должен быть идеальный учебник.
Сочетание полезной информации, сопровождающей графики и изложение материала в инфостиле. Если бы у меня в школе был айпад и учебники, подобные этому, то я бы с легкостью закончил школу с красным дипломом, потом также институт и сейчас бы не занимался дизайном, а изобрёл бы Теслу.

Если вы изучали иностранный язык, то знаете, что выучить все слова из словаря не достаточно. Чтобы строить предложения из этих слов, нужно знать грамматику: члены предложения, их порядок, времена и формы их образования и т. д.
В дизайне тоже самое — чтобы что-то правильно спроектировать, нужно знать грамматику (или как это называет Илья Бирман — синтаксис). В вебе это
модульная вёрстка, типографика и цветовая палитра. О первых двух и говорится в книге.

Модульность

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

соотношение между модулями

Соотношения между этими прямоугольниками составляется либо «золотым сечением» (прямоугольник отсекается квадратом из другого прямоугольника «золотого сечения» ~1:1,618) или по основе линейки бумаги форматов ДИН (листы формата А4, А5 и т. д.).

Самые заметные прямоугольники (объекты) на странице, называются якорными и выделяются они засчёт пустого (негативного/контрпространства) пространства вокруг себя. Т. е. если объект привязан к правому верхнему углу, то больше пространства у объекта должно быть слева и снизу. Если объект привязан к центру макета, то контрапространство распределяется равномерно.

Модульная верстка с иллюстрацией

Идеальное расположение объектов:
1.Картинка;
2.Заголовок;
3.Текст;
4.Ссылки.

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

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

Теория близости

Объекты, которые стоят друг к другу ближе, чем остальные, воспринимаются пользователем, как единый модуль. Об этом можно почитать:

  1. у Лебедева в «Теория близости»
  2. более раскрыта тема у Горбунова в «Общей теории близости»
  3. и посмотреть у Штанга в «Теория графического напряжения»

Пример решения проблем с вёрсткой

Верстка плаката

Цитаты из книги

«Текст — несжи­ма­е­мая жид­кость, при­ни­ма­ю­щая фор­му сосу­да. Версталь­щик опре­де­ля­ет фор­му, про­пор­ции и объ­ём кон­тей­не­ра, впус­ка­ет в него воз­дух, раз­де­ля­ет на сооб­ща­ю­щи­е­ся сосу­ды. Один и тот же текст запол­ня­ет ста­кан или рас­пол­за­ет­ся лужей по плос­ко­сти страницы».

«Кегль экран­но­го тек­ста обыч­но лежит в диа­па­зоне 12…16 пунк­тов, а интер­ли­ньяж — 1,2…1,4 от зна­че­ния кегля».

«Интер­ли­ньяж — это функ­ция кег­ля, дли­ны стро­ки и фор­ма­та. Чем длин­нее стро­ка по коли­че­ству слов, тем боль­ше дол­жен быть интер­ли­ньяж. И наобо­рот, слиш­ком узкая колон­ка из корот­ких строк урод­ли­во смот­рит­ся даже со стан­дарт­ным интер­ли­нья­жем. В таком слу­чае интер­ли­ньяж допус­ка­ет­ся немно­го уменьшить».

«Поля вокруг тек­ста долж­ны быть боль­ше меж­строч­ных про­све­тов»

Иллюстра­ция — самый замет­ный якор­ный объ­ект. Гори­зон­таль­ная иллю­стра­ция выгля­дит естественно. Вер­ти­каль­ная иллю­стра­ция выгля­дит дина­мич­нее. Если кар­тин­ка име­ет чёт­ко выра­жен­ное направ­ле­ние, луч­ше, чтобы она «смот­ре­ла» на текст.

«В модуль­ной вёрст­ке свя­зан­ные эле­мен­ты согла­со­ва­ны по ширине и высо­те, и бла­го­да­ря это­му визу­аль­но объ­еди­ня­ют­ся в пря­мо­уголь­ный модуль».

Поделиться
Отправить
Запинить
Популярное