Сейчас такое время, что все постоянно куда-то спешат, некогда людям читать много текста, да и вообще читать не хочется, хочется просто визуально воспринимать информацию, по картинке за пол секунды сразу понять о чем идет речь, а если учитывать, что первое впечатление самое важное, то можно придти к выводу, что первый экран на лендинге должен «бить на повал», заинтересовывать, фокусировать внимание, по сути именно он продает, если с первых секунд не зацепить посетителя — то он потерян!
Думаю о важности первого экрана лендинга, вы уже поняли, какой бы классный дизайн и структура не были ниже первого экрана, человек их попросту не увидит, если закроет страницу после того как не увидит на первом экране того, что заставит его вникнуть в суть того, что ему тут «впаривают». Человек просто пойдет дальше, станет клиентом вашего конкурента, …но мы этого не допустим.
Глядя на изображение выше (лендинг продукта Nike) можно увидеть, что речь об очках, судя по одежде девушки спортивных, на ней логотип Найк, который привносит доверия к очкам, за счет знаменитости бренда, и всего одна кнопка, нет ничего лишнего (это одно из преимуществ лендинга над обычным сайтом, подробнее по ссылке). Понимаете, ваш мозг все это понял за доли секунды, конечно, не всегда можно показать продукт на столько просто, но это по сути максимально приближенный пример к идеалу.
Давайте теперь пройдемся по возможным составным первого экрана, который приведут к успеху. Во первых все зависит от конкретного случаю, но есть общие моменты, которые каждый раз нужно учитывать.
Во первых это графика, человек сначала видит ее, а потом все остальное, если будет «стремное» фото не в тему на фоне, то никакой продающий текст сайт не спасет.
Человек зайдя на сайт, сразу видит 2 момента: машины и коробку с тормозными колодками, машины создают нужное настроение скорости/экстрима, после человек уже замечает те самые колодки, когда он их видит он уже успел подсознательно представить себя за рулем той роскошной машины, он уже впечатлен. Вспышки в виде красных молний вокруг колес символизируют действие тех самых колодок, то-есть процесс молниеносного торможения, логотипы упоминаемые в тексте наложенные на автомобили в виде наклеек/аэрографии создают завершенную картину, дают понять, что эти машины тут не просто так.
Далее человек переходит к прочтению текста, благо его тут не много и вполне можно осилить не напрягаясь, заголовок сразу говорит, что тут продается и какое оно. Но человек уже знает это, он прочел на картинке уже этот текст, его невозможно не заметить благодаря своей необычности, текст вписан в иллюстрацию как ее неотъемлемая часть. К слову, этот фактор играет большую роль, поскольку текст создает впечатление «дороговизны», он будто на полу, на него падают тени от автомобилей и свет пробивающийся между ними.
Последний элемент — кнопка «Подробнее», она дает понять что это явно не весь сайт, прокручивай ниже или жми на меня.
Почему тут нет номера телефона? Потому что информации недостаточно, для принятия решения, зачем тогда отвлекать внимание в этот момент, кнопка заказа обратного звонка появится если крутануть колесико мыши.
Все просто, лаконично, ничего лишнего, уже есть логотип призванный повысить узнаваемость бренда (тут он уже уместен), есть сразу меню с навигацией, которое дает понять что ждет дальше при прокрутке, и возможность направится сразу на нужный блок, заголовок и кнопка скачать это приложение.
Думаю понятно, что зайдя на такой лендинг, человек увидит дом и под ним деньги, ясно что тут будет идти речь о стоимости дома, из заголовка вытекает что это выкуп недвижимости да еще и срочный в таком-то городе, все сразу понятно, далее самые важные преимущества, что бы зацепить. Форма так же представлена сразу на первом экране, пусть человек не ознакомившись с остальными условиями и не станет ее заполнять, но теперь он знает, что она есть и ее легко найти и заполнить, вверху так же навигация по блокам и номер телефона, с учетом что эта полоска с меню закреплена в вверху (при прокрутке всегда видна), то навигация и номер телефона лишними точно не будут, логотип конечно никто не запомнит, но он уравновешивает правую сторону композиции и дает все таки какую-то капельку доверия, за счет своего присутствия.
Подведем итоги: красивая графика которая соответствует продукту/услуге представленной на сайте — необходима, так же нужно избавится от всех лишних элементов, оставить только важное. Конечно, самому сложно спроектировать такую композицию, да и результат явно будет не самым лучшим в виду отсутствия опыта, поэтому если вы намерены зарабатывать на своем бизнесе, а не учится дизайну, то обращайтесь к специалистам, которые смогут качественно решить вашу задачу.
Еще примеров первого экрана можно посмотреть в моем портфолио: ArtStranger.ru