Как мы сделали сайт для промышленного B2B и попали в ТОП-3 Яндекса — реальный кейс
🧊 Кейс: Сайт для B2B-продаж оборудования с SEO-выходом в ТОП Яндекса
Привет! На связи Азам, основатель агентства azawa.ru.
В этом кейсе покажу, как мы полностью переработали сайт компании «Ирбистех», которая продаёт оборудование для очистки сухим льдом, и за 2 месяца вывели его в топ Яндекса.
📹 Кому лень читать — вот видео на YouTube с полным разбором (10 минут).
📹 Кому лень читать — смотрите подробный разбор этого кейса на YouTube (10 минут):
⚡ С чем пришёл клиент
У компании был старый сайт, сделанный на шаблонном решении. Он не соответствовал современным требованиям и плохо выполнял задачи бизнеса:
- Сайт устарел по дизайну и структуре.
- Был неудобен пользователям.
- Информация о продукции была неполной и сложной для восприятия.
- Сайт плохо индексировался поисковиками.
📌 Какие задачи стояли перед нами:
Полный редизайн старого шаблонного сайта.
Современный и удобный интерфейс.
Детальную презентацию оборудования.
Улучшение позиций сайта в поисковых системах.
Возможность самостоятельно управлять контентом.
Срок реализации проекта под ключ — 3 месяца, включая аналитику, дизайн, верстку, разработку админки, SEO и полное наполнение контентом.
🔧 Что мы сделали под ключ:
- Анализ конкурентов и ЦА
- Прототипирование и дизайн 45 страниц
- Адаптивная верстка с нуля
- Кастомная админка на WordPress
- Двух-язычный сайт (RU + EN)
- SEO-оптимизация под 60+ ключей
🎯 Мудборд и концепция
Заказчик предоставил нам готовую структуру сайта, фирменные цвета и логотип. Исходя из этого, мы собрали мудборд — подборку визуальных референсов, отражающих стилистику будущего сайта и помогающих понять общий стиль и настроение.
🎨 Цвета и шрифты
Выбрали строгую и современную палитру с ярко выраженными акцентами на важные элементы. Основные цвета: синий (цвет льда), белый и графитовый. Шрифты — современные и лёгкие для восприятия.
📐 Прототип главной страницы
После утверждения мудборда мы разработали подробный чёрно-белый прототип главной страницы, в котором прописали логику взаимодействия пользователя с каждым блоком и показали, как будет выглядеть контент и навигация.
📑 Прототип остальных страниц
Затем аналогичным образом разработали прототипы всех внутренних страниц сайта, следуя общей логике и сохраняя удобство навигации для пользователей.
🧱 Разработка главной страницы
После утверждения прототипа и общей стилистики мы разработали полноценный дизайн главной страницы. Первый экран сделали акцентным и сразу показали ключевую продукцию компании, чтобы пользователи могли быстро перейти к подробному описанию нужного оборудования.
Следующим этапом после утверждения прототипа стала проработка финального дизайна главной страницы.
Мы разработали уникальный, современный блочный дизайн, который сочетает в себе:
- Чёткую визуальную иерархию
- Крупные акцентные блоки с большим количеством "воздуха"
- Простую навигацию и фокус на продукции
- Поддержание фирменной цветовой палитры и айдентики клиента
Первый экран решили сделать максимально информативным — с акцентом на заголовок и продукцию. Это позволяет посетителю сразу понять, чем занимается компания, и быстро перейти к интересующему оборудованию.
Каждый следующий блок логично продолжает пользовательский путь: от интереса — к деталям, от преимуществ — к доверию, от визуала — к действию.
Видео главной страницы
📄 Отрисовка всех страниц сайта
После утверждения дизайна главной страницы мы приступили к проработке всех внутренних страниц сайта.
Всего было отрисовано 44 уникальных экранов, включая:
- Страницы оборудования с подробной информацией по каждой модели
- Разделы с технологией очистки
- Многоуровневую структуру под модификации
- Страницы «О компании», «Сервис», «Контакты», а также типовые страницы: 404, «Политика»
- Полноценный раздел с документацией, файлами и видеоинструкциями
Все страницы были выполнены в едином стиле, с соблюдением UI-гайдов и логики, которую мы заложили на этапе прототипирования.
💡 Благодаря подробной визуализации ещё до верстки мы смогли избежать правок на поздних этапах и ускорить время реализации.
👀 Посмотреть визуал кейса
Кстати, если вам интересно взглянуть только на визуальную часть проекта — дизайн, прототипы, интерфейсы — можно посмотреть кейс на Dprofile по ссылке
💻 Верстка на чистом коде
После того как были отрисованы все 45 страниц, мы приступили к верстке.
Сайт был сверстан на чистом, семантически правильном HTML, CSS и JavaScript, без использования готовых шаблонов или конструкторов.
Мы уделили особое внимание:
- Адаптивности под все устройства
- Скорости загрузки и оптимизации медиафайлов
- Чистоте и читаемости кода
- Кроссбраузерности
- Анимациям и плавности интерфейса
Каждый элемент вёрстки в точности повторяет утверждённый дизайн. Благодаря качественной подготовке на предыдущих этапах, процесс верстки прошёл быстро и без лишних итераций.
💡 Такой подход позволяет в будущем легко масштабировать сайт и подключать дополнительные модули без «костылей».
⚙ Админ-панель и функциональность
После утверждения верстки мы настроили кастомную админ-панель на WordPress, чтобы заказчик мог самостоятельно управлять контентом без обращения к разработчикам.
Через админку можно легко:
- Редактировать тексты и изображения
- Добавлять и удалять страницы
- Управлять карточками оборудования и документацией
- Обновлять новости и ресурсы
Также реализовали двуязычную версию сайта — на русском и английском. Пользователь может быстро переключаться между языками, а заказчик — управлять контентом для каждой версии отдельно.
Дополнительно мы разработали страницу с ресурсами — это статьи, документы, видео и инструкции. Фильтрация реализована на JavaScript: пользователь может сортировать материалы по категориям без перезагрузки страницы, что делает взаимодействие максимально плавным.
💡 Такой подход не только улучшает UX, но и повышает глубину просмотра и вовлечённость на сайте.
🔥 SEO-продвижение и результат
После запуска провели базовую SEO-оптимизацию:
- Составили и внедрили семантическое ядро.
- Прописали Title и Description под ключевые запросы.
- Оптимизировали скорость загрузки и корректность отображения на всех устройствах.
Сразу после запуска сайт начал стабильно расти в поисковой выдаче. Уже в первые недели мы увидели отличную динамику:
- 20 ключевых фраз — в ТОП-1–3
- 34 ключевых фразы — в ТОП-1–10
- 14 ключевых фраз — в ТОП-11–30
📈 Это включает высокочастотные запросы вроде: «оборудование для очистки сухим льдом», «производство сухого льда», «аппарат сухой лёд купить» и другие.
Благодаря грамотно составленной структуре, SEO-оптимизации и скорости сайта, ресурс начал приносить заявки без дополнительной рекламы.
⏱ Таймлайн проекта:
- Неделя 1–2: Аналитика, структура, мудборд
- Неделя 3–5: Прототипы и UX
- Неделя 6–8: Дизайн всех 45 экранов
- Неделя 9–11: Верстка, разработка, интеграция
- Неделя 12: Наполнение и SEO
📦 Запуск проекта — через 3 месяца после старта
💬 Отзыв клиента
В завершение — небольшой фрагмент из благодарственного письма от заказчика:
🥇 Итог работы
На выходе клиент получил современный, удобный корпоративный сайт, который не только выглядит круто, но и приносит реальные заявки благодаря SEO-оптимизации.
Проект был реализован полностью под ключ за 3 месяца — от первого звонка до выхода сайта в топ и получения заявок.
🔥 Две строчки в описании результата — а сколько работы за ними стоит!
💻 Хотите себе сайт, который будет работать на результат?
🔗 Контакты и ссылки
💻 Сайт: azawa.ru
✉ Telegram: написать
📹 YouTube-разбор: смотреть
📎 Dprofile с визуалом: открыть кейс
✈ Telegram-канал с фишками: подписаться