Игорь Штанг (nobelfaik) wrote,
Игорь Штанг
nobelfaik

Category:

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

Превращая текст в макет, придерживайтесь такой последовательности:


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


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

Содержание

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

Структура

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

Конструкция

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

Стиль

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

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

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

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

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




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




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




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



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

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




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




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




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




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

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

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




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




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




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

Tags: верстка, знаю как, конструкция, статья
Subscribe

Posts from This Journal “статья” Tag

  • Наглядность в таблицах

    Наглядность — это такое свойство верстки, которое помогает пользователю вникнуть в суть, не читая текст или читая по минимуму. Взглянул —…

  • Локализовать текст

    Есть такой хороший прием — локализовать текст. Это значит, что вы не пытаетесь занять текстом весь формат, не размазываете материал, а…

  • Дыра или воздух

    В эфире рубрика ???. Павел Ореховский спрашивает: Не дает покоя переверстка с рецептом. Я понял про этажность и модульную схему. Но клиенту будет…

  • Post a new comment

    Error

    default userpic

    Your IP address will be recorded 

    When you submit the form an invisible reCAPTCHA check will be performed.
    You must follow the Privacy Policy and Google Terms of use.
  • 2 comments