Опишите ваш проект
Наши специалисты свяжутся с вами в ближайшее время
Отправив запрос вы получаете:
  • Письмо или звонок от нашего менеджера
  • Оценку своего проекта
  • Личную встречу, при необходимости
  • Конфиденциальность гарантирована!
Ваш менеджер
Максим Садовский
С удовольствием ответим на все ваши вопросы
Харьков
Задать вопрос
UX/UI

Чек-лист “Как создать идеальный лендинг”

Artjoker Блог UX/UI Чек-лист “Как создать идеальный лендинг”

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

Для удобства мы разбили процесс создания лендинга на 4 этапа:

  1. Описание проекта
  2. Определение структуры проекта
  3. Упаковка проекта
  4. Метаданные и дополнительные замечания

Ниже рассмотрим каждый из этапов.

Описание проекта

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

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

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

Структура проекта

Определившись с целью проекта, можно приступать к обдумыванию структуры будущего лендинга. 

  1. Первый экран. По сути лендинг пейдж - это не длинный впечатляющий рассказ, после прочтения которого пользователю обязательно захочется почувствовать себя его героем. Поэтому начинать стоит с интригующего предисловия - вашего УТП или оффера. Туда же добавьте броский призыв к действию. И, конечно, подберите яркий продающий фон. 
  2. Расскажите о своем продукте больше. Постарайтесь кратко и в то же время ярко описать ваш продукт или услугу. Пользователь должен понять, что он знает все о вашем предложении.
  3. Добавьте больше выгод. Почему юзер должен купить именно у вас? Тут не стоит уходить в длинные повествования о вашей компании, просто опишите основные моменты, которые отличают вас от конкурентов.
  4. Покажите, почему вам должны доверять. Добавьте отзывы, истории успеха, яркие проекты из портфолио.
  5. Подтолкните к целевому действию. Добавьте форму для заполнения контактных данных и ваш продающий призыв. 

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

Упаковка

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

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

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

Начинаем создавать лендинг с первого экрана.

1й информационный блок

Заголовок

"Авто из США под ключ с гарантией доставки до Одессы за 2 месяца. Экономьте до 50% в сравнении с покупкой в Украине."

Подзаголовок

"Выбранный вами автомобиль проходит 12 этапов проверки нашими экспертами в США перед погрузкой на паром"

Кнопка

"Рассчитать стоимость пригона"

Под кнопкой мелкими буквами 

"312 человек уже пригнали свою машину мечты"

Таймер, который обязательно находится в рамках первого экрана

  • Текст над таймером: "Вы можете заказать авто в течение: дни, часы, минуты, секунды"
  • Под самим таймером : "К концу года планируется отмена закона, который позволяет выгодно доставлять авто из США в Украину. Успейте заказать авто, срок доставки - 2-3 месяца."

Картинка

В качестве основного изображения на первом экране будет авто. Это сравнение между покупкой в США и Украине. Берем картинку Ford Fusion 2016-2017

Текст

"Вложения на покупку авто под ключ в Master Motors 13430$. Стоимость покупки в Украине от 18240$"

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

2й информационный блок

Описание блока: каталог машин в формате карусели

Заголовок

"Автомобили, которые находятся в пути"

Добавляем плитку из фотографий машин.

Под каждым авто прозрачная кнопка (акцентирующая кнопка будет ниже)

"Уточнить наличие"

Под каталогом на всю ширину призыв к действию подписаться в телеграмме

"Подпишись на канал в Telegram и будь в курсе самых горячих предложений с американского рынка авто"

Кнопка

"Подписаться бесплатно"

Под кнопкой мелкими буквами

"Больше 1000 человек уже подписаны"

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

3й информационный блок

Описание блока: продажа ниши в целом

Заголовок

"Почему авто из США это выгодно?"

Здесь нужно раскидать выгоды покупки

  • дешевле на 30-50%
  • зачем переплачивать?
  • качество авто
  • маленький пробег
  • новые модели от 2010 года

Призыв к действию

"Подберите свое авто и получите бесплатный расчет пригона из США под ключ"

Кнопка

"Бесплатный расчет"

Здесь же можно сделать 3-4 коротких отзыва в формате карусели где-то сбоку, так как думаю что будет много свободного места (полноценные отзывы будут в конце) 

  • фотографии владельцев авто
  • отзыв состоит из 3-4 предложений
  • ссылка на соц. сеть

Не забудьте придумать тексты для pop-up и 404. 

Pop-up поможет вам подтолкнуть пользователя к одному из желанных целевых действий.

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

Как оптимизировать страницу 404 для SEO

Страница 404 или ошибочка вышла | WebElement

Мета-данные и дополнительные замечания

Финалом пропишите метаданные, а также, если это необходимо, поработайте над дополнительными замечаниями относительно проекта. 

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

Мы с командой Artjoker можем помочь вам с созданием продающей лендинг пейдж. Просто заполните бриф по ссылке.

 

 

 

 

Мы с радостью сделаем бесплатную оценку вашего проекта
Или просто загрузите файл с презентацией или описанием
Максим Садовский
Менеджер по работе с клиентами
Максим Садовский