«Типографика и вёрстка» А. Горбунов
Наверное таким и должен быть идеальный учебник.
Сочетание полезной информации, сопровождающей графики и изложение материала в инфостиле. Если бы у меня в школе был айпад и учебники, подобные этому, то я бы с легкостью закончил школу с красным дипломом, потом также институт и сейчас бы не занимался дизайном, а изобрёл бы Теслу.
Если вы изучали иностранный язык, то знаете, что выучить все слова из словаря не достаточно. Чтобы строить предложения из этих слов, нужно знать грамматику: члены предложения, их порядок, времена и формы их образования и т. д.
В дизайне тоже самое — чтобы что-то правильно спроектировать, нужно знать грамматику (или как это называет Илья Бирман — синтаксис). В вебе это
модульная вёрстка, типографика и цветовая палитра. О первых двух и говорится в книге.
Модульность
Базовой фигурой модульной верстки является прямоугольник. По сути экран или страница — это большой прямоугольник, состоящий из маленьких прямоугольников различной формы.
Соотношения между этими прямоугольниками составляется либо «золотым сечением» (прямоугольник отсекается квадратом из другого прямоугольника «золотого сечения» ~1:1,618) или по основе линейки бумаги форматов ДИН (листы формата А4, А5 и т. д.).
Самые заметные прямоугольники (объекты) на странице, называются якорными и выделяются они за счёт пустого (негативного/контрпространства) пространства вокруг себя. Т. е. если объект привязан к правому верхнему углу, то больше пространства у объекта должно быть слева и снизу. Если объект привязан к центру макета, то контрапространство распределяется равномерно.
Идеальное расположение объектов:
1.Картинка;
2.Заголовок;
3.Текст;
4.Ссылки.
Ссылки можно совместить с заголовком, либо поместить заголовок на картинку и сделать её кликабельной.
Изображение должно быть сверху или сбоку от текста. И желательно, чтобы одна из его сторон была равна по высоте или по ширине тексту.
Теория близости
Объекты, которые стоят друг к другу ближе, чем остальные, воспринимаются пользователем, как единый модуль. Об этом можно почитать:
- у Лебедева в «Теория близости»
- более раскрыта тема у Горбунова в «Общей теории близости»
- и посмотреть у Штанга в «Теория графического напряжения»
Пример решения проблем с вёрсткой
Цитаты из книги
«Текст — несжимаемая жидкость, принимающая форму сосуда. Верстальщик определяет форму, пропорции и объём контейнера, впускает в него воздух, разделяет на сообщающиеся сосуды. Один и тот же текст заполняет стакан или расползается лужей по плоскости страницы».
«Кегль экранного текста обычно лежит в диапазоне 12…16 пунктов, а интерлиньяж — 1,2…1,4 от значения кегля».
«Интерлиньяж — это функция кегля, длины строки и формата. Чем длиннее строка по количеству слов, тем больше должен быть интерлиньяж. И наоборот, слишком узкая колонка из коротких строк уродливо смотрится даже со стандартным интерлиньяжем. В таком случае интерлиньяж допускается немного уменьшить».
«Поля вокруг текста должны быть больше межстрочных просветов»
«Иллюстрация — самый заметный якорный объект. Горизонтальная иллюстрация выглядит естественно. Вертикальная иллюстрация выглядит динамичнее. Если картинка имеет чётко выраженное направление, лучше, чтобы она «смотрела» на текст»
«В модульной вёрстке связанные элементы согласованы по ширине и высоте, и благодаря этому визуально объединяются в прямоугольный модуль».
Надеюсь эта заметка была вам полезной. Спасибо, за ваше внимание!
Вацхлав Пшенович, начинающий веб-дизайнер и разработчик.
