Переверстка макета афиши

15 ноября 2016 · Таня Соколовская

Дизайн

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

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

Пример из сети

Скорее всего, так:

Так движется взгляд читателя

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

Разберем подробнее. Мы видим типичный пример сборки методом «сэндвич»:

Модульные этажи

Получилось целых девять модулей друг на друге. А между третьим и четвертым есть еще и псевдомодуль, который образовал ламбрекен (элемент занавеса на всю ширину). Информация внутри модулей расположена случайно, но выдержана вокруг центральной оси, которая на первых двух этажах почему-то съехала:

Информация внутри модулей

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

Начнем с самой важной информации — ответим на вопрос «Что?». В нашем случае это заголовок:

Любой макет нужно начинать с главного

Обратите внимание на шрифт заголовка — он должен быть ясным и понятным с первого взгляда. Не используйте шрифты, в которых одна буква напоминает другую: на оригинале буква Л очень похожа на П, напевы получились «Петние». Обходите подобные шрифты стороной, либо исправляйте самостоятельно «кривые» буквы.

Иногда подобрать шрифт помогает иллюстрация. Оригинал нашей картинки называется A Chorus Line, нарисовали его в студии Braldt Bralds. Смею предположить, что это пародия на кинофильм A Chorus Line 85 года. Вот его афиша:

A Chorus Line, 1985

A Chorus Line, 1985

Шрифт на ней называется Pinto Inline. К сожалению, его нет в цифровом виде, поэтому можно было бы поискать похожий, но я продолжу работу с уже выбранным шрифтом.

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

Главные персонажи выставки — кошки, поэтому можно смело увеличить их на картинке, обрезав лишнее.

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

Сейчас описание не побуждает к действию и частично дублирует заголовок:

Знакомство с породистыми кошками. Возможность приобрести домашнего любимца и сопутствующие товары.

Вынесем «Знакомство с породистыми кошками» в заголовок. Получаем — «Летние напевы. Выставка породистых кошек».

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

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

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

Так как макет достаточно простой, я выбрала трехколоночную сетку. Распределим объекты внутри своих модулей относительно сетки:

Теперь, когда все объекты на своих местах, можно заняться оформлением.

Для начала подружим модуль с иллюстрацией и текстовый модуль: окрасим в цвет неба и центральной кошечки дату и время. Логотипы — последняя по важности информация, поэтому обесцветим их, а номера телефонов сделаем крупнее. Усилим действие с тексте «Приходите...» Получаем:

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

Я не знаю, на сколько важен номер телефона Светланы, поэтому убрала его. Двух контактных номеров достаточно.

Слегка «развеселим» макет — добавим усы, лапу и нитку. Откорректируем цвета иллюстрации и затемним облако под буквой «п», а то они сливаются:

Я остановлюсь на этом этапе. Можно было бы продолжить работу над шрифтами или вместо графических элементов выделить текстовые блоки фоном, но это уже оформительная работа, а пост не об этом.

Сравним результат и оригинал:


Было

Стало

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

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


Если вы видите в дизайне проблему, но никак не поймете в чем она, присылайте макет нам на почту design@miraispace.com, и мы поможем его улучшить.

Читайте также

Типографика и верстка книг. Часть  1

Типографика и верстка книг. Часть 1

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

11 ноября 2015
Дизайнерам. Объекты внутри модуля

Дизайнерам. Объекты внутри модуля

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

19 октября 2016
Процесс работы над сайтом Epson для партнеров

Процесс работы над сайтом Epson для партнеров

Процесс работы над сайтом Эпсон для партнеров начался с разговора с менеджером, в котором мы узнали много нового.

11 октября 2016