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

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

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

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

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

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

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

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

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

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

Заказать разработку
лендинга от 70 т.р.

Подробнее

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

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

Какие элементы 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 пикселей) текст должен оставаться читабельным, а изображение - сохранять высокое разрешение.

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

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

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

Получи 600 рублей на счет по ссылке
30 дней бесплатного использования

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

Осторожно! Можно зачитаться

Нажми сюда, чтобы получить больше заявок!