- Введение
- Краткий обзор всего сайта.
- Этапы разработки сайта
- бриф на разработку сайта
- как сделать прототип сайта
- дизайн продающего сайта в Figma
- Сколько стоит сайт
- Конверсионные элементы на странице. Главная страница
- Обзор лендинга “Все на четыре на 4”. Конверсионные элементы на странице одной услуги.
- Конверсионные элементы на странице. Лендинг “Брекеты”.
- Обязательные страницы.
- Заключение
Как сделать продающий сайт в 2024
Введение
В этой статье мы рассмотрим большой, многостраничный, продающий сайт, в котором есть все фишки, попапы, все инструменты для того, чтобы сайт давал заявки и увеличивал продажи. Я расскажу про все этапы разработки этого сайта: от идеи до готового сайта.
Это большой, многостраничный сайт, который имеет ряд внутренних лендингов, страниц, множество интерактивов, калькуляторов, попапов, подсказок… Это всё влияет на конверсию! Мы с командой разработали этот сайт для стоматологической клиники. 7 лет нашего опыта мы упаковали в этот сайт и теперь готовы поделиться им с вами.
В этой статье я дам пошаговый алгоритм, как вы можете взять наш опыт и разработать такой сайт. Вы поймете:
- Как правильно формировать структуру сайта;
- Какие элементы использовать;
- Какой должен быть дизайн;
- Как сайт устроен внутри и многое другое…
Меня зовут Александр Дейнека, я руководитель веб-студии Парадигма-вебсайт. Я расскажу вам как разрабатывать продающие сайты правильно в 2024 году и чтобы эти сайты минимум 5 лет были номером один на рынке.
Краткий обзор всего сайта.
Давайте бегло пробежимся по сайту:
Главная страница
Тут есть главный экран, на котором уже мы видим множество элементов:
- ссылки на мессенджеры: WhatsApp и Telegram;
- отзывы;
- рассчитать цену онлайн;
- кнопки “записаться на прием к врачу” и “узнать стоимость”;
Листаем ниже, выскакивает подсказка “диагностика”, автовоспроизведение видео… В этом сайте есть много тенденций, которые будут набирать популярность в разработке сайтов и об этом я буду всё рассказывать дальше.
Далее мы видим команду врачей. В общем, много других интересных фактов, услуг и преимуществ именно этой стоматологической клиники.
На этом сайте у нас порядка двадцати лендингов. Я расскажу вам как мы эти лендинги делали, как мы их рисовали - обо всём и по порядку.
Этапы разработки сайта
- Бриф на разработку сайта
Самый первый этап при разработке сайта - это маркетинговое исследование. Нам нужно стать экспертом в бизнесе клиента, таким же как он сам эксперт в своем бизнесе! Для этого мы задаем ряд вопросов, проводим интервью, клиент заполняет бриф - текстовый документ в виде таблицы, которая содержит всю ключевую информацию о компании. И чем подробнее клиент заполняет бриф, тем больше мы получаем от него информации, тем глубже мы начинаем копать, мы понимаем кто его конкурент, понимаем сегмент, в котором он работает, аудиторию, какие боли у этой аудитории, какие выгоды… То есть, собираем полную информацию. Это называется маркетинговое исследование.
- Как делать прототип сайта
На следующем этапе все тексты, всю историю, которую мы собрали, упаковываем уже в прототип, то есть в чёрно-белые варианты страниц.
Вот они все эти странички, их здесь много:
Обратите внимание, я расскажу и покажу какие должны быть страницы у продающего сайта.
Главная страница
Начнём с главной страницы.
Мы поняли кто целевая аудитория, на какой рынок работает клиент и начали формировать структуру сайта, располагать меню, писать заголовки, видео подсказки, кнопки, блоки…
И таким образом, на главной странице мы проработали все те боли, что есть, разместили ту информацию, которая интересует аудиторию в первую очередь. Понятно что есть много вопросов, но чтобы сайт зацепил, нужно давать то, что людям интересно, то, что они чаще всего спрашивают, когда хотят заказать услугу, звонят по телефону и задают вопросы прежде, чем прийти. Мы это упаковали в главную страницу.
Услуги
У компании, которая занимается стоматологическими услугами, есть ряд услуг. Давайте посмотрим какие:
- лечение зубов;
- имплантация зубов;
- “Все на четыре”;
- отбеливание;
- брекеты;
- лечение дёсен;
- виниры;
- реставрация;
И так далее…
На каждую услугу мы сделали свой Landing-page.
У нас есть Главная страница в виде лендинга.
А так же есть отдельные страницы на каждую услугу: “Все на четыре” - свой landing-page, со своим заголовком “Верните зубы всего за 1 день по технологии Все-на-4 с пожизненной гарантией”.
Следующая услуга и следующий landing-page “Лечение зубов во сне” и заголовок “Забудьте о страхе и боли с безопасным лечением зубов во сне”.
Еще услуга и еще landing-page “Элайнеры”. Заголовок: “Получите идеальную улыбку на всю жизнь с помощью невидимых элайнеров”.
Следующий landing-page “Брекеты”. Заголовок: “Получите идеально ровную улыбку на всю жизнь”
Мы понимаем боль потенциального клиента данной стоматологической клиники, мы понимаем услугу, которую он хочет получить, и мы делаем страницу, так называемую, длинную страницу, которая рассчитана конкретно под брекеты, под элайнеры, под лечение зубов во сне, под имплантацию… И так далее. Чем больше лендингов, тем лучше клиент видит ответ на свой запрос, тем быстрее оставляет заявку.
Мы проработали все эти лендинги. Их достаточно много. Это был большой объем работы.
Квиз-сайты
Также в каждом лендинге у нас присутствует свой квиз-сайт. Для каждого квиз-сайта проработан отдельный список вопросов:
- На какую челюсть нужны брекеты?
- Хотим чтобы вы знали…
- С какой целью хотите поставить брекеты?
- Какие брекеты вы хотите?
- Интересует ли вас беспроцентная рассрочка на лечение?
- и так далее…
На каждом квизе есть свои вопросы. То есть у нас есть 23 лендинга и 23 квиза, в рамках одного сайта.
Внутренние страницы
Также, у нас есть внутренние страницы.
Для чего делается многостраничный сайт? - Первое и основное - это получать клиентов с SEO трафика! Чем больше страниц у сайта, тем сайт выше двигается над конкурентами и набирает первые позиции в Яндексе. Поэтому мы получаем SEO трафик. И второе - с рекламных кампаний. Но для SEO трафика должны быть не только лендинги, но и внутренние страницы. Плюс необходимо закрывать возражения.
В рамках продающего сайта, внутренние страницы должны быть следующие:
- Страница Услуги - это такая страница-прокладка, на которой посетитель сайта выбирает услугу из списка доступных, нажимает на нее и попадает на отдельный лендинг с подробной информацией, которая его интересует.
Здесь можно увидеть все услуги стоматологической клиники. Всего их 23!
- Страница Врачи - на этой странице перечислены все врачи: ФИО, в какой области специализируется, какой трудовой стаж имеет, информация об услугах, которые оказывает…
- Отдельная карточка врача. Выбрав любого из врачей, можно перейти в карточку и провалиться уже в в лендинг врача, где про данного специалиста подробно всё рассказано, есть видео презентация, есть примеры работ “до/после”, есть отзывы, благодарности. То есть, вся необходимая информация про конкретного врача.
- Далее, у нас есть внутренняя страница цены на каждую из услуг.
- Затем, у нас есть акции.
- Примеры работ - примеры работ “до/после” у нас расписаны в виде кейса:
- что было в начале;
- провели исследование;
- установили импланты;
- постоянный мост;
- результат;
- лечащий врач
Наш кейс выполнен как лендинг, ведь людей, которые планируют заплатить 300.000 рублей за имплантацию зубов, явно интересует как происходит процесс работ, из каких этапов состоит и на какой результат они могут рассчитывать… Поэтому мы сделали такой кейс и внутри сайта есть возможность добавлять такие кейсы.
- Также, у нас есть страница с отзывами.
- Адреса клиник - страница Контакты.
- Функционал блога - так называемых статей с интерактивами. (Чуть позже я это покажу уже всё в реализации).
- Страница Благодарности.
- 404 - страница “Ошибка”.
- Квиз-сайт.
- Страница О компании.
Наличие всех этих страниц обязательно на вашем продающем сайте!
Исходя из специфики вашего сайта, дополнительные страницы могут быть следующие: “Доставка”, “Оплата”, “Как заказать”, “Рассрочка”... Возможно, организации требуются сотрудники и тогда будет актуально наличие страницы “Вакансии” на сайте. Такие технические страницы можно добавлять, согласовав предварительно с клиентом весь маркетинг.
3. Дизайн продающего сайта в Figma
Мы перешли к следующему этапу - это разработка веб-дизайна.
Всё, что мы нарисовали в прототипе, нам нужно было реализовать в веб-дизайне. Мы пользуемся Figma, поэтому я покажу вам как мы начали рисовать наш проект.
- Мы сделали концепт первого экрана.
Стоит отметить, что клиент сделал крутую фотосессию и все фотографии, использованные в проекте - их настоящие, а не взяты из интернета. Все фотографии реальны!
- Далее, мы проработали меню, и то, как должно выглядеть в мобильной версии.
- Мы сделали мобильную, понятную версию сайта.
Здесь видно что логотип, меню, кнопки, шрифты большие, ничего мелкого нет, потому что 75-80% трафика будет идти с телефона. Поэтому использование сайта с телефона должно быть ещё более удобным, чем с компьютера. Получается, что все смыслы мы делаем в десктопной версии, но также рисуем мобильную версию.
Вот как мы сделали мобильную версию:
Врачи, цифры
Свайп - понятно, что по стрелочке слайдер с врачами листается. Сверху показано какое количество элементов в слайдере.
Форма скачивания инструкции на WhatsApp, кнопка отправить, иконка WhatsApp
Открытое меню, как оно выглядит в десктопной версии
Внутренние страницы
Также сделали вопросы квиза подробно
То есть, все страницы и все элементы мы отрисовали.
Что немаловажно, мы отрисовали не только внутренние страницы, но мы сделали еще дополнительно Лид-магнит “Как выбрать стоматологическую клинику”.
В результате, у нас есть такой захват, что человек не оставляет заявку, но скачивает такой файл “Как выбрать стоматологическую клинику”, получает действительно правильную и полезную информацию, которая ему необходима. Это помогает формировать общее положительное впечатление о компании и от пользования сайтом. Мы также это отрисовали. В конце есть призыв записаться.
Обратите внимание каждый лендинг со своим смысловым, фоновым изображением, со своим оффером, своими преимуществами и историей: лендинг Брекеты - показываем брекеты; лендинг Отбеливание зубов - показываем белые, ровные зубы, красивую улыбку… и так далее.
То есть каждый лендинг мы проработали полностью и отрисовали, как отдельную страницу.
Это весь дизайн. В конце этой статьи будет ссылка, можно перейти на behance и посмотреть историю того, как мы рисовали этот проект.
Сколько стоит сайт
Мы рассмотрели как проводится маркетинговое исследование, как составляется прототип сайт и создается веб-дизайн. А теперь, представьте какой это колоссальный объем работы!
Поэтому всем, кто задается вопросом “А почему сайт стоит не 5.000 российских рублей?”, вероятно, стоит задать себе и другой вопрос: “А станет ли команда, которая делает такой проект несколько месяцев, работать всего за 5.000 руб?” - Конечно же нет! Поэтому такие сайты делаются долго, они стоят дорого, но это фундаментальный подход, чтобы один раз сделать и навсегда забыть о том, что мы плохо представлены в Интернете, у нас нет заявок, у нас нет клиентов, у нас кривой сайт, мы проигрываем конкурентам, мы теряем трафик… И многое другое.
Сделав такой сайт, вы получаете:
- всё доверие клиента;
- вы получаете максимальное количество заказов, заявок, потому что на вашем сайте есть все конверсионные фишки, про которые я сегодня расскажу;
- такой сайт минимум на 5 лет вперед будет обеспечивать вас потоком лидов 24/7;
Конверсионные элементы на странице. Главная страница
Сейчас я подробно расскажу и покажу какие элементы, с точки зрения маркетинга, вы должны и можете использовать на своем сайте для достижения максимального результата конверсии лида в заявку.
Главная страница должна иметь максимальное множество конверсионных элементов. Максимальное множество.
Что я имею в виду?
Обратите внимание сколько у нас кнопок:
- Кнопка “заказать консультацию” - при нажатии на нее происходит целевое действие, всплывает окошко. Мы спрашиваем только номер телефона. Не стоит использовать поле “имя”, “дата рождения”, “email”, “адрес”, “когда готов придти”... Ничего лишнего. Важно быстрее получить заявку, дальше мы можем связаться с клиентом и всё это уточнить в телефонном разговоре.
- Дальше у нас есть месенджер - одна из конверсионных фишек, которые мы начали использовать - писать цифру 1. Эта цифра мелькает перед глазами красным, как будто бы там что-то есть, как будто бы кто-то что-то написал. По клику на этот элемент осуществляется заявка.
- Telegram
- номер телефона
- время когда можно связаться
- рейтинг на картах
- справа у нас есть рассчитать цены онлайн
- квиз калькулятор
- два целевых действия: “записаться на первичный приём” и “узнать стоимость по WhatsApp”
Семь конверсионных элементов на главном экране!
Как вы думаете, если человеку нужно лечение зубов срочно, быстро ли он оставит заявку? Я думаю, оставит либо здесь, либо начнет листать сайт, а потом вернётся. А шапка сайта будет на всех страницах сайтах одинаковая. Явно, он куда-то кликнет или позвонит.
Затем на Первом экране мы показываем:
- фоновое изображение стоматолога, который лечит зубы, оффер “Безболезненные стоматологические услуги с использованием самых современных методов лечения”;
- подзаголовок “Прозрачный договор на все виды услуг без скрытых платежей”;
- после чего, “собственная техническая лаборатория”
- “только стерильные инструменты”;
- закрываем преимущества: “ личный куратор” и “рассрочка”
И сразу же такой интерактив - это воспроизведение видео. У людей всегда глаз должен цепляться за видео. Если сайт статичный, как газета, его скучно читать, он не цепляет глаз.
Вторым экраном у нас автовоспроизведение видео, что автоматически повышает уровень доверия этому сайту.
Заголовок “помогаем даже в тех случаях когда другие клиники бессильны” подчеркивает, тот факт, что мы готовы помочь даже в самой сложной ситуации, даже тогда, когда другие отказались. Подчеркивает, что у нас достаточный уровень профессионализма, который позволяет демонстрировать качество наших услуг не хвалебными словами, а действиями.
Все эти заголовки мы прорабатываем особенно тщательно. Это самое ценное в сайте - прописать заголовки так, чтобы они цепляли клиента, чтобы он хотел читать сайт дальше и в конце хотел обратиться к нашей компании. Мы рассказываем про наш подход. Это и есть маркетинг на нашем сайте.
Далее, кликаем на видео - воспроизводится.
Команда ассистентов и кураторов, фотография команды, заголовок.
Круто когда есть заголовок и его смысл сразу же подтверждается изображением. Кнопка “подробнее о клинике”
Дальше показываем врачей. Можно перейти в карточку этого врача, либо посмотреть видео. Нажав на плеер, у нас воспроизводится реальное видео реального врача в стоматологической в клинике. Круто! Что может быть лучше? Я думаю, ничего.
Далее, “скачайте инструкцию как как выбрать клинику”. Эту инструкцию мы также отрисовали для клиента. Человек вписывает свой номер телефона и получает файл на WhatsApp.
Показываем все наши услуги
Говорим про рассрочку
Дальше опять же у нас есть видео “Лично гарантируем качество…”
Где мы находимся, фотографии клиники. Можно перейти, посмотреть 3D тур в клинике. То есть не обязательно ехать, можно через сайт посмотреть реальное видео. Все фото живые, настоящие.
Консультация врача.
После чего мы сразу показываем видеоотзывы.
Что может будет круче, чем кейсы? Обратите внимание, что видео сняты профессионально. Такие профессиональные видео - это и есть ваша “упаковка”. То есть, вы правильно один раз сняли такое видео, разместили его на сайт и тысячи людей прогреваются этим видосом. Это ваш актив. Это ваш менеджер по продажам. Это ваш лучший инструмент по продажам. Его можно размещать везде: YouTube, соц.сети, на сайте… Один раз вы сделали видео и оно делает презентацию вашей компании правильным. Поэтому делайте видео!
Мы показываем где и какие у нас отзывы. Можно кликнуть, перейти, все ссылки реальные.
Далее у нас есть блок “часто задаваемые вопросы” можно кликнуть на вопрос
Обратите внимание видео должны быть правильно сделаны. Коротко и просто о сложном.
Блок статей
Запишитесь на первичный приём в нашу клинику: перезвоним, проконсультируем и несколько способов связи.
Немного текста для SEO - кликаем раскрывается
Наш футер со всеми услугами
И это была только одна главная страница. Просто презентация нашей клиники.
Обзор услуги “Все на четыре на 4”.
Как правило, с главной страницы люди переходят на страницу какой-то из услуг. Например, есть услуга “Все на четыре на 4”, переходим на страницу:
- Главный экран: другое фоновое изображение, сильный оффер, который отличает нашу компанию от других.
- преимущества
- квиз: проходим короткий квиз, отвечая на простые, понятные вопросы по услуге, чтобы по завершении клиент мог получить предварительный расчет стоимости.
- блок “Скорее всего, вы уже столкнулись с этими проблемами из-за отсутствия зубов”.
Чтобы написать этот блок, нам необходимо было тщательно проработать все заголовки. У этого блока есть определенная структура, которая позволяет вникнуть в проблемы клиента, узнать, что действительно его беспокоит, узнать в чем его боль и дать решение этих проблем. Мы не утверждаем наличие проблемы у клиента, а даем ему возможность самому определить с чем ему пришлось столкнуться. Мы не торопимся рассказать о том какие мы классные, что наши цены самые лучшие, наши гарантии самые крепкие… мы, мы, мы, мы, мы…. мы интересуемся клиентом и общаемся с ним, в первую очередь. Общаемся на человеческом, интересном, понятном языке. Чтобы делать такие заголовки реально нужен опыт. То есть, маркетолог годами нарабатывает экспертность, чтобы уметь писать такие заголовки, именно в обычном, не публицистическом стиле, обычном разговорном стиле, где каждая фраза попадает в цель, цепляет за боль и продает компанию. Вот это и есть маркетинг! Мы делаем именно такие сайты.
- Блок с примерами работ.
Прописывая осмысленные заголовки, мы сообщаем клиенту, что решим проблему любой сложности. Неважно какая у вас ситуация, мы сделаем вам крутые, новые зубы, поставим импланты, вылечим кариес и всё остальное. Можно просто написать в заголовке “Примеры работ”. А можно написать: “В зависимости от состояния здоровья ваша проблема с зубами будет решена”. Во втором заголовке вложено намного больше смысла, который дает потенциальному клиенту уверенность в том, что ему помогут с его проблемой.
- Отвечаем на вопросы
- Врачи
- Инструкция
- Никакой боли
Есть страх у клиента, есть возражение про боль во время и после имплантации. Мы показываем, что безболезненные уколы, легкие обезболивающие, мягкая седация, комфорт… Тем самым, закрывая возражение про боль.
- Этапы
Закрыв вопросы про боль и страх, мы рассказываем клиенту просто и коротко о том какие этапы предполагает лечение.
- рейтинги
- лично за качество отвечает главврач клиники
- преимущества
- рассрочка
- стоимость
Сколько стоит лечение? Очень важный вопрос. Мы это всё разместили внизу страницы, чтобы клиент долистал до этого блока. Обращаю внимание, долистал, прочитав перед этим все заголовки. Возможно он не будет читать весь текст на странице, но все смыслы, которые нужно знать мы закладываем в большие, жирные заголовки. Крупный шрифт и жирные заголовки - за них всегда цепляется взгляд.
Прочитав все заголовки, клиент прогрелся и только тогда мы ему показываем стоимость и говорим сколько это стоит. В данном блоке мы сообщаем есть ли акция, присутствует кнопка “участвовать в акции”. Нажатием на эту кнопку, открывается окно, в котором мы, опять же, спрашиваем только номер телефона и получаем заявку, что клиент хочет участвовать в акции “все на четыре по стоимости от 90.000 руб”
- Затем мы говорим про договор, гарантию, лицензию
- “Запишись на первичный приём”
- текст для SEO
Как как вы думаете, мы закрыли эту услугу? Мы продали компанию здесь? Я думаю, да. И более того, у нас каждая услуга выполнена именно так.
Конверсионные элементы на странице. Лендинг “Брекеты”.
Откроем следующий лендинг. Это у нас Брекеты.
- Главный экран: оффер “Получите идеально ровную улыбку на всю жизнь”, отдельное фоновое изображение
- Несколько преимуществ
- Сколько будут стоить для вас брекеты - это уже другой квиз, другие изображения, другие вопросы.
То есть, напоминаю, в этом проекте 23 лендинга, 23 квиза. Каждый лендинг, каждая услуга должна быть с своим функционалом, со своими вопросами. Только тогда вы будете получать максимальный прирост конверсии.
- “Вне зависимости от ситуации с прикусом вы получите красивую улыбку, ровные зубы”
- Подберем оптимальный метод ортодонтического лечения
- Сделали 7000 проектов проектов за 10 лет
- Отвечаем на на вопросы
- и так далее.
Вспоминаем предыдущий лендинг и видим этот. Они вроде бы как похожи, но у них другое наполнение, другие боли. То есть, нужно было вникнуть в проблему брекетов, продумать логику, продумать заголовки, подобрать изображение, сфоткать, разместить наполнить этот сайт, указать цены…
Обязательные страницы.
В данном проекте 23 лендинга, не считая внутренних страниц.
Рассмотрим подробнее внутренние страницы.
- Есть отдельная страница акций. Одна из фишечек, когда мы показываем цифру 12 в красном кружочке. Красное привлекает внимание.
Кликаем на данный раздел, попадаем в акции. Здесь у нас есть цены, сколько акция длится, кнопка “участвовать в акции”, кнопка “смотреть все акции”
- Следующая страница Врачи, про которую я уже рассказывал.
Все наши врачи. Главная страничка - здесь видно всех врачей. Кликаем к примеру на отдельного врача, переходим его страничку.
Здесь есть видеопрезентация врача, специализация врача, сертификаты, видеоотзывы о его работе и немного текста.
- Переходим на страницу Цены. Видим перечень услуг. Выбираем определенную услугу и сразу же подтягивается стоимость.
Люди хотят увидеть стоимость, мы стоимость даём, не скрываем.
- Также, у нас есть страница О клинике, где мы рассказываем про компанию, врачей, дополнительную информацию, тексты…
Некоторые блоки у нас дублируются с главной страницы - это нормально. Кто-то главную страницу не листал, перешёл сразу в услугу, а потом решил подробнее ознакомиться с клиникой.
- Есть страница Наши работы. Здесь размещены кейсы.
Кликаем, видим, что кейсы разбиты по категориям, в зависимости от того, что человеку нужно. Например, лечение зубов. Кликаем на кейс лечения зубов и проваливаемся внутрь. Тут размещаются отзывы по данному кейсу, другие похожие работы и информация как и что было сделано.
- Следующая страница - это отзывы. Видим плашку плюс 510, потому что отзывов действительно у клиники много. Также отзывы разбиты по категориям.
Обращаю внимание на наличие пагинации на странице.
- Страница Блога. Так называемые статьи на разные темы в области стоматологии. Информация о том, когда была опубликована статья, возможность поделиться, теги, автор.
“Как лечить пародонтит?”. У людей есть такой запрос. Открываем статью: сохранить статью, навигация по статье, то есть содержание, врач, “может быть интересно”...
Грамотно, красиво оформленная статья с этапами, с чек листами, со списком, источниками и так далее…
Обращаю внимание, наши кейсы и наши статьи будут генерировать нам дополнительно Лиды!
- Страничка Контакты. Данная страница выглядит таким образом:
- две клиники в Москве
- показываем как проехать до метро
- показываем 3D тур
- фотографии клиник
- адреса на карте
- Youtube канал и ссылки на соц.сети
- форма обратной связи
ЗАКЛЮЧЕНИЕ
Это и был пример продающего сайта, в котором есть консистенция всего нашего опыта, всех разных интерактивных блоков, конверсионных фишек, элементов формирования заголовков и этапов разработки такого сайта. Мы делаем такие продающие сайты и рады делиться с вами нашим опытом. Надеюсь, эта статья поможет вам сделать правильный сайт и получать самую высокую конверсию!
Ссылка на наш сайт: https://paradigma.website/