Алгоритм вёрстки. Работа с типографикой

Я дизайнер и часто сталкиваюсь с одной и той же задачей — сделать дизайн-продукт: от печатной продукции до веб-интерфейса. Раньше в поисках хороших решений я топтался на месте, потому что не умел работать с типографикой. Приходилось много читать, проходить образовательные курсы и много работать.

Вот то, что я делал на втором курсе института:

Афиши «Алло, мы ищем таланты» и «Мисс университет 2011»

Диплом конкурса и объявление об отборе на «Студвесну», 2011 год

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

Главная беда этих работ не в картинках и не в ужасных цветах, а в неумении работать с текстовой информацией.

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

Пробелы в своих знаниях я заполнил на курсе дизайнера Игоря Штанга. Он работал в издательской группе «Парамон» и Дизайн-бюро Артёма Горбунова и делится практической информацией по работе с типографикой.

У него есть свой универсальный метод, который помогает дизайнеру разложить все свои действия по полочкам и структурировать работу с текстовой вёрсткой. Он подойдёт дизайнерам, которые работают с печатной продукцией, веб-баннерами, лендингами, емейлами и т. д.

Суть подхода Игоря Штанга

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

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

Я специально не стал брать веб-страницу или баннер, чтобы показать универсальность подхода.

Содержание

Содержание — это текст, с которым вам предстоит работать. Чаще всего он представлен в необработанном виде: не имеет структуры и акцентов. Необходимо изучить текст и определиться с задачей.

Рецепт блинов на молоке из интернета

Задача — оформить рецепт так, чтобы читателю было приятно и легко готовить по нему блюдо.

Структура

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

На этом этапе главная задача — оформить рецепт максимально доступно для повара. Я убрал текст, который не касается приготовления блинов. Он не должен перетягивать внимание с самого важного. Затем разбил информацию на блоки: название блюда, калорийность, ингредиенты, шаги приготовления.

Конструкция

На этом этапе выстраиваем смысловые блоки текста во всевозможные конструкции и в итоге получаем скелет будущего макета.

Существует несколько видов конструкций, состоящих из отдельных модулей:

  • В одну строку (модули идут друг за другом).

    Такой вид конструкции используют для представления информации, выражающей определённую последовательность.

  • Вертикально (каждый модуль с новой строки).

    Вертикально логичнее всего завёрстывать списки.

  • Беспорядочное распределение модулей

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

  • По сетке

    В этой конструкции смысловые блоки текста располагаются по сетке.

Чтобы определиться с выбором конструкции, её нужно «примерить» на текст. Мы посмотрим, как выглядит рецепт блинов в каждой из четырёх конструкций:

В одну строку

Вертикальная конструкция

«Беспорядочная» конструкция

Конструкция по сетке

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

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

У меня готов каркас будущего макета, теперь можно переходить к завершающему этапу и определяться со стилем оформления текста.

Стиль

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

Чтобы найти хорошее решение или вдохновиться, зайдите на Пинтерест. Там можно найти много хороших примеров различных стилей вёрстки: швейцарского, модернизма, минимализма и т. д.

Плакат в швейцарском стиле

Плакат в стиле модернизма

Плакат в минимализме

В своей работе я использовал стиль, близкий к швейцарскому, добавил крупную фотографию блинов — и вот что получилось:

Финальный плакат с рецептом. Приятного аппетита!

Подход Игоря Штанга облегчает поиск решений для оформления текста. Главное, не перепрыгивайте шаги алгоритма и не меняйте их местами. Вы нарушите логику работы над макетом и убьёте кучу времени на стыковку одного шага с другим.

Увеличим продажи
С помощью правильных писем
Поделиться статьёй
Подписаться на рассылку