1 грудня 2016

Дело принципов: как донести информацию с помощью дизайна

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

 

Когда зритель уже обратил внимание на работу дизайнера, он должен с первого взгляда догадаться, о чем это сообщение. В зависимости от того как расположены и как выглядят элементы, зритель будет перемещаться по работе взглядом в определенном направлении и считывать информацию в том же порядке (от наиболее важной до наименее важной).

 

В чём выражается визуальная иерархия?

 

Давайте рассмотрим это правило на примере старинной личной визитки Сергея Петровича Писарева, которую я когда-то случайно нашел в сети.

 

 

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

 

Что первое вы замечаете, глядя на визитку? Конечно, это фамилия. Далее вы читаете имя и отчество, и уже потом мелкий текст внизу. Так мы прослеживаем иерархию информации на бумаге. Главным элементом визитки является фамилия владельца, что упрощает поиск нужной среди прочих. Все остальные элементы ориентируются на него, соблюдая ряд принципов: контраст, приближённость, выравнивание. Хорошим примером также является написание имени и отчества перед фамилией, что соответствует правилам и логике (вы же не говорите Пушкин Александр Сергеевич), и никак не путает иерархию и порядок первого считывания. Отдельно стоит отметить типографику: тут и капительное начертание в имени и отчестве, и разрядка заглавных букв в фамилии, и интерлиньяж на высоте.

 

А в жизни?

 

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

 

Эту рекламу я сфотографировал в вагоне метрополитена, её мы и будем сегодня разбирать, параллельно выводя методы построения визуальной иерархии.

 

 

Обычная реклама повседневной продукции. Логотип и контакты специально скроем. 

На что мы обращаем внимание первым? Лично мне бьют в глаза огромные буквы «ДСТУ», кто-то обратит внимание именно на фотографию продукции, а кто-то увидит логотип? Этот спор между объектами композиции хороший пример, когда в сообщении нет точной иерархии. В рекламных сообщения принята последовательность в которой должна читаться информация: иллюстрация → заголовок → текст. С этим мы и будем работать, и я очень надеюсь, что к концу заметки у всех разыграется аппетит не только на еду, но и на применение принципа иерархии.

 

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

 

 

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

 

 

Картинка стала уже намного вкусней. Имея иллюстрацию, размещаем весь текст, который необходим, и сразу визуально выделяем главный заголовок. Подчиняя его общему принципу смысловой иерархии. Второй аспект — главная фраза, или сообщение обязательно должны выделяться на фоне остального текста. В нашем случае, судя по оригинальной рекламе, клиент хотел сделать акцент на высшем сорте продукции и том что она отвечает государственному стандарту качества. Мы тоже будем придерживаться этого акцента. Заменяем техническую часть «по нормам ДСТУ» на более понятную и человеческую «высшего сорта», но и не забываем про номер ДСТУ.

 

 

Для верстки больших текстов с разными стилями в основном я использую сетки. В нашем случае будем использовать сетку 3×3, обозначающую поля макета и рабочую область с осями для привязки изображения и текста.

 

 

Размещаем наш заголовок согласно сетке и сразу выделяем главную часть. Как и в первом примере с визиткой, присутствие слов «Молочная сарделька» над главным сообщением «высшего сорта» никак не мешает правильной последовательности беглого считывания. А именно, что первым читается часть «высшего сорта», а уже потом вы читаете всю фразу целиком и номер ДСТУ. Это достигается за счет контраста — третьего метода построения визуальной иерархии, который обеспечивает динамику между элементами.

 

 

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

 

 

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

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

 

 

До и после:

И ещё раз.

1. Масштаб. Крупные объекты воспринимаются главней, а мелкие кажутся более удалёнными и менее значимыми.

 

2. Смысловая доминанта. Выделяйте главную информацию в работе, это помогает зрителю сразу понять суть сообщения.

 

3. Контраст. Помещайте крупные формы рядом с мелкими, текст рядом с иллюстрацией, это притягивает внимание.

 

4. Последовательность. Создавайте логическую последовательность, по которой будет двигаться взгляд зрителя.

 

И тогда ваши сардельки будет хотеть купить каждый

comments powered by Disqus