Размер лендинга: какой выбрать + как сделать продающий главный экран

Цель первого экрана лендинга — привлечение внимания пользователя для дальнейшего изучения сайта. На сканирование лендинга у человека уходит около 3-х секунд — если за это время не нашлось за что зацепиться, пользователь уйдет и ты потеряешь потенциального клиента.
По данным исследования компании «Nielsen Norman Group (NNG)»

Идеальный первый экран лендинга

Поэтому задача первого экрана:

  1. Привлечь внимание пользователя;
  2. Дать максимум чёткой и понятной информации, чтобы твой продукт хотелось приобрести;
  3. Сконвертировать посетителя в заявку/звонок.

Если первый экран не работает — не работает весь лендинг

Нужен лендинг?

Закажи разработку
у меня

Узнать стоимость

Сделай сам на конструкторе

Перейти в конструктор

Посмотри первый экран своего лендинга.

Отвечает ли он на эти вопросы:

  • Куда я попал?;
  • Это то, что я искал?;
  • Для меня (клиента) здесь есть что-нибудь интересное?;
  • Я могу доверять информации на сайте?;
  • Что делать дальше?.

Какие элементы 1-ого экрана отвечают на 5 основных вопросов?

  1. Логотип, дискриптор (описание деятельности компании) и изображение, которое характеризует то, чем вы занимаетесь  Куда я попал?
  2. Уникальное торговое предложение, которое доносит суть и отличается от конкурентов Это то, что я искал?
  3. Выгоды твоего предложения Для меня (клиента) здесь есть что-нибудь интересное?
  4. Приятный дизайн + живые фото + факты о компании Я могу доверять информации на сайте?
  5. Кнопка для целевого действия, кнопка для заказа звонка, кликабельный номер телефон Что делать дальше? 
    Как cделать привлекательную кнопку, я написал здесь.
5 вопросов на которые должен отвечать первый экран

Размер лендинга: высота и ширина

Дизайн лендинга для ПК версии c контентной шириной 1170 px создавай в следующих размерах:

  • 1920px*1080 px;
  • 1600*900 px;
  • 1536*864 px;
  • 1440*900 px;
  • 1368*768 px;

Для мобильных устройств c минимальной контентной шириной 290px используй размеры:

  • 360*640 px;
  • 380*720 px;
  • 375*667 px;
  • 380*780 px.
Лендинг в фотошопе

Дизайн лендинга в фотошопе

Дизайн макета в фигме

Дизайн макета в фигме

Контентная ширина - область контента, на которой расположены основные элементы лендинга.

Я рекомендую делать:
Высоту страницы для десктопов  600-800 px, а оптимальную ширину - 1000-1200 px. Для мобильных устройств подойдет стандартная ширина 320-360 px и длина - 500-600 px.

Основные правила, которые нужно соблюдать при создании первого экрана:

  1. Все элементы должны быть видны без прокрутки;
  2. На больших экранах (больше 1200 пикселей) текст должен оставаться читабельным, а изображение - сохранять высокое разрешение.

ТОП-6 ошибок первого экрана

Основные ошибки по категориям:

1) Маркетинговая проработка:

  • Слабое неконкурентоспособное УТП или его отсутствие;
неконкурентоспособное УТП

Низкие цены! Успейте купить! – без комментариев понятно, что это очень плохо 

отсутствует УТП

Где УТП? Куда я вообще попал? 

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

Ничего не понятно, и причем здесь ребенок?

  • Несколько призывов к действию, нужно следовать правилу:
    один экран - один призыв к действию;

2) Дизайн:

  • Экран перегружен большим количеством элементов, из-за чего сложно акцентировать внимание на целевом действии;
Перегруженный экран

Заговок, описание, акция, форма с таймером  — глаза разбегаются

  • Контрастность (текст сливается с фоном);
Текст сливается с фоном

Здесь понятно, что написано?

  • Стоковое изображение - плохое качество фото;
Текст сливается с фоном

Перевозка рыбы в аквариуме в Антарктике  — а что видишь ты?

  • Картинка - не соответствует содержанию лендинга;
Картинка - не соответствует содержанию лендинга

Убери текст с экрана. Догадаешься, из какой сферы этот сайт?

  • Большой размер шапки, меню;
Большой размер шапки

Основной контент уехал вниз

  • Используется много шрифтов, шрифты с засечками;
  • Неаккуратный главный экран.
Неаккуратный главный экран

Просто #вырвиглаз

3) Верстка:

  • Лендинг «едет» при разных разрешениях монитора;
  • Неадаптивен для мобильных устройств;
  • По-разному отображается в браузерах;
  • Долго загружается.

4) Текст:

  • Малоинформативный, без конкретики, вода;
Текст без конкретики

Текст без конкретики

  • Преимущества c недостоверными фактами (высокое качество, лидер рынка, быстрая доставка);
  • Неоформлен (сплошными блоками, мелкий шрифт, ЗАГЛАВНЫМИ БУКВАМИ, декоративный шрифт).
Неофомленный текст

Неофомленный текст

5) Доверие и безопасность:

  • Отсутствие контактной информации (нет номеров телефонов или они не кликабельны);
  • На лендинге нет защищенного соединения https (показывается в левом верхнем углу, перед адресной строкой). А какие ещё важные элементы оптимизировать читай в этой статье.

6) Слайдер или баннер на главном экране. На каждом слайде показаны разные торговые предложения, что отвлекает от главного целевого действия и размывает его.

Слайдер на главной

Слайдер на главной

7 рекомендаций по увеличению конверсии главного экрана

Самые эффективные инструменты из моей практики:

  1. Мультилендинг. Заголовок меняется в зависимости от запроса пользователя.
  2. Лидмагнит. Взятка за контакты, бесплатный шаг за получение контактов клиента взамен на полезную плюшку (чек-лист, инструкция, руководство, прайс-лист).
  3. Квиз. Опрос из нескольких вопросов, который помогает интерактивно взаимодействовать с посетителем с целью получения контактов, например: рассчитать стоимость.
  4. A/B тестирование. Меняем заголовок, основную картинку, призывы к действию и запускаем рекламу, через 100 кликов анализируем результаты, выбираем лучший вариант.
  5. Виджеты. Обратный звонок, онлайн-чат, видеовиджет, мультикнопка, «Колесо фортуны».
  6. Exit pop-up или всплывающее окно на выход с получением лид-магнита, когда пользователь собирается уйти и наводит мышью за пределы лендинга.
  7. Продающее видео. Если у тебя есть видео о компании, добавь иконку просмотра на первый экран.

16 примеров первого экрана с конверсией от 5%

Лендинг 1. Dessertbro.ru

Пример из нашей практики — одноэкранный лендинг пейдж с конверсией 26%.

Лендинг для оптовой продажи десертов

dessertbro.ru

Реализован по всем правилам: УТП, преимущества, лого, дискриптор, контактные данные, призыв к действию, форма + приятный, выделяющийся на фоне конкурентов дизайн и аккуратная вёрстка.

Захотелось бы получить каталог с десертами? 

Лендинг 2. Inzr.ru

Проектирование ресторанов.

Лендинг по проктированию

inzr.ru

Фишка. Визуально понятная картинка, описание деятельности компании (ассоциации с проектами), емкий заголовок, подзаголовок, увеличивающий ценность, преимущества и целевая кнопка действия.

Лендинг 3. Lp.kuhnivesta.ru

Кухни на заказ.

Лендинг по продаже кухонь

lp.kuhnivesta.ru

Фишка 1. Лаконичный дизайн с приятно подобранной палитрой цветов, который вызывает доверие.

Фишка 2. Призыв к действию: рассчитать стоимость и получить 3D дизайн-проект с акцией - подарок на выбор.

Первый экран просто пальчики оближешь.

Лендинг 4. Raymod.ru

Оптовая продажа головных уборов.

Лендинг по оптовой продаже головных уборов

raymod.ru

Фишка. Получить оптовый прайс и бесплатные образцы от производителя.

Лендинг 5. Guru-stroy.by

Дизайн интерьеров.

Лендинг по интерьеру и дизайну

guru-stroy.by

Фишка 1. Дизайн выглядит дорого и премиально.

Фишка 2. Показывают свою экспертность: делимся опытом на телеканале ОНТ, смотрите обзор нашей работы.

Лендинг 6. Broomroom.ru

Клининговые услуги.

Лендинг для клиниговых услуг

broomroom.ru

Фишка 1. Яркий фон с настоящей фотографией сотрудника в фирменной спецодежде. Плюс к доверию.

Фишка 2. Цепляющий заголовок - боль целевой аудитории.

Лендинг 7. Piton-power.ru

Продажа блоков питания.

Лендинг для продаже блоков питания

piton-power.ru

Фишка 1. "Товар лицом". Фото продукта на половину экрана в высоком качестве.

Фишка 2. Факты о компании/товаре: ТОП-5 поставщиков по версии журнала, блоки питания работают даже в экстремальных условиях.

Фишка 3. Продающее видео.

Лендинг 8. Мечтысбываются.su

Лендинг по продаже квартир.

Лендинг по продаже квартиры

Мечтысбываются.su

Фишка. Оффер с усиливающим подзаголовком. Простое и эффективное оформление экрана.

Лендинг 9

Лендинг по продаже бытовок.

Лендинг по продаже бытовок

Фишка 1. Убойный УТП, «нашпигованный» преимуществами.

Фишка 2. При переключении кнопок видим, как представлена бытовка снаружи/внутри. При наведении на «+» показываются характеристики.

Лендинг 10. Hobbi-smoke.ru

Лендинг по продаже дымогенераторов.

Лендинг по продаже дымогенераторов

hobbi-smoke.ru

Фишка 1. Простой фон с фото дымогенератора с интересным заголовков и видео.

Фишка 2. Лид-магнит за контакты: Книга «19 рецептов холодного копчения».

Лендинг 11. Kroug.ru

Лендинг по продаже теплиц.

Лендинг по продаже теплиц

kroug.ru

Фишка. Заголовок и картинка красивой оранжереи.

Лендинг 12. Золотыепески.com

Лендинг по продаже домов.

Лендинг по продаже домов

золотыепески.com

Фишка. Сочное фото будущего места жительства и видео о коттеджном поселке.

Лендинг 13.

Лендинг по продаже сладких букетов.

Лендинг по продаже сладких букетов

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

Фишка 2. Сильное преимущество: вернем деньги, если не понравился.

Лендинг 14.

Лендинг по ремонту техники

Лендинг по ремонту техники

demo.heavenweb.ru/rextard-rem

Фишка. Яркий первый экран с реальным фото мастера.

Лендинг 15. Morewish.com

Лендинг по продаже аквариумов

Лендинг по продаже аквариумов

morewish.com

Фишка. Выделяющийся дизайн: иллюстрация и шрифт, стиль элементов.

Лендинг 16. Zavodagromig.ru

Лендинг по продаже сушилок

Лендинг по продаже сушилок

zavodagromig.ru

Фишка. Крутой оффер и подзаголовок с гарантией низкой цены.

Коротко о главном

Идеальный первый экран лендинга состоит из: уникального торгового предложения (УТП), логотипа, короткого описания компании, ревалентного изображения, призыва к действию и списка преимуществ.

Добавив к главного блоку инструменты в виде: виджетов, лид-магнита, технологии замены заголовка (мультилендинг), квиза и всплывающего окна, вы увеличите конверсию.

Размер лендинга разный для ПК и мобильных устройств. В первом случае контентная ширина — 1170 px с размерами от 1920px*1080 px до 1368*768 px. Во втором — от 360*640 px до 380*780 px.

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

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

Используй данную статью как руководство к действию или в качестве чек-листа для контроля работы подрядчиков.

Понравилась статья? Сохраняй в закладки нажатием клавиш: Ctrl + D