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

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

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

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

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

Первый экран

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

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

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

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

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

На вымышленном лендинге услуги корректорской вычитки поставили понятный офер и призыв к действию
На вымышленном лендинге услуги корректорской вычитки поставили понятный офер и призыв к действию

Чем мы поможем

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

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

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

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

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

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

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

Для кого

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

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

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

Как это работает

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

Этапы можно оформить списком с иконками, блоками или в формате карты
Этапы можно оформить списком с иконками, блоками или в формате карты

Стоимость

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

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

Мы придумали три тарифа для шаблона лендинга
Мы придумали три тарифа для шаблона лендинга

Отзывы

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

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

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

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

Кейсы

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

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

Добавили кейсы и оставили в них ссылки на статьи, чтобы клиенты могли посмотреть на готовые материалы — оценить работу и примерить форматы на себя
Добавили кейсы и оставили в них ссылки на статьи, чтобы клиенты могли посмотреть на готовые материалы — оценить работу и примерить форматы на себя

Клиенты/партнеры

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

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

FAQ

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

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

Блок с призывом к действию

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

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

Оставили простую форму для заказа вымышленной услуги: имя, email и поле для вопроса. Если клиент захотел бы связаться напрямую, то смог бы написать нашему менеджеру по продажам в Телеграм
Оставили простую форму для заказа вымышленной услуги: имя, email и поле для вопроса. Если клиент захотел бы связаться напрямую, то смог бы написать нашему менеджеру по продажам в Телеграм

Подвал

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

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

4848
14 комментариев

Ребят, а как вы оцениваете ценность заголовков на ваших лендах? Какой глубокий смысл/пользу закладываете в заг «Тарифы», например?

И ещё, не думали, что вместо подобного «кирпича», как на скрине, можно часть смысловой нагрузки унести в заголовок (который вообще «пустой»), сделать его полезнее. А не пулять в пользователя такой порцией текста?

А ведь бизнес читает это и думает, что именно так и нужно делать🤦

1
Ответить

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

Есть встречный вопрос: а какой глубокий смысл стоит заложить в блок с тарифами или стоимостью? Заходит человек на сайт фотографа, ему нравятся примеры фото, которые сразу встречают его на сайте, думает: «вау, хочу себе такую фоточку, где тут цены?». И ищет раздел или заголовок «Стоимость» / «Цена» / «Тарифы». Это достаточно прикладной раздел, который нужно просто увидеть и быстро найти. В нем нет глубокого смысла) он там не нужен) все просто

Ценность этого заголовка в том, что он навигирует, показывает, где искать ответ на вопрос. То же самое с «мы поможем».

2
Ответить

На блоке "кейсы" в большинстве случаев ступор. Но это важная часть сайта, потому что читатели могут узнать себя в этих историях. Вот простой состав блока кейсы, к которому мы пришли: взять 3-5 выполненных проектов, написать 1. какая задача стояла в каждом, 2. что было сделано и 3. что из этого вышло

1
Ответить

Владимир,
может с т.зр пользы для клиента пункт 3 вынести в заголовок кейса?
Чтобы сразу видел свой интерес...

1
Ответить

Так не хочется же шаблонно делать 😞

Ответить

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

Ответить