nobelfaik


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

Доктор, мой макет не дышит!


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


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


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

Содержание

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

Структура

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

Конструкция

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

Стиль

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

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

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

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

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




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




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




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



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

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




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




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




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




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

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

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




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




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




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


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

  • Когда можно опускать знаки препинания

    В последние годы наметилась тенденция к упрощению пунктуации. Знаки препинания опускают всё чаще, но иногда не там, где нужно. Давайте разберемся,…

  • Ноги текста

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

  • Что я думаю об этой вашей висячей пунктуации

    На каждом курсе меня обязательно спрашивают, что я думаю о висячей пунктуации. Кто не знает, речь идет об одноименном параграфе в…


  • 1
  • 1
?

Log in

No account? Create an account