Не просто красиво: дизайн по Робин Уильямс

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

Робин Уильямс в книге «Дизайн. Книга для недизайнеров» предлагает перейти от впечатлений к конкретным решениям: разобраться, как расположение, размер и оформление элементов помогают передавать информацию. Вместе с командой click.ru разберем основные идеи книги, рассмотрим примеры переделки макетов и перенесем эти приемы в работу маркетолога. В конце — чек-лист для проверки дизайна.

Основные идеи книги: принципы понятного дизайна

Уильямс не обещает превратить читателя в профессионала за несколько вечеров:

«Эта книга не заменит четыре года учебы в школе дизайна».

Ее задача практичнее: научить замечать, почему макет выглядит неубедительно, и находить способы его исправить. Вместо расплывчатого «что-то не нравится» появляются понятные основания для правок.

Приближенность: связанное должно находиться рядом

Информация воспринимается как единая группа, когда ее элементы расположены близко друг к другу. Разные по смыслу группы, напротив, стоит разделять пространством. Так расстояния начинают объяснять структуру материала еще до внимательного чтения.

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

«Создавая свой Дизайн (или устраивая Жизнь), не бойтесь свободного пространства, ибо на нём отдыхает глаз (и Душа)».

Выравнивание: у каждого элемента должно быть основание

Уильямс формулирует правило:

«Ничто не должно располагаться на странице произвольно».

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

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

Повторение: оформление должно быть последовательным

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

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

Контраст: различия должны быть заметными

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

«Если элементы не похожи как две капли воды, сделайте их разными. По-настоящему разными».

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

Шрифты и цвет — продолжение той же логики

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

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

Примеры из книги: что меняется после правок

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

Визитка: повтор помогает связать начало и конец

На визитке Sock and Buskin название выделено жирным шрифтом, а контактные данные набраны спокойнее. В следующем варианте автор делает жирным и номер телефона. Между верхней и нижней частями появляется перекличка: два акцента объединяют композицию. 

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

Реклама пирогов: сначала определить главное

В исходной рекламе Hugs Pie Shop много текста, рамок и выравнивания по центру. Название магазина, ассортимент, контакты и изображение пирога конкурируют за внимание. При переделке Уильямс усиливает название и фотографию, собирает сведения в группы и использует пространство для их разделения. 

Здесь особенно хорошо видно, что улучшение не обязательно начинается с сокращения содержания. Сначала стоит разобраться с приоритетами. Для аналогичного рекламного макета полезно задать вопрос: что человек должен увидеть раньше — продукт, предложение или название компании?

Бюллетень: единство не означает одинаковость

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

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

Как применять идеи книги в работе маркетолога

Перенесем приемы Уильямс с печатных макетов на повседневные задачи: объявления, рассылки, посадочные страницы и общение с дизайнером.

Начинайте с сообщения, а не с украшений

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

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

Готовьте комплект материалов, а не отдельные картинки

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

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

Переводите впечатления в конкретные замечания

Вместо «слишком пусто» спросите, помогает ли свободное пространство отделить предложение от подробностей. Вместо «сделайте ярче» уточните, какой элемент должен стать заметнее.

Например: «Сейчас фотография привлекает больше внимания, чем тема мероприятия. Давайте усилим заголовок, а дату и время соберем в один блок».

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

Проверяйте понимание отдельно от личных предпочтений

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

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

Чек-лист перед согласованием макета

Используйте его не для поиска нарушений ради нарушений, а для проверки того, насколько понятно передано сообщение.

• Главное: можно ли одним предложением объяснить, что должен запомнить читатель?
• Группы: собраны ли связанные сведения вместе, отделены ли разные темы?
• Линии: понятно ли, относительно чего выровнены текст, фотографии и другие элементы?
• Последовательность: одинаково ли оформлены элементы с одинаковой ролью?
• Акценты: действительно ли самое заметное является самым важным?
• Формат: проверен ли макет в том размере и окружении, где его увидит аудитория?