Как создать продающий лендинг (сайт) и избежать ошибок

Как создать продающий лендинг (сайт) и избежать ошибок

Как создать продающий лендинг и избежать ошибок

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

А в конце статьи Вы найдете итоговый результат, как сайт выглядит сейчас, после внесения всех корректировок.

Анализ лендинга

Пару месяцев назад меня попросили провести анализ этого лендинга: Алекс Юсфин&Школа капитана Флинта. Именно его мы и будем разбирать. Чтобы не переходить на сам сайт, можете полистать скриншоты, представленные ниже:

Первый экран лендинга для школы английского ДО редизайна
Дизайн экрана с ценами тарифами для лендинга школы английского. Вид ДО редизайна.
Дизайн экрана с отзывами для лендинга школы английского. Вид ДО редизайна.
Дизайн экрана с отзывами для лендинга школы английского. Вид ДО редизайна.
previous arrow
next arrow
previous arrownext arrow
Slider

Основные ошибки

Ошибка 1 - Количество текста.

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

Дизайн экрана о преимуществах курса для лендинга школы английского. Вид ДО редизайна.
Пример экрана лендинга, где слишком много текста.

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

Ошибка 2 - Отсутствие иерархии в размере шрифтов.

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

Порядок чтения текста на сайте

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

Пример отсутствия шрифтовой иерархии в дизайне лендинга.
Пример экрана, где отсутствует шрифтовая иерархия

Ошибка 3 - Отсутствие единого стиля. 

Здесь мы видим сразу три активных цвета:

  • Ярко желтый
  • Красный
  • Синий
Экран, где явно читается перебор с яркими цветами.
Экран, где явно читается перебор с яркими цветами.

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

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

teamtreehouse.com

Темно-серый является основным цветом. Он чаще всего используется в типографии и иногда в качестве цвета заднего фона для разделения разделов страницы.
Синий для ссылок и второстепенных кнопок.
Зеленый используется
только на кнопках призыва к действию.

InVisionApp.com

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

Синевато-серый цвет используется в качестве основного для всего текста и больших блоков заднего фона.
Красный в качестве второстепенного.
И зеленый для основных кнопок.

previous arrow
next arrow
Slider


Разбор каждого экрана сайта

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

Первый экран лендинга для школы английского ДО редизайна
Дизайн экрана с ценами тарифами для лендинга школы английского. Вид ДО редизайна.
Дизайн экрана с отзывами для лендинга школы английского. Вид ДО редизайна.
Дизайн экрана с отзывами для лендинга школы английского. Вид ДО редизайна.
previous arrow
next arrow
previous arrownext arrow
Slider

На лендинге есть:

  1. Шапка, с навигацией по странице
  2. Видео-презентация курса
  3. Блок, закрывающий возражения
  4. Структура курса
  5. Рассказ о преподавателе
  6. Пакеты со стоимостью
  7. Отзывы 

Каких блоков не хватает:

  1. УТП - уникальное торговое предложение
  2. Форма захвата, где клиент может оставить свои данные
  3. Цифры и факты
  4. Для кого этот курс
  5. Блок с контактами

А теперь давайте пройдемся по каждому из этих элементов лендинга и разберём их поподробнее. 

Шапка с навигацией

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

Блок контактов на лендинге школы английского до редизайна.
Шапка с навигацией на лендинге, который мы анализируем.

Первое, что мы привыкли видеть в левой части шапки сайта - это логотип и краткое описание самого сайта. Этот элемент сразу даёт понять, туда ли мы попали и это ли мы искали.

Пример расположения логотипа и описания сайта на лендинге, которое мы привыкли видеть.
Пример расположения логотипа и описания сайта, которое мы привыкли видеть.
Открыть сайт полностью
Пример расположения логотипа и описания сайта на лендинге, которое мы привыкли видеть.
Пример расположения логотипа и описания сайта, которое мы привыкли видеть.
Открыть сайт полностью

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

Шапка с навигацией на лендинге, которая оформлена неверно.
Шапка с навигацией на лендинге, который мы анализируем.

Мы учли все эти моменты, преобразили шапку и сейчас она выглядит так:

Исправленный вариант шапки для лендинга школы английского.
Исправленный вариант шапки для лендинга школы английского.

Видео-презентация курса

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

Дизайн экрана с видеопрезентацией курса для лендинга школы английского.
Экран с видеопрезентацией курса "ДО" редизайна

Наши преимущества

Это один из самых удачных экранов лендинга. Здесь есть заголовки у абзацев и текст разбавлен иконками, все смотрится интересно. Единственное, что здесь не так - это объем текста, его очень много. Поэтому мы решили сократить все абзацы без потери смысла и заменить заголовки на более конкретные.

Дизайн экрана о преимуществах курса для лендинга школы английского. Вид ДО редизайна.
Экран о преимуществах курса "ДО" редизайна
Дизайн экрана о преимуществах курса для лендинга школы английского. Вид ПОСЛЕ редизайна.
Экран о преимуществах курса "ПОСЛЕ" редизайна
Второй блок показывает, как он выглядит при наведении на него мыши.

Структура курса

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

Экран о структуре курса для лендинга школы английского
Экран о структуре курса от которого мы решили отказаться.

О нас

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

Дизайн экрана "о нас/ о преподавателе" для лендинга школы английского. Вид ДО редизайна.
Экран о преподавателе "ДО"

И после наших изменений:

Дизайн экрана "о нас/ о преподавателе" для лендинга школы английского. Вид ПОСЛЕ редизайна.
Экран о преподавателе "ПОСЛЕ"

Экран с ценами

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

Дизайн экрана с ценами тарифами для лендинга школы английского. Вид ДО редизайна.
Экран с ценами "ДО" редизайна

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

Дизайн экрана с ценами тарифами для лендинга школы английского. Вид ПОСЛЕ редизайна.
Экран с ценами "ПОСЛЕ" редизайна

Отзывы

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

Дизайн экрана с отзывами для лендинга школы английского. Вид ДО редизайна.
Экран с отзывами "ДО" редизайна
Дизайн экрана с отзывами для лендинга школы английского. Вид после редизайна.
Экран с отзывами "ПОСЛЕ" редизайна

УТП ➖ уникальное торговое предложение

УТП - это самый крупный заголовок на лендинге. Чаще всего это 1-2 предложения. Расположено на видном месте, написано самым крупным текстом. Помогает клиенту понять кто Вы с первых секунд знакомства. В  данном случае заголовок дополнен описанием, которое написано шрифтом поменьше. Это хорошая практика, если в основном заголовке что-то не уместилось.

На нашем лендинге УТП выглядел так. Давайте разберем, какие здесь есть плюсы и минусы.

УТП с ошибками
УТП с ошибками

Минусы:

  1. Заголовок на английском, предназначенный для аудитории, которая не знает английский. Это минус, так как часть людей просто не поймет его.
  2. Размытые формулировки, такие как “короткий срок”. Нет четких цифр.
  3. Много воды и повторяющихся элементов.
  4. Отсутствует призыв к действию, без которого нет никакого смысла в УТП.

Плюсы:

  1. Есть направленность на аудиторию путешественников (“english for travellers” переводится, как английский для путешественников).
  2. Указаны выгоды, которые получит клиент: комфортное пребывание общение в любой стране.

На обновленном варианте сайта УТП выглядит так:

Пример уникального торгового предложения на лендинге
УТП на обновленном лендинге

Что мы сделали для улучшения УТП:

  1. Мы решили указать, что курс базовый. Это дает понять, что Вы не освоите язык в совершенстве, но изучите основы для свободного общения за границей.
  2. Оставили ориентированность на путешественников, но написали это на русском языке.
  3. Заменили размытую фразу - “короткие сроки” на  точную - “через 2 недели”. 
  4. Добавили призыв к действию и сразу же под ним активные кнопки “Начать обучение” и “Подробнее”.

Форма захвата, где клиент может оставить свои данные

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

Структура формы очень проста, главное, что должно быть здесь - призыв к действию (“оставьте заявку” или “оставьте номер телефона”).  Так выглядит форма, которую мы добавили на лендинг:

 Пример формы захвата на сайте/лендинге, где клиент может оставить свои данные
Форма захвата, где клиент может оставить свои данные

Цифры и факты

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

Состав курса в цифрах для лендинга школы английского
Состав курса в цифрах для лендинга школы английского

И количество времени, необходимое для его прохождения:

 Продолжительность курса в цифрах для лендинга школы английского
Продолжительность курса в цифрах для лендинга школы английского

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

Для кого этот курс

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

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

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

 Экран лендинга для школы английского "для кого этот курс" ПОСЛЕ
Экран лендинга "для кого этот курс" ПОСЛЕ

Блок с контактами 

Ранее контакты можно было найти в шапке сайта. Они были практически не видны, а это важный элемент лендинга. 

Блок контактов на лендинге школы английского "ДО" редизайна
Блок контактов на лендинге школы английского "ДО"

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

 Блок контактов на лендинге школы английского "ПОСЛЕ" редизайна
Блок контактов на лендинге школы английского "ПОСЛЕ"

А так-же добавили все контакты и ссылки в футер:

Футер лендинга после внесения изменений в дизайн
Футер после внесения изменений в дизайн

Итоги

Так выглядит итоговый результат лендинга созданный нашей студией дизайна. И для сравнения посмотрите два варианта сайта ДО и ПОСЛЕ:

Первый экран лендинга для школы английского ДО редизайна
Дизайн экрана с ценами тарифами для лендинга школы английского. Вид ДО редизайна.
Дизайн экрана с отзывами для лендинга школы английского. Вид ДО редизайна.
Дизайн экрана с отзывами для лендинга школы английского. Вид ДО редизайна.
previous arrow
next arrow
previous arrownext arrow
Slider

Основная работа, которую мы проделали:

  • Убрали всю воду
  • Сократили лендинг в 1,5 раза
  • Разработали единый стиль, который прослеживается на всей странице

Первый экран лендинга для школы английского + экран "О курсе"
Экран о преимуществах курса для лендинга школы английского.
Дизайн экран "о курсе" для лендинга школы английского. Макет лендинга
Состав курса в цифрах для лендинга школы английского и темы из курса английского
Дизайн экран со стоимостью тарифов для лендинга школы английского
Дизайн экран с отзывами и контактами для лендинга школы английского
Дизайн формы захвата и футера (подвала) на лендинге.
previous arrow
next arrow
previous arrownext arrow
Slider

Если Вы тоже хотите обновить свой сайт или проанализировать его и найти ошибки, то пишите нам и мы обязательно поможем.

Анализ Вашего лендинга совершенно бесплатно!

Способы связи с нами:

Спасибо за внимание, надеюсь, эта статья была Вам полезна.

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

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *

Спасибо за внимание!

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

Мне важно создать не просто красивую картинку, но и сделать Ваше предложение одним из лучших среди конкурентов.

Свяжитесь со мной любым удобным способом:
Top