Главная / Учебник / Урок 2.4. Дизайн лендинга

Урок 2.4. Дизайн лендинга

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

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

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

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

Как сделать дизайн для лендинга?

Разумеется, никто не сможет научить Вас рисовать за один короткий урок. К счастью, это и не требуется.

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

Посмотреть примеры

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

Требования к дизайну

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

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

Плохо.

Лучше.

Весь текст должен легко читаться. Цвет шрифта и заднего фона должны быть контрастными. Рекомендуется использовать шрифты без засечек: Arial, Tahoma, Helvetica и др., они лучше читаются. Не используйте большое количество разных шрифтов.

Плохо.

Лучше.

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

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

Плохо.

Лучше.

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

Не используйте большое количество цветов. 3-5 будет достаточно. Лендинги-радуги не только выглядят дешево, но и отвлекают внимание посетителей.

Все эти требования реализованы в нашем конструкторе лендингов. Вам потребуется только выбрать необходимые секции.

Создать лендинг

На что ориентироваться?

На сайтах land-book.com и lapa.ninja представлена галерея лучших западных лендингов. Они созданы профессиональными дизайнерами, отражают самые последние тенденции и служат хорошим примером для подражания.

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

Тестирование

И, конечно, не забываем про тестирование. Если Вы не знаете, какого цвета сделать кнопку, красного или зеленого, попробуйте оба варианта и понаблюдайте за конверсией.

Ни один дизайнер или маркетолог не смогут со 100%-ой вероятностью сказать Вам, что будет работать лучше, а что хуже. Все могут только предполагать. Тестирование же даст точный объективный ответ.

Итог

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

Если Вы поручили создание дизайна специалисту, то необходимо оценить его работу.

В обоих случаях Вы можете руководствоваться описанными выше требованиями.

Урок оказался полезным? Поделитесь им с друзьями!

Новости платформы читайте в сообществе ВКонтакте.

← Урок 2.3. Текст лендинга Урок 2.5. Размещение лендинга в интернете →