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

Продающий дизайн

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

Как сделать продающий дизайн сайта — 5 заповедей маркетолога

Автор: Алексей Харитонов09.01.2020

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

О том, что именно делает сайт «радующим глаз», и в то же время содействует продажам — в этой статье.

 

1. Лаконичность и простота


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

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

 

Например, если бы мы не оставили достаточного количества «воздуха» на сайте, который разработали для школы балета и хореографии «Classic», то эффект от утонченно обрамленной формы был бы потерян, композиция была бы скомкана.

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

При этом мы задаем себе вопросы:

  • На что потенциальный клиент должен обратить внимание в первую очередь?
  • Как акцентировать ключевые моменты?
  • В какой последовательности пользователь изучит блоки?
  • Ответив на эти вопросы, мы «прокладываем» будущий путь пользователя по сайту с помощью приемов акцентирования внимания и расположения элементов в соответствии с F-паттерном и законами композиции.

Логично, что путь из точки А (начало ознакомления с сайтом) в точку Б (формирование положительного суждения о компании и нажатие на кнопку CTA) должен быть понятным и простым.

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

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

Так, подойдите серьезно к формулированию оффера.  Человек должен с первых секунд понять, что именно вы ему предлагаете, и в чем заключается отличительная ценность вашего предложения. Вот, например, такой оффер мы сформулировали для лендинга центра подготовки к экзаменам «Развитие»:

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

 

2. Золотое сечение и правило третей

 

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

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

Золотое сечение — это соотношение двух величин a и b, при котором большая величина относится к меньшей так же как сумма величин к большей.

Из-за того, что такая пропорция повсеместно встречается в природе, мы воспринимаем ее как нечто гармоничное и даже «родное».

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

 

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

 

Однако, еще чаще на практике используется упрощенный вариант золотого сечения — правило третей. Его суть сводится к тому, что изображение делится на 9 частей четырьмя равноудаленными линиями.

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

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

 

 

Например, тут мы обрабатываем фотографию, на которой наш генеральный директор выступает на международном форуме по продаже белья в интернете (есть интересная статья об этом).

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

Используйте золотое сечение и правило третей при разработке сайта или рекламных макетов.

 

3. «Созвучность» копирайтингу


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

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

Это ярко проявляется в веб-дизайне. Вот пример из жизни:

Ромбовидная красная кнопка CTA и очертания формы данных — такой динамический, броский дизайн прекрасно подкрепляет прямой призыв к действию, размещенный над полями формы. Мы особенно часто используем такие приемы при разработке лендингов. Например, при создании посадочной страницы для фитнес-центра.

Несогласованность действий дизайнера и копирайтера подрывает доверие пользователя к рекламным обещаниям. Давайте разберем это на примерах.

1) Копирайтер написал слова: «Вы можете быть спокойны…». А дизайнер разместил тут же ярко-красную плашку. Как же может пользователь внять вышеприведенному призыву, если его подсознание воспринимает красный цвет как сигнал об опасности/необходимости активных действий?

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

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

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

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

 

4. Соблюдение принципов типографики

 

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

Несерьезное отношение к типографике встречается повсеместно.

Вот лишь некоторые из таких нюансов:

  • избегайте использования более 2-3 шрифтов (читайте о шрифтах тут);
  • используйте удобный для прочтения интерлиньяж, равный примерно 150% от размера шрифта (значение может варьироваться в зависимости от длины строки и типа начертания);
  • сочетайте лишь контрастные шрифты, а еще лучше пользуйтесь проверенными шрифтовыми парами, например: Verdana и Georgia, Tahoma и Garamond, Fira Sans и Courier New и т. д.;
  • удерживайте размер строки в пределах 50-70 символов;
  • разряжайте (т. е. увеличивайте расстояние между заглавными буквами);
  • не используйте разрядку в строчных буквах;
  • не оставляйте висячих строк — «вдов» (очень коротких строк в конце страницы) и «сирот» (висячих строк, попадающих на начало новой колонки);
  • не используйте дефис или минус вместо тире.

 

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


5. Обоснованность и измеряемость

 

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

Например, при разработке лендинга для международного ICO-проекта мы:

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

2) Написали текст белым цветом, поскольку он прекрасно контрастирует с фиолетовым фоном, обеспечивая легкую читаемость.

3) Использовали шрифты без засечек, поскольку они выглядят более современно, соответствуя тематике продукта.

4) Разместили первые несколько фраз в соответствии с F-паттерном — замеченной исследователями привычке пользователей просматривать контент по контуру, напоминающему латинскую букву F.

5) Ради обеспечения единообразия и контрастности стилизовали иконки, сделали их белыми.

6) Добавили желтую стрелочку, чтобы привлечь дополнительное внимание пользователя к кнопке CTA.

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

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

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

Конечно, эта статья отразила лишь крошечную часть нюансов, которые необходимо учитывать при разработке дизайна сайта. Важно понимать, что обучение веб-дизайну должно быть продолжительным, системным и подкрепленным разносторонним практическим опытом. Именно такой тернистый путь пришлось пройти специалистам, которые работают в нашей компании.                            

 

 

2150