Алгоритм верстки

Содержание
↓
Структура
↓
Конструкция
↓
Стиль

О каждом этапе по порядку:

Содержание

Прежде чем приниматься за верстку, прочитайте текст и определитесь с задачей. Чтобы не сбиться с пути и избежать неуместных решений, о содержании нужно помнить на всех последующих этапах.

Структура

Структура — это мост от содержания к форме. Один и тот же материал можно структурировать по-разному: часто дизайнер сам решает, на какие части разделить текст и как расставить акценты.

Конструкция

Конструкция — это визуальное представление структуры и скелет будущего макета. Я специально не употребляю слово «композиция», потому что его значение шире. Если структура невнятная, то и конструкция будет такой же. Одну и ту же структуру можно отобразить с помощью разных конструкций. Простой пример: список — набор однородных и равнозначных элементов — заверстывают в одну строку (все пункты друг за другом), располагают вертикально (каждый пункт с новой строки), по сетке (каждый пункт в отдельном модуле) или вообще беспорядочно разбрасывают по странице.

Стиль

Стиль — это настроение и «вкус» макета. Источник стиля следует искать как в содержании, так и далеко за его пределами: книга про Гутенберга необязательно должна быть похожа на 42-строчную Библию. Абсолютно любой элемент — от пропорций формата до межбуквенного расстояния — является стилеобразующим, однако в неравной степени. К одной и той же конструкции применимы разные стили.

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

Несколько примеров из рубрики «Переверстка».

1. Афиша лекции Людвига Быстроновского в Уфе

Структура исходного макета аморфная, связи между элементами неясны. Верхняя текстовая группа спорит за право первенства с группой цветных кружков:

Создаем структуру с нуля, делим текст на мелкие порции — кусочки, сходные по строению и объему:

На основе структуры собираем конструкцию:

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

2. Расписание екатеринбургского театра «Театрон»

Общая структура афиши ясна. Название театра, месяц, спектакли и контактная информация в подвале:

Конструкцию хочется улучшить, сейчас всё бледное и размазанное. Дополнительно выделяем заголовок цветом и контрпространством. Блок спектаклей собираем плотнее и ставим в нижнюю половину макета:

Теперь стиль: пусть будет классика. Оставляем антикву и спокойный, ненасыщенный красный, добавляем иллюстрацию «от руки»:

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

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

3. Меню пивного бара

Структура меню считывается хорошо: видна и иерархия, и отдельные группы. А вот с конструкцией проблемы. Иллюстрация не нашла своего места на макете и забилась в подвал; у мелкого текста слишком частный ритм и по горизонтали, и по вертикали; между формой и контрформой совсем нет напряжения:

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

Поддерживаем стиль иллюстрации и заголовков крафтовым фоном:

Стиль может подсказать конструкцию. Пусть это будут не ровные колонки, а разбросанные по всему макету куски текста и иллюстраций. Структура тоже изменилась, но не кардинально. Поменялся порядок (и сценарий) чтения, отношения между основными элементами остались прежними: