Сайт для мастеров по работе с камнем
Иван обратился ко мне по рекомендации. Он с коллегами в конце 2020 года основал собственное дело. Пока производство загружено заказами, которые пришли по сарафану, но для построения стабильного растущего бизнеса ему понадобится поток заказов из интернета.
Начать работу решили с сайта на пару-тройку страниц, который можно показать клиентам, адрес которого можно написать на визитке.
Клиент попросил выполнить проект в минимально возможную стоимость, поэтому по брендингу, анализу ЦА и подготовке контента был выполнен минимальный объём работ.
Подготовительные работы
Любая работа по маркетингу начинается с брендинга.
Нужно заложить смыслы, которые в дальнейшем будут влиять на дизайн и тексты.
Выбирали из трёх концепций. Опишу их простыми словами:
- Мастер.
Из поколения в поколение знания и навыки передаются от одного профессионала к другому. В мастерской вы встретите человека, который сможет решить любую вашу задачу. - Технологичность.
Представьте себе высокоточное производство, где машины в цеху выполняют операции с хирургической точностью. - Утончённость.
Итальянцы являются законодателями мод в работе с камнем. Всё, что они делают красиво выглядит и нравится заказчикам и дизайнерам.
Каждое слово разворачивает у вас в голове свой особенный ассоциативный ряд.
На любой из трёх концептов можно сделать упор, но остановились мы на последнем.
2 сегмента целевой аудитории
К клиенту могут обратиться заказчики или их дизайнеры. У них уже может быть готовый дизайн-проект для реализации или такой проект нужно будет собрать по результатам замера.
То есть, нам понадобится 2 формы захвата: максимально быстрый расчёт проекта и запись на замер.
Особенности ниши
В строительной нише практически всё общение проходит в WhatsApp, поэтому мы разместим на сайте ссылку на диалог в мессенджере.
Клиенты привыкли изучать подрядчиков в Инстаграме, поэтому на сайте сделаем несколько ссылок на аккаунт клиента. Он будет служить местом "прогрева" потенциального клиента, что позволит на начальном этапе обойтись без контентной автоворонки.
В нише профессиональных услуг крайне важно вести микроблог, чтобы обосновать цены и построить у клиента доверие к компании. В строительной нише лучшая площадка для этого — Инстаграм.
Логотип
Старый логотип совершенно не подходил под наши задачи. Его нарисовали клиенту вместе с визиткой:
С выбранной концепцией и заполненным брифом мы пошли к дизайнеру логотипов. Получили вот такой вариант:
На всякий случай отошли от концепции и отрисовали ещё несколько вариантов:
Дизайн сайта
Как только получили логотип и определились с требованиями к сайту, отдали дизайнеру список блоков для отрисовки:
- Шапка.
- Первый экран с формой захвата.
- Услуги.
- Портфолио.
- Преимущества.
- Дизайнерам и архитекторам.
- Каталог.
- Подвал.
Изначально предполагали, что каталог разместим на главной странице, но в процессе работы поняли, что нужна отдельная страница. Ещё одна страница понадобится для политики конфиденциальности.
Группировка всех трёх целевых действий в левом нижнем углу — не лучшее решение. Также попробовали светлый фон:
Песочный цвет тоже не подошёл — слишком грязный.
Красный цвет вызывает тревогу, а обращение в компанию должно вызывать положительные ассоциации. Кнопку обращения в мессенджеры лучше делать максимально похожей на оригинальный значок.
Замер во многих компаниях может стоить несколько тысяч рублей, поэтому лучше указать, что эта услуга выполняется бесплатно. Кнопку для перехода в мессенджер расположили около меню, чтобы пропустить её было невозможно.
При клике на кнопку открывается форма с минимальным количеством полей:
Многие не используют важнейший момент того, как потенциальный клиент оформит заявку. В этот момент человек максимально лоялен к вам и пока он ждёт обратной связи, самое время показать ему ваш экспертный контент, подписав на рассылку или аккаунт в социальных сетях.
На мобильных, по возможности, лучше избавить пользователя от заполнения формы заявки, поэтому мы оставили только кнопку "Написать в WhatsApp".
В проекте были использованы крупные изображения и большое количество "воздуха" между элементами.
Каталог выполнен в виде страницы с простым фильтром слева:
После утверждения десктопной версии на 1600px сайт был отрисован для планшетов и мобильных.
Часто вижу, что широкий экран не отрисовывают, ограничиваясь версией в районе 1000px по ширине, из-за чего текст и элементы получаются мелкими, а контент сайта как будто зажат в невидимые тиски:
Каждый проект комплектуется UI-kit'ом, описывающим состояния активных элементов при наведении и нажатии.
И фавиконкой для вкладки браузера
Вёрстка сайта
Стоимость перевода трёх страниц из .psd макетов в html-код стоила как полтора лендинга под ключ на фрилансе и выполнялась несколько недель.
Почему так дорого и долго?
Дело в том, что я видел не один пример того, как отличный красивый дизайн смотрелся после вёрстки на 5 000 руб., как будто его сделал в ночь перед дедлайном начинающий мастер фотошопа.
Можно полностью уничтожить красоту, если сверстать страницу с допусками от дизайна в десятки пикселей (у нас допускается расхождение с макетами всего 2-3px).
Критерии качества только вёрстки занимают в договоре 3 страницы 10 шрифтом:
Важна не только внешняя красота, но и качество кода внутри. Например, семантично свёрстанные сайты при прочих равных легче парсятся поисковиками и занимают более высокие позиции в органической выдаче. Их легче поддерживать и выполнять настройку аналитики.
Проект использует большое количество изображений, поэтому все файлы были ужаты по размеру без потери качества. Для отображения на качественных экранах Apple вся графика была ретинизирована. Также, подключена "ленивая" загрузка изображений (когда графика вне поля зрения пользователя, она не подгружается).
Итог качественной вёрстки — хороший показатель скорости загрузки сайта по результатам теста Pagespeed Insights для проекта с таким количеством графики и настроенной аналитикой:
Можете убедиться в этом сами: https://stone-buro.ru.
Для сравнения приведу пример сайта клиента, который заказал сайт на фрилансе с целью сэкономить и после завершения работ пришёл к нам с просьбой ускорить сайт:
Программирование
Так как сайт не содержит большого количества контента и страниц, он был выполнен без использования CMS.
На бэкенде был написан PHP-скрипт, отправляющий данные из формы заявки на почту клиента.
Был установлен 301 редирект с версии https://www.stone-buro.ru на https://stone-buro.ru.
Аналитика
На сайт были установлены системы аналитики Яндекс.Метрика и Google Analytics через систему управления тегами Google Tag Manager.
Для целевых действий были настроены цели:
Сайт был подключён к Яндекс.Вебмастеру и Google Search Console для дальнейших работ по продвижению в поисковых системах.
———
Если вам нужен качественный сайт, напишите мне в телеграм @nstebunoff для оценки стоимости и сроков проекта.