Структура одностраничного сайта

Дата публикации: 23-06-2021       1187

Если дизайн при создании одностраничного сайта требует индивидуального подхода, то структура таких страниц имеет несколько важных правил, которым необходимо следовать.

  1. Название - суть предложения должна быть точно сформулирована. Заголовок должен отличаться лаконичностью и привлекательностью. Иногда используется небольшой подзаголовок, когда необходимо уточнить некоторые детали.
  2. Логотип - логотип компании должен быть размещен на первом экране, чтобы у посетителя сформировались ассоциации и подсознательное отношение к бренду.
  3. Обратная связь - размещение номера телефона, электронной почты или текущего адреса на первом экране является обязательным условием. Часто клиент не хочет изучать всю структуру сайта, а хочет сразу перейти к оформлению заказа. Позвольте ему или ей сделать это быстро.
  4. Презентация продукта - поместите на второй экран высококачественную фотографию или видео вашего продукта/услуги и опишите преимущества рядом с ним. Если вы решите перенести информацию о преимуществах на следующий экран, найдите баланс между количеством и качеством информации. Не перегружайте информационное поле вашего посетителя огромным текстом.
  5. Перечислите собственные преимущества - как только потенциальный клиент заинтересуется вашим продуктом, вы должны убедить его, что ваша компания делает это лучше/быстрее/более профессионально и т.д.
  6. Призыв к действию - на последнем экране мы размещаем элемент "Призыв к действию". Это текст, который мотивирует посетителя немедленно заказать товар. Часто используют маркетинговый трюк "Эффект срочности": ставят таймер и предлагают выгодную скидку, если вы купите товар до истечения времени.
  7. Лид-окно - это форма, используемая для сбора контактов от посетителей. Нет необходимости делать его объемным. Чаще всего используются 3 поля: имя, номер телефона, электронная почта.

В дополнение к основным элементам дизайна можно добавить дополнительные:

  • ответы на вопросы;
  • дисконтные предложения;
  • социальное обучение;
  • уведомления о подарках и другие.

Продающая структура лендинга — это 8 основных экранов

Давайте перейдем к разработке структуры вашей идеальной целевой страницы?

Первый экран лендинга

Первый экран - это блок до так называемой линии сгиба, то есть то, что пользователь видит на экране сразу после загрузки страницы, еще без прокрутки вниз.

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

Яркой иллюстрацией является сайт Сбербанка, посвященный персональным стипендиям. Он предназначен для тех, кто уже знаком с компанией (а кто не знаком?). Здесь есть короткий привлекательный заголовок, интригующий подзаголовок и кнопка CTA ("Готов попробовать"), дополненная логотипом кампании.

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

Демонстрация продукта или услуги

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

Например, вот лендинг интернет-магазина экзотических фруктов. После первого экрана им сразу же показывают готовые наборы на выбор:

Блок с формой обратной связи

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

На самом деле, такой блок с формой обратной связи желателен для многократного размещения на сайте.

Преимущества

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

Это было реализовано очень интересным образом на сайте 7Devs, студии, занимающейся разработкой мобильных приложений. Каждому преимуществу посвящен отдельный экран с интересной иллюстрацией и подробным описанием.

Блок с ценами

Конечно, увидев предложение и узнав о его преимуществах, посетитель уже спрашивает себя - сколько это стоит? Пришло время рассказать ему об этом.

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

Блок с отзывами

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

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

Футер

Футер, или как его называют на сленге "подвал" сайта. Это отдельный тематический блок, расположенный в нижней части. В нем также содержится различная контактная информация, адреса. Часто они дают информацию о регистрации.

Чем важен заголовок

Этот элемент вашей целевой страницы имеет решающее значение. Не ленитесь и уделите ему внимание, которого он заслуживает. Действительно, важно каждое слово без исключения.

Заголовок на странице должен продавать и ничего больше!

Каким должен быть результат:

  1. После прочтения заголовка пользователь получает некое сообщение, которое поможет ему понять, что предлагает данная страница. Краткость и однозначность.
  2. Заголовок должен отличать вас от конкурентов. Она должна привлекать внимание и вызывать желание ознакомиться с предложением более подробно.
  3. Заголовок должен отражать основные преимущества покупки товара, использования услуги или подписки.
  4. Иногда используйте подзаголовки в дополнение к основному заголовку. Это не обязательно, но такая транскрипция может быть полезна, если вам нужно описать сложный продукт. В этом варианте лучше всего поместить заголовок в виде вопроса, а в подзаголовках описать преимущества продукта.

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

Заголовок - это "одежда", по которой посетитель судит об известности вашего сайта.

Одна страница – одна цель

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

Важные правила:

  1. Выделите основные преимущества и сосредоточьте на них внимание посетителя.
  2. Выберите самую простую и понятную форму представления информации.
  3. Используйте списки и пули, привлекайте внимание заголовками и четкими иллюстрациями.

Акцентируйте внимание посетителя на вашем продукте, его преимуществах, расскажите о выгодах сотрудничества с вами. Не забудьте напомнить о целевом действии. Страница обычно занимает от 5 до 10 экранов, и "прокручивать" ее до первого или последнего в поисках кнопки "купить" или "подписаться" большинство людей не будет.

Рассказать друзьям:

Cделайте первый шаг

Выберите готовый шаблон из более 1800+ бесплатных и премиум вариантов.

ШАБЛОНЫ САЙТОВ