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

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

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

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

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

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

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

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

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

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

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

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

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

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

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