Гид по дизайну лендинга: часть 1

Posted on by riasevastopol

Существует масса нюансов, определяющих успешность вашего лендинга. В этом посте мы детально остановимся на таких первостепенных вещах, как коэффициент внимания (attention ratio), соответствие дизайна (design match) и визуальная иерархия (visual hierarchy).

Коэффициент внимания

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

Такое соотношение обусловлено низкой длительностью концентрации внимания (attention span) современного визитёра. Еще в 2000 году она равнялась 12 секундам, сейчас же она образовывает всего лишь 8 секунд.

Не забывайте: одна целевая страница = одна цель = один призыв к действию.

Визуальные помехи Vs. коэффициент внимания — фундаментальной принцип оптимизации конверсии

Соответствие дизайна

При переходе на вресрурс у визитёров должно появляться чувство того, что они находятся в верном месте.

Точно, вы привычны с понятием согласованности сообщения (message match). Это не что иное, в большинстве случаев «правильного вхождения», либо соответствие pre-click сообщения и post-click опыта на вашем лендинге (к примеру, рекламы и оффера).Гид по дизайну лендинга: часть 1
Что же касается согласованности дизайна, то тут речь заходит о необходимости соответствия дизайна вашей целевой страницы дизайну вашего рекламного объявления.

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

Визуальная иерархия

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

Разглядим 7 правил визуальной иерархии.

1. Размер

Чем больше элемент, тем более серьёзным он думается. Но наряду с этим не нужно забывать о том, что размер — понятие относительное. Яо Мин — большой мужчина, кроме того по меркам баскетбола. Но так же ли он высок как жираф?

Отнюдь нет.

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

Посмотрим, как Shopify применял этот принцип визуальной иерархии в дизайне собственной целевой страницы:

Целевая страница Shopify

Главная часть страницы отведена под видео, как это и должно быть. Визитёр, возможно, сперва прочтёт заголовок, но после этого его вниманием завладеет видео.

2. Контраст

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

Хорошим примером тут может служить лендинг, созданный отделом дизайна LPgenerator для 1С:

На странице употребляются 2 контрастных цвета (желтый и красный), дабы выделить самые важные элементы: форму «Покиньте кнопку» и заявку «Определить подробнее».

Цвет либо Контрастность — что заставляет вас выбирать?

3. Симметрия

В начале 20-го века узнаваемый гарвардский математик Джордж Дэвид Биркгоф (George David Birkhoff) вывел математическую формулу, разрешавшую оценить вещь с эстетической точки зрения.

Формула Биркгофа опиралась на два абстрактных понятия: порядок и сложность (либо симметрия):

Чем сложнее что-то, тем более упорядоченным (симметричным) оно должно быть.
Со своей стороны, что-то полностью симметричное не должно быть через чур сложным.

Самый распространенной формой симметрии в веб-дизайне есть отражение (reflection). Одним из отражения и лучших примеров симметрии в веб-дизайне может служить домашняя страница сайта Flat vs.Realism:

Домашняя страница сайта Flat vs.Realism

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

Тяжело спроектировать полностью симметричную либо асимметричную страницу. Как правило мы имеем дело с проявлением и того и другого. Наряду с этим направляться учитывать следующее:

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

4. Схожесть

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

Обратите внимание на то, как WebDam применял этот принцип в дизайне собственной целевой страницы:

Целевая страница WebDam

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

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

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

Так, любая секция на данной странице применяет принцип схожести.

5. Единство

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

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

Нас интересует два типа единства:

Визуальное единство — к примеру, несколько элементов, расположенных на одной оси.

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

Единство — это то, что скрепляет ваш дизайн как визуально, так и концептуально.

Единство дизайна: как создать управление по стилю?

6. Группировка

Сущность группировки содержится в размещении схожих элементов (по их цели либо визуализации) рядом между собой, что разрешает снизить когнитивную нагрузку (cognitive load) на визитёра.

К примеру, Amazon собирает собственный контент в 3 колонки и тем самым усиливает восприятие информации:

Сайт Amazon

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

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

Инкапсуляция (объединение группы элементов рамкой) разрешает сделать выговор на нужной вам информации. Особенно прекрасно это трудится с призывом и контактными «формами к действию».

7. Цвет

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

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

И тут на помощь нам приходит цветовой круг (color wheel), к примеру, Adobe Color CC. Вы имеете возможность взять HEX-код нужного вам цвета, скопировать и засунуть в ваш редактор контента.

Adobe Color CC

Adobe предлагает пара цветовых схем: монохромная, комплементарная, триадическая, составная, оттенки, произвольная.

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

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

Ниже приведен перечень цветов и связанных с ними ощущений и эмоций:

Красный: опасность, стоп, запрет, возбуждение, тёплый
Темно-светло синий: стабильный, успокаивающий, заслуживающий доверия, зрелый
Светло-светло синий: юный, мужской, холодный
Зеленый: рост, хороший, органический, вперед, утешительный
Белый: чистый, честный
Тёмный: важный, тяжелый, смерть
Серый: целостность, нейтральный, холодный, зрелый
Коричневый: нужный, органический, непретенциозный
Желтый: эмоциональный, хороший, осторожность
Золотой: консервативный, стабильный, элегантный
Оранжевый: эмоциональный, хороший, органический
Фиолетовый: юный, современный, королевский
Розовый: юный, женский, теплый
Пастельные оттенки: юный, мягкий, женственный, чувствительный
Железные оттенки: элегантный, прочный, богатый

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

Когда-то HubSpot совершил тестирование для одного из собственных клиентов, сравнив эффективность зеленой и красной кнопок «призыва к действию»:

Тест Красная кнопка vs. Зеленая кнопка

В следствии красная кнопка превзошла зеленую на 21%.

В чем же была обстоятельство для того чтобы результата?

Зеленая кнопка повторяет цветовую схему страницы и потому теряется. Иначе, красная кнопка представляет собой разительный контраст с зеленым и всем остальным на странице. Она кричит «Надави на меня!»

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

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

Высоких вам конверсий!

По данным: modgility.com, image source lukinski

Случайные статьи:

Дизайн лендинга – с чего начать дизайн лендинга с нуля, веб-упаковка? (дизайн landing page)


Подборка похожих статей:

riasevastopol

More Posts