?

Log in

No account? Create an account

nobelfaik


Блог Игоря Штанга

light gray is the new white, dark gray is the new black


Previous Entry Поделиться Next Entry
Алгоритм верстки
nobelfaik
Превращая текст в макет, придерживайтесь такой последовательности:


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


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

Содержание

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

Структура

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

Конструкция

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

Стиль

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

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

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

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

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




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




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




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



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

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




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




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




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




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

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

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




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




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




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


Записи из этого журнала по тегу «статья»

  • Швейцарские плакаты по-русски

    Недавно я опубликовал заметку под названием « Кириллица и латиница». Главная мысль такая: Несовершенство кириллического алфавита не…

  • Бутерброды текста

    Продолжаю рассказывать о неудачных приемах верстки. В прошлых выпусках: горки текста, ноги текста и колонки разной ширины. Сегодня про бутерброды.…

  • Как я делал афишу «Большой переверстки»

    «Большая переверстка» — это мастер-класс, который я придумал два года назад и провел в нескольких городах. Афиша делалась долго, но…



  • 1
  • 1