Сайт для мастеров по работе с камнем

Иван обратился ко мне по рекомендации. Он с коллегами в конце 2020 года основал собственное дело. Пока производство загружено заказами, которые пришли по сарафану, но для построения стабильного растущего бизнеса ему понадобится поток заказов из интернета.

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

Клиент попросил выполнить проект в минимально возможную стоимость, поэтому по брендингу, анализу ЦА и подготовке контента был выполнен минимальный объём работ.

Подготовительные работы

Любая работа по маркетингу начинается с брендинга.

Нужно заложить смыслы, которые в дальнейшем будут влиять на дизайн и тексты.

Выбирали из трёх концепций. Опишу их простыми словами:

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

Каждое слово разворачивает у вас в голове свой особенный ассоциативный ряд.

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

2 сегмента целевой аудитории

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

То есть, нам понадобится 2 формы захвата: максимально быстрый расчёт проекта и запись на замер.

Особенности ниши

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

Клиенты привыкли изучать подрядчиков в Инстаграме, поэтому на сайте сделаем несколько ссылок на аккаунт клиента. Он будет служить местом "прогрева" потенциального клиента, что позволит на начальном этапе обойтись без контентной автоворонки.

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

Логотип

Старый логотип совершенно не подходил под наши задачи. Его нарисовали клиенту вместе с визиткой:

С выбранной концепцией и заполненным брифом мы пошли к дизайнеру логотипов. Получили вот такой вариант:

Вдохновлялись римскими цифрами с засечками. Отказались от использования знака и декора. Минимализм очень хорошо ложится концепцию.

На всякий случай отошли от концепции и отрисовали ещё несколько вариантов:

Очень достойный вариант, но было принято решение всё же не отходить от концепции.

Совсем не то, что нужно.

Дизайн сайта

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

Шапка.
Первый экран с формой захвата.
Услуги.
Портфолио.
Преимущества.
Дизайнерам и архитекторам.
Каталог.
Подвал.

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

Первый экран исходного варианта

Группировка всех трёх целевых действий в левом нижнем углу — не лучшее решение. Также попробовали светлый фон:

Светлый фон сразу предъявляет высокие требования к изображениям, а так как фотосъёмка не была предусмотрена в проекте, решили остановится на тёмном варианте.

Песочный цвет тоже не подошёл — слишком грязный.

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

Кнопки блеклые. Их лучше делать самым ярким элементом интерфейса, чтобы они привлекали внимание.

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

Финальный вид первого экрана

При клике на кнопку открывается форма с минимальным количеством полей:

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

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

В этом проекте мы просим оставивших заявку подписаться на Инстаграм клиента

На мобильных, по возможности, лучше избавить пользователя от заполнения формы заявки, поэтому мы оставили только кнопку "Написать в WhatsApp".

В проекте были использованы крупные изображения и большое количество "воздуха" между элементами.

Один из экранов блока с услугами

Каталог выполнен в виде страницы с простым фильтром слева:

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

Комплект файлов для вёрстки

Часто вижу, что широкий экран не отрисовывают, ограничиваясь версией в районе 1000px по ширине, из-за чего текст и элементы получаются мелкими, а контент сайта как будто зажат в невидимые тиски:

Популярный интернет-магазин с неиспользованными полями слева и справа

Каждый проект комплектуется UI-kit'ом, описывающим состояния активных элементов при наведении и нажатии.

И фавиконкой для вкладки браузера

Вёрстка сайта

Стоимость перевода трёх страниц из .psd макетов в html-код стоила как полтора лендинга под ключ на фрилансе и выполнялась несколько недель.

Почему так дорого и долго?

Дело в том, что я видел не один пример того, как отличный красивый дизайн смотрелся после вёрстки на 5 000 руб., как будто его сделал в ночь перед дедлайном начинающий мастер фотошопа.

Можно полностью уничтожить красоту, если сверстать страницу с допусками от дизайна в десятки пикселей (у нас допускается расхождение с макетами всего 2-3px).

Критерии качества только вёрстки занимают в договоре 3 страницы 10 шрифтом:

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

Проект использует большое количество изображений, поэтому все файлы были ужаты по размеру без потери качества. Для отображения на качественных экранах Apple вся графика была ретинизирована. Также, подключена "ленивая" загрузка изображений (когда графика вне поля зрения пользователя, она не подгружается).

Итог качественной вёрстки — хороший показатель скорости загрузки сайта по результатам теста Pagespeed Insights для проекта с таким количеством графики и настроенной аналитикой:

Можете убедиться в этом сами: https://stone-buro.ru.

Для сравнения приведу пример сайта клиента, который заказал сайт на фрилансе с целью сэкономить и после завершения работ пришёл к нам с просьбой ускорить сайт:

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

Программирование

Так как сайт не содержит большого количества контента и страниц, он был выполнен без использования CMS.

На бэкенде был написан PHP-скрипт, отправляющий данные из формы заявки на почту клиента.

Был установлен 301 редирект с версии https://www.stone-buro.ru на https://stone-buro.ru.

Аналитика

На сайт были установлены системы аналитики Яндекс.Метрика и Google Analytics через систему управления тегами Google Tag Manager.

Для целевых действий были настроены цели:

Теги в GTM

Сайт был подключён к Яндекс.Вебмастеру и Google Search Console для дальнейших работ по продвижению в поисковых системах.

———

Если вам нужен качественный сайт, напишите мне в телеграм @nstebunoff для оценки стоимости и сроков проекта.