ANABEL / КЕЙСЫ / WEB & SEO

HAMEL. Больше, чем редизайн сайта

Комплексная переработка многостраничного сайта: маркетинговая стратегия, SEO-архитектура, индивидуальный интерфейс и собственная HTML/CSS/JS-разработка на Tilda.

Проект в активном развитии

Обсудить проект ↗ Смотреть сайт HAMEL ↗

HAMEL — разработанный сайт на ноутбуке и смартфоне

02 / Отправная точка

32 страницы. Но не единая система.

На старте проекта у HAMEL уже был действующий многостраничный сайт на Tilda с информацией об услугах, технологиях и направлениях работы.

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

Исходные 32 URL включали коммерческие страницы, информационные материалы и служебные разделы. Ценные материалы и существующие адреса требовалось сохранить.

01

Шаблонный интерфейс

Типовые блоки Tilda не формировали единого индивидуального визуального языка и не позволяли в полной мере раскрыть специфику компании.

02

Устаревшая навигация

Header и Footer нуждались в полной переработке. Пользователю было непросто ориентироваться в услугах и быстро переходить к нужному направлению.

03

Недостаточно удобные способы связи

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

04

Разрозненная SEO-структура

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

Главная задача

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

03 / Исследование и стратегия

Начали с исследования, а не с дизайна

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

01

Рынок и конкуренты

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

02

Аудитория и типы объектов

Разделили потребности складов, производств, паркингов, автосервисов, медицинских и коммерческих объектов. У каждого сегмента свои требования к нагрузкам, эксплуатации и характеристикам покрытия.

03

Поисковое поведение

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

Примеры запросов «Эпоксидный пол» · «Пол для склада» · «Ремонт промышленного пола»

Стратегический вывод

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

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

04 / SEO-архитектура

От отдельных страниц к системе поискового спроса

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

57+ страниц в расширенной SEO-архитектуре Первоначальная мастер-карта включала 55 базовых URL. Архитектура продолжает расти.

01

Технология Основные направления

Бетонные полы Топпинг Полимерные полы Терраццо

02

Система Специализированные покрытия

Эпоксидные Полиуретановые Кварцнаполненные Антистатические Химстойкие ММА

03

Объект Отраслевые решения

Склады Производства Паркинги Автосервисы Медицина Пищевые предприятия

04

Проблема Ремонт и восстановление

Ремонт бетонных полов Ремонт полимерных полов Обеспыливание Шлифовка Деформационные швы

05

Коммерция Доверие и обращение

Цены Проекты Сертификаты Компания Контакты

Ключевой принцип

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

32 существующих URL в исходной структуре сайта

+23 новые страницы, предусмотренные первоначальной мастер-картой

+2 и далее дополнительные направления, добавленные в ходе развития архитектуры

Существующие SEO-активы сохраняем. Изменение URL, объединение страниц и редиректы рассматриваем только после анализа поисковых данных. Страницы проектов и будущие публикации развиваются дополнительно.

05 / Пользовательский путь

Не заставлять клиента разбираться в технологиях

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

01

Знает технологию

Находит бетонные, топпинговые, полимерные или терраццо-полы и сравнивает характеристики.
02

Ищет решение для объекта

Переходит к требованиям склада, производства, паркинга, СТО или коммерческого помещения.
03

Нужно устранить проблему

Выбирает ремонт, обеспыливание, шлифовку или восстановление швов в зависимости от состояния пола.

ШАГ 01 Задача или запрос

ШАГ 02 Специализированная страница

ШАГ 03 Решение и ориентир стоимости

ШАГ 04 Обращение за расчётом

06 / Визуальная система

Единый язык для десятков страниц

Для HAMEL разработаны новый логотип и единая дизайн-система. В интерфейсе сделали акцент на инженерной точности, понятной иерархии, крупных фотографиях объектов и спокойной палитре.

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

Цветовая система HAMEL

#062B4A

#12A66A

#F5F8FA

#EDF5F8

#102B3E

Типографика / Manrope

Промышленные полы под задачи вашего объекта

Принципы интерфейса

Крупные изображения, ясные заголовки, компактные секции.

Единые компоненты, адаптивная логика и понятные действия.

07 / Индивидуальная разработка

Tilda — инфраструктура. Интерфейс — собственный код.

Вместо механического тиражирования стандартных блоков мы проектируем структуру каждой страницы под её задачу и реализуем основные интерфейсные секции через HTML, CSS и JavaScript.

Tilda + HTML
CSS + JavaScript
Desktop / Tablet / Mobile

01

Новый Header и навигация

Общая система меню по направлениям, адаптивная мобильная навигация, быстрые контакты и кнопка обращения.

02

Popup и формы заявки

Единый сценарий открытия формы из рабочих CTA без создания отдельных попапов для каждой страницы.

03

Собственные секции страниц

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

04

Адаптив и контроль качества

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

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

08 / Реальные страницы

Не один шаблон — разные продуктовые сценарии

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

Продуктовая страница Бетонные полы Конструкция, виды решений, нагрузки, стоимость и технология устройства. Открыть страницу ↗

Основное направление / HUB Полимерные полы Виды покрытий, выбор системы, условия эксплуатации и стоимость. Открыть страницу ↗

Самостоятельное направление Полы терраццо Декоративные возможности, конструкция, применение и особенности технологии. Открыть страницу ↗

Дополнительно разработан большой кластер ремонта и восстановления полов: от ремонта бетонных и полимерных покрытий до обеспыливания и деформационных швов.

Ремонтный раздел ↗

09 / Техническое SEO и контент

Поисковая логика встроена в разработку

SEO здесь не отдельный текст внизу страницы. Структура контента, HTML, метаданные и внутренние переходы проектируются одновременно с интерфейсом.

Структура HTML

Один H1, логичные H2/H3, индексируемые тексты и описательные ALT.

Метаданные

Title, Description, Open Graph и поисковые формулировки, соответствующие назначению страницы.

Перелинковка

Связи между технологиями, объектными решениями, ремонтом и коммерческими разделами.

Техническая оптимизация

Микроразметка по необходимости, контроль URL, битых ссылок, дублей и ошибок индексации.

Контентное направление

Создан раздел «Полезные статьи». Существующие материалы сохраняются как SEO-актив. Их последовательная редактура и дальнейшее обновление раздела предусмотрены отдельным этапом развития сайта.

Смотреть раздел ↗

10 / Аналитика и заявки

Не просто форма. Измеримая система обращений.

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

Яндекс Вебмастер + Google Search Console

Регистрация и подключение сайта для контроля поискового присутствия, индексации и технического состояния.

Яндекс Метрика

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

MAX + Telegram + Email

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

01 / ДЕЙСТВИЕ Кнопка связи или отправка формы

Для значимых элементов сайта настроены отдельные события.

02 / АНАЛИТИКА Фиксация в Яндекс Метрике

Клики по контактам и успешные отправки форм учитываются отдельно.

03 / УВЕДОМЛЕНИЕ MAX · Telegram · Email

Данные отправленной формы поступают в настроенные каналы уведомлений.

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

11 / Результат и развитие

Сайт, который продолжаем развивать как систему