Инструкция: как в 2024 году сделать сайт, который будет помогать продавать

17.04.2024
14 мин на чтение

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

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

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

Содержание:
Фёдор Михайлов
основатель и арт-директор Mstudio

Каким образом сайт увеличивает продажи

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

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

Коммерческий сайт — это полноценный маркетинговый инструмент.
Конверсия рассчитывается по формуле: количество совершивших обращение / количество посетителей x 100%. Хорошим результатом считается 1,5-2%.

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

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

Примеры работ студии, еще больше работ можно посмотреть на Tilda Experts

Выбираем тип коммерческого сайта

Интернет-площадки можно разделить на три вида.

Одностраничный сайт или лендинг

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

Многостраничный сайт

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

Интернет-магазин или e-commerce

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

Подробнее о каждом типе мы уже писали в нашей статье.

Проводим глубокий анализ перед созданием сайта

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

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

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

В городах-миллионниках высокая конкуренция, поэтому важно от них отстроиться. Необходимо понимать, в чем ваше УТП (уникальное торговое предложение), чем вы отличаетесь, что можете делать лучше.

Как провести анализ конкурентов:
  • открыть карту города, в поиске вбить нужные услуги и отобрать список конкурентов;
  • проанализировать их сайты с точки зрения наполненности — визуальной (уникальность дизайна, удобство нахождения на сайте и восприятия контента), технической (адаптация под устройства, подключение протокола и SEO) и контентной (текст без воды и самолюбования, полезный для клиента с решением его проблем):
  • изучить отзывы на площадках (Отзовик, Яндекс и Googe Карты, 2ГИС), чтобы понять главные боли клиента, что им не нравится в работе с другими компаниями — и предлагать решение этих проблем;
  • прозвонить конкурентов и понять, как они работают с клиентами, что дают в плане совместной работы, скидок и других предложений.

Можно провести анализ самостоятельно или обратиться к специалистам, которые оформят все данные в таблицы, с которыми вы сможете работать не только при создании сайта, но и при разработке маркетинговых кампаний и ввода новых товаров/услуг.
Собираем лучших конкурентов в одном месте
Собираем смыслы в прототип
Если в вашей команде есть маркетолог, будет здорово, если он будет включен в процесс разработки. Он поможет команде разработчиков отстроиться от конкурентов за счет точечных преимуществ, которые есть только у вас. Но вы можете сделать это и самостоятельно на основе анализа ЦА и конкурентов.
Главное правило структуры сайта: на первых трех экранах предлагаем решение проблемы посетителей, и только потом рассказываем о себе. Человек заходит на сайт, узнает себя и листает дальше, чтобы узнать, как ему могут помочь. Если этого узнавания не произошло, страницу закроют.
Пример готового прототипа, разработанного нашей студией.

Наполняем сайт контентом

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

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

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

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

Пример оформления контента

Разрабатываем дизайн

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

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

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

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

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

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

Техническая подготовка сайта

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

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

Адаптация сайта под планшет и под мобильные устройства

Для простоты поиска необходимо создать себе простое доменное имя — то, что будет отображаться в поиске после http/https. Оно может совпадать с названием бренда или иметь дополнительные отличительные черты — например, город, код региона, название услуги.

Подключение домена

Когда пользователь заходит на сайт, он хочет знать, что его данные не украдут, а его самого не обманут. Чтобы подтвердить свою благонадёжность, необходимо получить специальные документы — SSL-сертификаты. В поисковой строке такой сайт будет отображаться с замочкой и надписью HTTPS. Если такого сертификата не будет, у части пользователей сайт может просто не открыться. Из-за чего вы потеряете трафик, а сайт понизят в поисковой выдаче.

HTTPS-протокол

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

Технические страницы: страница благодарности, ошибка 404, политика конфиденциальности

  • оптимизация изображений — изображения должны весить до 100kb, чтобы сайт быстро открывался и прогружался;
  • title, description, ключевые слова — по ним поисковики в первую очередь смотрят, соответствует ли сайт запросу пользователя. Не необходимо бездумно включать ключевые слова в текст и писать их в каждом предложении. Поисковики могут, наоборот, увидеть заспамленность страницы и убрать ее на дальние страницы в поисковой выдаче;
  • фавикон — иконка рядом с названием сайта в поисковой выдаче, во вкладке браузера и в контекстной рекламе;
  • бейджи для соцсетей — изображение и описание, которое отображается при отправке ссылки на ваш сайт в соцсетях и мессенджерах;
  • каноническая ссылка — ссылка формата"canonical" с атрибутом тега «link». Она указывает страницу с оригинальным контентом. Поисковые системы будут считывать такую ссылку как оригинал, а другие ссылки с таким же контентом как копии;
  • читаемые адреса страниц — если у вас многостраничный сайт, для каждой страницы необходим свой понятный адрес. В качестве названий предпочтительнее использовать транскрипцию русских слов на латинице, а не перевод на английский — так страницы лучше воспринимаются поисковиками;
  • редиректы для WWW, HTTP — даже если человек будет вбивать адрес вашего сайта вручную через www или http, его автоматически перекинет на страницу с защищенным протоколом https. Если не настроить редирект, сайт может просто не открыться;
  • проверка на SEO-ошибки — в Тильде в настройках SEO есть раздел SEO-рекомендаций;
  • подключаем Яндекс. Вебмастер и Яндекс. Метрику — сервисы для поисковой оптимизации и веб-аналитики. Вы сможете отслеживать, как ваш сайт отображается в поисковике, понимать, откуда к вам приходят люди, как много времени они проводят на сайте, сколько из них купили или оставили заявку.
  • хлебные крошки — элементы навигации на сайте, которые помогают быстро перейти в нужный раздел.

Базовые SEO-настройки. Они включают в себя:

Продвигаем сайт

Новый сайт имеет нулевую статистику и не может конкурировать с другими игроками в персональной выдаче. Также у него не будет поисковой выдачи в течение примерно 2−3 месяцев. Поэтому надо сделать так, чтобы поисковики его заметили, показать, что сайт интересный и на него приходят люди. Запустите контекстную или таргетированную рекламу. Во время кампании вы можете тестировать разные гипотезы, проводить A/B тесты.

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

Чек-лист проверки сайта:

1) Провести анализ конкурентов и целевой аудитории:
  • составить список конкурентов;
  • проверить их сайты, выписать интересные решения;
  • проверить отзывы и узнать, на что жалуются люди;
  • выписать свои преимущества исходя из боли аудитории.

2) Разработать смысловой прототип на основе анализов конкурентов, продумать текст.

3) Разработать дизайн.

4) Техническая доработка: адаптация сайта под разные устройства, подключение домена, создание технических страниц, базовые SEO-настройки.

5) Подключение системы аналитики данных.

6) Запуск рекламы.

Уже есть сайт? Хотите узнать почему у него низкая конверсия? Присылайте, расскажем

Бесплатный аудит-созвон, на котором арт-директор Федор Михайлов разберет ваш сайт, подсветит точки роста и предложит свои решения
Нажима кнопку «Отправить», вы соглашаетесь с политикой конфиденциальности
Made on
Tilda