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

Базовые элементы по функции:

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

Задачи вёрстки сводятся к размещению этих элементов на странице. Блок рекомендации на главном экране «Системы Главбух» содержит сразу все:
Важно научиться видеть и различать эти элементы в вёрстке. Поэтому под иллюстрацией блока показана его схема: базовые элементы аккуратно отделены друг от друга и имеют свои места.

Совет смешать комки
И это первое знание о базовых элементах: они не должны быть хаотично перемешаны на странице. В бюро называют это вёрсткой «с комками» — как в неудачной манной каше:
Заголовок

Заголовок — базовый элемент вёрстки.

Мы неслучайно рассматриваем заголовки сразу в трёх дисциплинах Школы бюро: в «Типографике и вёрстке», «Интерфейсе и информации» и, конечно, «Тексте и редактуре». Заголовок задаёт конструкцию страницы, помогает воспринять смысл и решает информационные задачи автора.

Заголовок — не просто формальное резюме текста, иначе от него стоило бы избавиться как от лишнего повтора.

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

Заголовок мгновенно ориентирует в смысле — как навигационная табличка на двери. Это первый ключ к пониманию: «где я, куда я попал?». Эффективность инструкции, сложной схемы или интерфейсного экрана может зависеть от ясности и информативности заголовка.

Заголовок служит якорным объектом, организует страницу и её отдельные части. Он обозначает и даёт форму блокам текста, направляет чтение. Размеры заголовков показывают сравнительную важность или логическую вложенность текстов.

Простейший заголовок — это крупная однородная надпись строчными буквами с прописной в начале и без точки в конце:
Текст

Текст — базовый элемент вёрстки.

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

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

Точка, линия и прямоугольник

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

В «резиновой» вёрстке дизайнер задаёт не только форму контейнера для текста, но и правила, по которым она меняется в зависимости от размеров окна и экрана.

Кегль экранного текста обычно лежит в диапазоне 12…16 пунктов, а интерлиньяж — 1,2…1,4 от значения кегля.
Интерлиньяж — это функция кегля, длины строки и формата. Чем длиннее строка по количеству слов, тем больше должен быть интерлиньяж. И наоборот, слишком узкая колонка из коротких строк уродливо смотрится даже со стандартным интерлиньяжем. В таком случае интерлиньяж допускается немного уменьшить.

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

Текст, выровненный влево с рваным правым краем, должен «дышать» справа, то есть край формата или соседняя колонка не должны подходить к нему слишком близко.

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

Вёрстка трёх анонсов

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

Иллюстрация — базовый элемент вёрстки.

Дети любят книжки с картинками. Смотреть на страницы без картинок скучно. Такая книжка оставит ребёнка равнодушным или вызовет у него недоумение.

Наивно думать, что со взрослыми дело обстоит иначе. Взрослые листают журналы, ищут иллюстрации в книжках, смотрят на банеры. Разглядывают фотографии, пересылают друг другу «котяток» и «демотиваторы». Картинки любят все.

Иллюстрация привлекает внимание быстрее заголовка: ребёнок учится видеть мир раньше, чем читать. Как и заголовок, иллюстрация цепляет читателя, вызывает интерес к чтению, помогает выбрать между текстами или объявлениями. Только всё это — быстрее и эффективнее.

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

Хорошая иллюстрация делает всё сразу:
Картинка помогает найти покупателя автомобиля, сдать квартиру, продать путёвку, познакомиться с девушкой. Визуализация доносит идею, объясняет принцип работы устройства, освещает сложную тему, восстанавливает события, передаёт масштаб.

Иллюстрация должна быть идентифицируема, уместна и нести информацию. Дизайнеры‑любители часто откладывают выбор иллюстрации, оставляя на макете серое «место для бомбы», а потом заполняют его бессмысленными и не опознаваемыми пейзажами, зданиями, людьми и узорами:
Иллюстрация — самый заметный якорный объект. Конструкция страницы часто подчиняется ключевой иллюстрации: её пропорциям, размеру и положению.

На восприятие иллюстрации влияют её пропорции. Благодаря двум глазам поле зрения человека вытянуто вширь. Поэтому горизонтальная иллюстрация выглядит естественно: