Как самому сделать прототип лендинга для услуги? Рассказываем про базовые блоки и дарим готовый шаблон

Мы в редакции «Рыба» делаем много лендингов для самых разных компаний. И кое-что в этом понимаем. Рассказываем, какие блоки обязательно стоит добавить на лендинг услуг, чтобы он приносил конверсии. Для наглядности собрали шаблон лендоса в Фигме — забирайте себе, чтобы проще было делать прототипы для своих услуг.

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

Мы подготовили шаблон, который можно использовать для создания прототипа лендинга. Переходите по ссылке и копируйте себе. Для этого нажмите на стрелку возле названия → Duplicate to your drafts. В скопированном прототипе можете менять текст, картинки и элементы под свои услуги.

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

Шапка. Сделайте ее минималистичной: разместите логотип, название бренда, меню и контакты. Меню на лендинге можно спрятать в «гамбургер» — три полоски — или показать основные блоки, например тарифы и кейсы.

Офер. Сильный заголовок, который решает проблемы пользователя, — самый важный элемент на первом экране. Например, офер маркетингового агентства может быть таким: «Увеличиваем продажи вашего бизнеса с помощью рекламы и SEO». А чтобы раскрыть и усилить предложение, можно добавить подзаголовок — прописать преимущества и выгоды работы с вами. У маркетингового агентства подзаголовок может быть таким: «Все затраты на маркетинг рассчитаны и предсказуемы». Это успокоит пользователя: здесь работают по расчетам, а не наугад.

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

Призыв к действию. Чтобы пользователь смог совершить целевое действие, добавьте кнопку с понятным призывом к действию или форму обратной связи. Например, «Заказать лендинг» или «Записаться на прием». По кнопке может открываться форма обратной связи или соответствующий блок лендинга.

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

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

В этом блоке нужно рассказать, что такого классного получит клиент, если обратится именно к вам, — какие плюшки отличают вас от конкурентов. Важно не использовать шаблонные формулировки типа «высокое качество» или «работаем по договору». Так пишут многие, поэтому выглядит это неправдоподобно и неинтересно.

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

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

Если услуга простая и подходит всем, то можно не делать этот блок на лендинге. Вымучивать формулировки и искать уникальность там, где ее нет, не стоит. Это работает и в обратную сторону, когда услуга не для всех. Тогда лучше указать это сразу, чтобы пользователи не тратили время на изучение предложения.

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

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

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

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

Если услуга новая и отзывов нет, попробуйте протестировать ее на своей команде или пригласите друзей в тест-группу, чтобы они попробовали и оставили фидбэк. Например, мы так сделали для лендинга курса «Фигма для авторов» — в блок с отзывами добавили комментарии с закрытого тестирования.

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

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

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

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

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

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

Обычно этот блок размещают в конце лендинга перед подвалом. Если страница получается объемной, то можно поместить призыв к действию еще где-то в середине, например после блока с преимуществами. Главное — не переусердствовать: когда призыв «заказать» стоит после каждого блока, это может вызвать негатив.

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

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