Как создать сайт.

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

Именно эти элементы формируют первое впечатление посетителя вашего сайта:

Именно на них нужно фокусироваться, когда вы создаете сайт. Разберём каждый из элементов — какую задачу выполняет, где на первом экране расположить, как правильно написать или оформить.

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

В заголовке обязательно должен присутствовать сам товар/услуга + описание выгод.

Услуга: банкротство физлица
Выгода: 100% сохранение капитала

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

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

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

В формуле 4 элемента:

В полезности доносим пользу или результат от товара или услуги.
В уникальности конкретизируем полезность в цифрах: например,
в рублях (размер скидки или сэкономленная при использовании продукта сумма). В срочности обозначаем точный срок, в который покупатель получит товар или услугу. В специфичности показываем отличительные черты по сравнению с конкурентами (например, работу по определенной локации — «доставка по Перми»).

Из этих четырёх элементов и нужно составлять заголовок. Формула 4U хороша тем, что в одном заголовке мы показываем сразу несколько выгод и преимуществ для клиента. Давайте посмотрим на примеры таких заголовков, чтобы вы точно поняли что к чему:

Суть этого метода в давлении на эмоции посетителя, ведь подсознательно люди хотят тратить меньше усилий и получать больший результат.

Этот метод мы уже использовали, когда говорили о формуле 4U. Соберите сильные стороны предложения и заголовок выстрелит.

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

Задача подзаголовка — раскрыть и дополнить заголовок, дать посетителю сайта больше ценности. В подзаголовке может располагаться призыв к действию (маркетологи называют это Call to action), который должен подтолкнуть человека нажать на кнопку, которая обычно располагается ниже подзаголовка.

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

Используя этот подход вы гарантированно напишете хороший подзаголовок. Разберём на примере сайта, который продаёт строительство бани.
​
Заголовок:
Получите готовую баню всего за 2 недели. Строим в Перми и Пермском крае.

Теперь давайте напишем подзаголовок к этому заголовку по формуле «Глагол + Выгода + Дедлайн»:

Вот что получилось:

Ниже подзаголовка располагается кнопка с призывом к действию. Тут правила такие:​

— призыв на кнопке должен быть отглагольным: «Оставьте заявку», «Получить проект», «Скачать каталог»
​
— сама кнопка должна быть контрастного цвета и бросаться в глаза
​
— текст на кнопке должен легко считываться. Если кнопка жёлтая — используйте черный цвет для текста. Если кнопка красная, зелёная или синяя — хорошо подойдёт белый цвет текста.

При нажатии на кнопку будет открываться форма обратной связи — как её сделать мы рассказываем в статье «Как быстро сделать сайт из шаблона. Подробная инструкция».

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

— или визуально дополнить преимущества, описанные в заголовке — например, показать товар лицом, или показать фото с выполненных объектов, или представить результаты услуги (если это курс похудения — фото «до» и «после»)
​
— или ещё сильнее надавить на боль клиента, обозначенную в заголовке. Если в заголовке написано: «Надоел лишний вес? Начались проблемы со здоровьем? Решите эту проблему за 7 недель», тогда на иллюстрации можно показать человека с выпирающим животом. Ещё пример: «Хватит ходить с разбитым экраном. Починим экран вашего смартфона за 2 часа», на картинке показываем фотосравнение «До/После», чтобы вызвать эмоцию: «Да, действительно, хватит, мне надоели эти уродские трещины на экране».

На первом экране можно разместить:

С одной стороны, всё просто — у вас есть товар и его нужно показывать потенциальным клиентам. Но тут важно учесть ряд моментов:
​
— если вы торгуете товаром известного бренда и фото продукции легко найти в интернете — не используйте вылизанные, рафинированные снимки. Они не вызовут доверия, посетители сайта поймут, что это фото из сети. Лучше заморочиться и сделать собственные снимки. Хватит современного смартфона и нормального освещения. Лучшим кадром будет снимок, на котором вы будете стоять рядом с огромным стеллажом упакованной или частично распакованной продукции. Клиенту сразу будет видно: «У них есть склад, много товара, а вот и сам предприниматель. Это настоящие, живые ребята, они не боятся показывать своё лицо. Наверное, им можно доверять»
​
— если важен не сам продукт, а эффект от его использования — тогда показывать продукт не ваш вариант.

Здесь чуть проще — покажите процесс использования вашего продукта / услуги или результат. Например, готовый дом. Или красивый маникюр.
​
Повторимся: используйте собственные фото или видео. Если у вас есть товар или вы предоставляете услугу, тогда вам не составит труда показать процесс использования товара / оказания услуги.

Разберёмся когда лучше показать себя или вашего сотрудника, а когда клиент станет лучшей иллюстрацией вашей полезности для клиентов:

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

Банальный пример — строительные бригады. Что вы представляете, когда вам говорят «Строительная бригада?». Дайте угадаем: несколько грязно одетых мужчин, кто-то в каске, кто-то без, волосы растрёпаны, все в строительном мусоре. А еще они постоянно матерятся, косячат и кидают заказчиков на деньги.

Что-то из того, что мы написали выше — это стереотип, а что-то вполне настоящие реалии рынка. Если вы делаете сайт для строительной бригады, тогда вам нужно закрывать эти боли клиента: «А вдруг меня кинут?», «А если они будут постоянно косячить?», «А если они у меня на объекте будут бухать?».

Как закрыть эти боли и снять опасения? Да просто показать бригаду профессиональных строителей, которые нормально выглядят (не нужно наряжать их в белоснежные рубашки) и всем своим видом говорят: «Нам можно довериться». В идеале снять видео, на котором будут кадры и со всей командой в сборе, и с процессом работы каждого строителя.

Разберём другой пример, когда решает персона человека, который предлагает услугу. К примеру, есть услуга помощи женщинам после развода. Так вот, на первом экране лендинга также можно показать женщину психолога — фото должно быть таким, чтобы этому специалисту захотелось довериться. Рядом с ней разместить на фото прямую речь, которая будет закрывать боли клиента: «Я помогу вам справиться с процессом развода. Для вас это начало новой жизни — я расскажу как её начать и поддержу вас в любую минуту».

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

Пример: курсы похудения. С разрешения клиента показываем фото «до/после» — если человек зашел к вам на сайт, то он тоже хочет избавиться от лишнего веса («до») и стать похожим на человека «после».

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

Снова вернёмся к фундаменту любой маркетинговой активности: «Какие боли у клиента? Что поможет ему эти боли закрыть? Почему он захочет довериться нам?». Кто идёт за услугами к директологу? Те, кто не умеют настраивать директ сами или те, кто уже пробовал, но результаты были фиговые. Смотрим глубже — фиговые результаты это какие? Нет заявок, дорогие клики, слили бюджет, низкий CTR.

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

Если вы делаете на компьютере крутую работу, которую можно заскриншотить, и этот скриншот будет показывать ваши крутые результаты — такой способ вам вполне подойдёт.

Конечно, такая ситуация — не круто. Но картинку-то надо откуда-то брать, поэтому держите ссылки на бесплатные фотостоки:

— unsplash.com — здесь можно скачивать графику даже без регистрации. Нюанс: когда будете искать картинку, в поле поиска вводите запрос на английском языке. Если нужно найти фото с деревьями, пишите «tree»

— в конструкторе сайтов mottor есть встроенная библиотека изображений и иконок. 

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

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

Располагается в верхнем левом углу сайта. Не делайте их слишком крупными и яркими, чтобы они не отбирали внимание посетителя от ключевых элементов: заголовка, подзаголовка и кнопки.

Если логотипа нет — напишите только название, наличие логотипа на сайте не критично.

Дайте клиентам удобный способ связаться с вами — разместите в шапке (верхняя часть страницы) сайта ссылки на популярные мессенджеры. Предложите несколько вариантов: Viber, WhatsApp, Telegram.

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

Мы в конструкторе сайтов mottor каждый день отсматриваем сотни сайтов, которые создали наши пользователи. Уже на опыте точно можем сказать, какие первые экраны отлично себя зарекомендовали, а какие — нет.

Далее мы покажем хорошие примеры первых экранов и объясним почему они приносят заявки и клиентов своим создателям. Важно: все сайты собраны на конструкторе сайтов mottor.

Почему это хороший первый экран:

— сразу в глаза бросаются ключевые смыслы: картинка загранпаспорта, «Загранпаспорт» в заголовке. Это якорь, который удерживает посетителя на сайте, потому что он уже точно понимает, что этот сайт решает его задачу — получить загранпаспорт
​
— хороший оффер: «Не нужно никуда ходить. Пришлите нам документы и потом приходите за готовым паспортом в Миграционную службу»
​
— большая и яркая кнопка призыва к действию
​
— есть контактный номер телефона с графиком работы.

еврогрядка.рф

Почему это хороший первый экран:

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

4brain.ru

Почему это хороший первый экран:

— минималистичный, светлый дизайн, очень приятная цветовая палитра
​
— оффер в данном случае расположен в подзаголовке, а в заголовке обозначена тематика сайта. Кому интересно прокачивать soft skills, поймёт о чем речь
​
— контрастная кнопка «Получить скидку», на которую так и хочется нажать.

nopaper.ru

Почему это хороший первый экран:

— на экране нет ничего, кроме четко обозначенной ценности для пользователя
​
— ценность передаётся в заголовке, в подзаголовке раскрывается подробнее
​
— ничего лишнего — только оффер и кнопка «Получить доступ»