Алгоритм верстки
Превращая текст в макет, придерживайтесь такой последовательности:
Содержание → Структура → Конструкция → Стиль
О каждом этапе по порядку:
Содержание
Прежде чем приниматься за верстку, прочитайте текст и определитесь с задачей. Чтобы не сбиться с пути и избежать неуместных решений, о содержании нужно помнить на всех последующих этапах.
Структура
Структура - это мост от содержания к форме. Один и тот же материал можно структурировать по-разному: часто дизайнер сам решает, на какие части разделить текст и как расставить акценты.
Конструкция
Конструкция - это визуальное представление структуры и скелет будущего макета. (Я специально не употребляю слово «композиция», потому что его значение шире.) Если структура невнятная, то и конструкция будет такой же. Одну и ту же структуру можно отобразить с помощью разных конструкций. Простой пример: список (набор однородных и равнозначных элементов) заверстывают:
- в одну строку (все пункты друг за другом);
- вертикально (каждый пункт с новой строки);
- по сетке (каждый пункт в отдельном модуле);
- беспорядочно разбрасывают по странице.
Стиль
Стиль - это настроение и «вкус» макета. Источник стиля следует искать как в содержании, так и далеко за его пределами: книга про Гутенберга необязательно должна быть похожа на 42-строчную Библию. Абсолютно любой элемент - от пропорций формата до межбуквенного расстояния - является стилеобразующим, однако в неравной степени. К одной и той же конструкции применимы разные стили.
Перепрыгивать через этапы опасно, как и менять их местами. Если начать со стиля, есть вероятность погрязнуть в оформительстве. Если пропустить структуру и перейти от содержания сразу к конструкции, то последняя, скорее всего, окажется неподходящей для материала. И так далее.
Несколько примеров из рубрики « Переверстка».
1. Афиша лекции Людвига Быстроновского в Уфе
Структура исходного макета аморфная, связи между элементами неясны. Верхняя текстовая группа спорит за право первенства с группой цветных кружков:
Создаем структуру с нуля, делим текст на мелкие порции - кусочки, сходные по строению и объему:
На основе структуры собираем конструкцию:
Иллюстрация и линейки - основные стилеобразующие элементы, как и шрифт, который был с самого начала. При этом и сама конструкция является носителем стиля: выравнивание по сетке, левый флаг, контраст запечатанной и незапечатанной областей задают определенный тон:
2. Расписание екатеринбургского театра «Театрон»
Общая структура афиши ясна. Название театра, месяц, спектакли и контактная информация в подвале:
Конструкцию хочется улучшить, сейчас всё бледное и размазанное. Дополнительно выделяем заголовок цветом и контрпространством. Блок спектаклей собираем плотнее и ставим в нижнюю половину макета:
Теперь стиль: пусть будет классика. Оставляем антикву и спокойный, ненасыщенный красный, добавляем иллюстрацию «от руки»:
Или что-нибудь посовременней. Огромный заголовок акцидентным шрифтом плюс яркие цвета. Меняя стиль, мы затронули и конструкцию: на предыдущем макете все элементы крутились вокруг центральной оси, а здесь заполняют формат по ширине. Стикер стоит асимметрично, нижняя строчка выровнена по левому краю:
На самом деле мы не знаем, какой стиль будет уместней, потому что пропустили этап анализа содержания и не выяснили задачу и контекст.
3. Меню пивного бара
Структура меню считывается хорошо: видна и иерархия, и отдельные группы. А вот с конструкцией проблемы. Иллюстрация не нашла своего места на макете и забилась в подвал; у мелкого текста слишком частный ритм и по горизонтали, и по вертикали; между формой и контрформой совсем нет напряжения:
Объединяем заголовок и иллюстрацию в один горизонтальный модуль, в этом же модуле собираем весь воздух макета. Теперь верхняя и нижняя часть контрастны. Упрощаем и приводим в порядок текст в колонках:
Поддерживаем стиль иллюстрации и заголовков крафтовым фоном:
Стиль может подсказать конструкцию. Пусть это будут не ровные колонки, а разбросанные по всему макету куски текста и иллюстраций. Структура тоже изменилась, но не кардинально. Поменялся порядок (и сценарий) чтения, отношения между основными элементами остались прежними:
Содержание → Структура → Конструкция → Стиль
О каждом этапе по порядку:
Содержание
Прежде чем приниматься за верстку, прочитайте текст и определитесь с задачей. Чтобы не сбиться с пути и избежать неуместных решений, о содержании нужно помнить на всех последующих этапах.
Структура
Структура - это мост от содержания к форме. Один и тот же материал можно структурировать по-разному: часто дизайнер сам решает, на какие части разделить текст и как расставить акценты.
Конструкция
Конструкция - это визуальное представление структуры и скелет будущего макета. (Я специально не употребляю слово «композиция», потому что его значение шире.) Если структура невнятная, то и конструкция будет такой же. Одну и ту же структуру можно отобразить с помощью разных конструкций. Простой пример: список (набор однородных и равнозначных элементов) заверстывают:
- в одну строку (все пункты друг за другом);
- вертикально (каждый пункт с новой строки);
- по сетке (каждый пункт в отдельном модуле);
- беспорядочно разбрасывают по странице.
Стиль
Стиль - это настроение и «вкус» макета. Источник стиля следует искать как в содержании, так и далеко за его пределами: книга про Гутенберга необязательно должна быть похожа на 42-строчную Библию. Абсолютно любой элемент - от пропорций формата до межбуквенного расстояния - является стилеобразующим, однако в неравной степени. К одной и той же конструкции применимы разные стили.
Перепрыгивать через этапы опасно, как и менять их местами. Если начать со стиля, есть вероятность погрязнуть в оформительстве. Если пропустить структуру и перейти от содержания сразу к конструкции, то последняя, скорее всего, окажется неподходящей для материала. И так далее.
Несколько примеров из рубрики « Переверстка».
1. Афиша лекции Людвига Быстроновского в Уфе
Структура исходного макета аморфная, связи между элементами неясны. Верхняя текстовая группа спорит за право первенства с группой цветных кружков:
Создаем структуру с нуля, делим текст на мелкие порции - кусочки, сходные по строению и объему:
На основе структуры собираем конструкцию:
Иллюстрация и линейки - основные стилеобразующие элементы, как и шрифт, который был с самого начала. При этом и сама конструкция является носителем стиля: выравнивание по сетке, левый флаг, контраст запечатанной и незапечатанной областей задают определенный тон:
2. Расписание екатеринбургского театра «Театрон»
Общая структура афиши ясна. Название театра, месяц, спектакли и контактная информация в подвале:
Конструкцию хочется улучшить, сейчас всё бледное и размазанное. Дополнительно выделяем заголовок цветом и контрпространством. Блок спектаклей собираем плотнее и ставим в нижнюю половину макета:
Теперь стиль: пусть будет классика. Оставляем антикву и спокойный, ненасыщенный красный, добавляем иллюстрацию «от руки»:
Или что-нибудь посовременней. Огромный заголовок акцидентным шрифтом плюс яркие цвета. Меняя стиль, мы затронули и конструкцию: на предыдущем макете все элементы крутились вокруг центральной оси, а здесь заполняют формат по ширине. Стикер стоит асимметрично, нижняя строчка выровнена по левому краю:
На самом деле мы не знаем, какой стиль будет уместней, потому что пропустили этап анализа содержания и не выяснили задачу и контекст.
3. Меню пивного бара
Структура меню считывается хорошо: видна и иерархия, и отдельные группы. А вот с конструкцией проблемы. Иллюстрация не нашла своего места на макете и забилась в подвал; у мелкого текста слишком частный ритм и по горизонтали, и по вертикали; между формой и контрформой совсем нет напряжения:
Объединяем заголовок и иллюстрацию в один горизонтальный модуль, в этом же модуле собираем весь воздух макета. Теперь верхняя и нижняя часть контрастны. Упрощаем и приводим в порядок текст в колонках:
Поддерживаем стиль иллюстрации и заголовков крафтовым фоном:
Стиль может подсказать конструкцию. Пусть это будут не ровные колонки, а разбросанные по всему макету куски текста и иллюстраций. Структура тоже изменилась, но не кардинально. Поменялся порядок (и сценарий) чтения, отношения между основными элементами остались прежними: