Как создать привлекательную посадочную страницу: 6 статей по теории дизайна

Не все компании могут позволить себе талантливого штатного графического дизайнера. Для тех, кому эта роскошь пока недоступна, создание эффективной посадочной страницы, повышающей конверсию, может оказаться непростой задачей. Речь идет не просто о привлекательной страничке, имеются в виду все аспекты дизайна посадочной страницы: направляющие сигналы, теория цвета, шрифтовое оформление, особенности компоновки элементов страницы и многое другое. Хлоя Мейсон Грей подобрала шесть лучших статей, которые помогут использовать возможности дизайна для создания эффективного лендинга. Если дизайн не является вашей сильной стороной, этот материал как раз для вас.

1. Психология цвета от Quick Sprout

Полное руководство по психологии потребителя. Глава 4: Психология цвета.
Авторы: Нил Патель и Ритика Пури (Quick Sprout).

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

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

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

Основной вывод

Типичная ошибка дизайнеров — использование слишком большого количества цветов на странице.

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

2. Цвет как инструмент юзабилити: 4 способа увеличить конверсию с помощью физиологии

Цвет как инструмент юзабилити: 4 способа повысить конверсию с помощью физиологии.
Автор: Энджи Шоттмюллер (Three Deep Marketing).

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

Энджи Шоттмюллер (маркетинговое агентство Three Deep Marketing) разработала систему повышения конверсии, в основу которой положена физиологическая реакция человека на цвета, т.е. то, как человеческий глаз воспринимает цвет и как это влияет на поведение пользователя, зашедшего на сайт.

Из ее статьи вы узнаете:

• Что такое цветовая модель оптимизации конверсии (“Clockwork Conversion Color Model”), основанная на стратегическом использовании комплементарных цветов.
• Каковы четыре научно обоснованных принципа, лежащие в основе этой модели, а также способы их использования при создании посадочной страницы.

Основной вывод

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

3. Как выбрать правильный шрифт: руководство по типографике и UX

Как выбрать правильный шрифт: Руководство по типографике и UX.
Автор: Ханна Альварес (UserTesting).

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

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

• Каким должно быть оптимальное количество символов в строке — при просмотре страницы как с настольного компьютера, так и с мобильных устройств.
• Как работать с контрастом между цветом шрифта и цветом фона.
• Как пользователь воспринимает шрифты с засечками (serif) и без засечек (sans serif).

Основной вывод

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

Задайте себе следующие вопросы:

• Каковы ожидания пользователей, когда они попадают на мою страницу?
• Какими устройствами они пользуются?
• С какой целью они заходят на мою страницу (покупка, поиск информации, развлечения)?

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

4. Руководство по гарнитурам шрифтов и верстке для не дизайнеров

Руководство по гарнитурам шрифтов и верстке для недизайнеров.
Автор: Адам Дачис (Lifehacker).

Итак, вы подобрали цвета и шрифты. Теперь нужно наилучшим образом все это скомпоновать и разместить на странице. Как это сделать?

Ответ вы найдете в статье Адама Дачиса, из которой вы узнаете:

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

Основной вывод

Из-за неудачного подбора цветов внешний вид страницы может оттолкнуть потенциальных покупателей. Что же делать маркетологу-дальтонику? Дачис делится информацией об очень удобном инструменте — Adobe Kuler. С его помощью можно подобрать гармоничные, хорошо сочетающиеся цветовые комбинации.

5. 8 принципов веб-дизайна, без которых вам не обойтись

8 принципов веб-дизайна, без которых вам не обойтись.
Автор: Пип Ладжа (ConversionXL).

Специалист по оптимизации конверсии Пип Ладжа пишет: «Дизайн – это не только то, чем занимаются дизайнеры. Дизайн – это маркетинг». Маркетологов без особого таланта к дизайну такое заявление может смутить. Именно для них Пип Ладжа раскладывает по полочкам восемь принципов веб-дизайна, которые помогают создать лендинг с высокой конверсией. Хотя подавляющее количество приводимых примеров относятся скорее к сайтам, чем к лендингам, эту статью можно с уверенностью рекомендовать всем.

Из нее вы узнаете:

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

Основной вывод

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

6. Почему у этих уродливых страниц прекрасная конверсия

Почему у этих уродливых страниц прекрасная конверсия.
Автор: Матиас Гильот (Unbounce).

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

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

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

И помните, что эффективная посадочная страница гарантирует высокий процент конверсии с рекламы и поиска, а также определяет до 40% успеха поисковой оптимизации и продвижения сайта.

С оригинальным текстом статьи Хлои Мейсон Грей “6 Articles on Design Theory to Help You Create Beautiful Landing Pages” можно ознакомиться в блоге компании Unbounce.