✔ Показать, что компания строит всю систему учёта, а не только продаёт счётчики
✔ Говорить отдельно с партнёрами (водоканалы, громады, дилеры) и с бизнесом
✔ Наглядно объяснить путь данных — от счётчика до аналитики и биллинга
✔ Собирать заявки с номером обращения и направлять их в нужный отдел
✔ Дать инженерам документацию, а маркетингу — новости и рассылку
✔ Позволить команде заказчика менять весь контент на двух языках без программиста
Clever Meter Ukraine пришла с техническим заданием на 65 страниц: корпоративный сайт на украинском и английском, две аудитории — «Партнёры» (водоканалы, теплосети, громады, дилеры) и «Бизнес» (застройщики, управляющие компании, предприятия), баннер по региону посетителя, документация, кейсы, формы, рассылка и строгие требования к безопасности.
Я вёл проект целиком. Сначала — дизайн по брендбуку: главная, два десятка шаблонов страниц, UI-kit, анимации и модальные окна форм. Затем — разработка на WordPress на моей теме: каждый блок макета стал полем в админке, а сегменты, геолокация, каталог документов, карта кейсов и рассылка — рабочими функциями.
В итоге компания получила большой сайт, где посетитель за пару кликов находит своё решение, документ или кейс и оставляет заявку, а команда заказчика сама ведёт тексты, фото, новости, документы и английскую версию.
Полноценный корпоративный сайт: сложная инженерная тема читается с первого экрана, а весь контент заказчик ведёт сам.
Свой адрес, тексты, решения, кейсы и новости для каждой аудитории на одной структуре
Фото первого экрана по региону: своя база IP-адресов, без запросов к посетителю
Каталог документов с фильтрами, карта городов с кейсами, новости с поиском и рубриками
11 форм на каждом языке, маршрут по отделам, антиспам и база контактов клиентов
Полный перевод на Polylang: страницы, документы, формы, письма и подписи интерфейса
Тексты, цифры, фото, контакты, отделы и баннеры правятся в полях ACF без программиста
От дизайна по брендбуку до большого сайта на WordPress, которым команда заказчика управляет сама.
Сайт решает несколько основных задач:
Ответ гарантированно в течение 24 часов.
Первая консультация бесплатна и ни к чему не обязывает.
Сайт компании, которая продаёт не приборы, а целые системы учёта, должен одновременно вызывать доверие, объяснять и приводить заявки. На примере Clever Meter Ukraine рассказываю, как техническое задание на 65 страниц превратилось сначала в дизайн, а затем в большой двуязычный сайт на WordPress — с сегментами аудитории, геолокацией, документацией, кейсами, формами и собственной рассылкой.
Clever Meter Ukraine занимается учётом воды и тепла: подбирает и поставляет счётчики, организует автоматический сбор показаний, предлагает программное обеспечение, аналитику, интеграцию с биллингом и сервис. Компания работает с производителями Apator Powogaz, GWF и ADD Grup. Ей нужен был корпоративный сайт, который с первого экрана показывает главное: компания строит всю систему учёта, а не только продаёт приборы.
Заказчик передал подробное техническое задание на 65 страниц — карта сайта, блоки каждой страницы, две аудитории, требования к формам, доступности, безопасности и ролям в админке. Я вёл проект целиком: дизайн, разработка, наполнение и проверка перед передачей.
Стиль я построил на брендбуке и фирменной текстуре воды: тёмно-синий и голубой бренда, фирменные шрифты, белые и светло-голубые секции. Текстуру я перевёл из исходного файла заказчика в векторную маску — на сайте она лёгкая и меняет цвет под фон. Фирменный оранжевый появляется только там, где есть действие или движение данных: главные кнопки, пунктиры путей данных, номера этапов, ключевые цифры.
Кроме главной, в макете — два десятка шаблонов внутренних страниц и отдельный UI-kit:
У сайта две аудитории с разными вопросами. Водоканалу или громаде важны масштаб сети и контроль потерь, застройщику и управляющей компании — квартирный учёт и окупаемость. Поэтому сайт работает в двух версиях с общей структурой: переключатель в шапке и в мобильном меню ведёт на ту же страницу другой версии, а у версии «Бизнес» свой адрес с префиксом — его удобно давать в рекламе и рассылках.
В каждой версии меняются акценты: заголовки и тексты баннеров, призывы внизу страниц, набор направлений решений на главной, сценарии телеметрии. Кейсы и новости своего сегмента поднимаются наверх списков, остальные идут ниже — ничего не скрывается. Для поисковиков обе версии сведены к одному адресу, дублей в индексе нет, а кэш хранит их раздельно.
Первый экран — фотография города на всю ширину, фирменная текстура и заголовок «от счётчика до аналитики», а внизу — стеклянная полоса пути данных: счётчики → передача данных → цифровая платформа → аналитика и биллинг. Фото зависит от области посетителя: регион определяется на сервере по IP-адресу через локальную базу, которая обновляется раз в месяц. Браузер ничего не спрашивает, IP нигде не сохраняется, а у кого регион не определился — универсальное фото.
В админке для каждой области задаются фото и при необходимости свои IP-диапазоны, а редактор может посмотреть, как главную видят в любой области. Дальше на главной — полный цикл учёта из восьми этапов, преимущества, цифры компании и бренды-производители, решения, технологии передачи данных, кейсы, новости отрасли и блок «Подберём решение».
Каждый раздел отвечает на свой вопрос посетителя и заканчивается понятным следующим шагом:
Документация — отдельный каталог для инженеров и проектировщиков. Документы ищутся по названию, модели и артикулу и фильтруются по типу (инструкции, каталоги, сертификаты, схемы подключения, BIM/CAD), категории оборудования, технологии, производителю и языку. У каждого документа видны формат, размер, версия и дата обновления, устаревшие версии помечены, а часть файлов выдаётся после короткой формы — так компания получает контакт проектировщика.
Кейсы собраны на карте Украины: выбираете город — видите проекты в нём, на телефоне вместо карты аккуратный список городов. В справочнике все 460 городов страны на украинском и английском, поэтому новый кейс привязывается к любому городу выбором из списка. Страница кейса построена как история: объект, проблема до внедрения, как устроена система, использованное оборудование, результат и кнопка расчёта для похожего объекта.
Раздел новостей ведётся в блочном редакторе WordPress с моими блоками — мнение эксперта со справочником экспертов, выделенный факт, призыв, связанные материалы. У материала есть время чтения, оглавление, теги, кнопки «Поделиться» и похожие публикации; фото и галереи можно скачать по одному или архивом. Без заголовка, анонса, обложки и описания картинки материал не опубликуется.
Поиск понимает разные формы слов и ищет и в текстах страниц, и в полях документов и кейсов; подсказки выпадают прямо при наборе и управляются с клавиатуры. Для подписки я написал свою рассылку без внешних сервисов: подтверждение адреса, выбор рубрик и тем, письмо сразу о новом материале или еженедельный дайджест, конструктор писем из блоков, очередь отправки с лимитами, отписка и управление подпиской в один клик, выгрузка подписчиков.
На каждом языке работает 11 форм — подбор решения, консультация, поверка, ремонт, партнёрство, расчёт стоимости и окупаемости, запрос документа, подписка, общая форма на «Контактах». Формы открываются в модальных окнах с удержанием фокуса и закрытием по Esc, а на телефоне выезжают снизу. Каждое обращение получает номер вида CMU-год-номер — он приходит в письме и показывается на экране успеха.
Основной язык сайта — украинский, английская версия переведена полностью: страницы, новости, кейсы, документы, рубрики, меню, формы, письма рассылки и все подписи интерфейса. Адреса у версий одинаковые, отличается только префикс языка; переключатель UA / EN ведёт на ту же страницу, а если перевода нет — показывает это, а не пустую страницу. Общие настройки и блоки сайта имеют свои значения для каждого языка, а незаполненное поле берёт украинский текст.
Главное требование заказчика — никаких текстов, цифр и фото в коде. Каждый блок макета стал полем ACF: на странице, к которой он относится, или в общих разделах «Настройки сайта» и «Блоки сайта» — контакты, отделы, соцсети, кнопка быстрой связи, цифры компании, бренды, тексты окон форм, призывы. Тексты — в визуальном редакторе, при этом вид остаётся как в макете: абзацы и списки сами получают оформление дизайна. У полей есть подсказки, где они показываются на сайте.
Для команды предусмотрены роли: контент-менеджер ведёт новости, медиатеку и заявки, но не трогает страницы, документы и настройки. Медиатека сама убирает геоданные из фото, делает уменьшенные копии в WebP и показывает, где используется картинка. Видео подключается ссылкой на YouTube или файлом.
Сайт готов к продвижению с первого дня: человекопонятные адреса с переадресацией старых, хлебные крошки с микроразметкой, SEO-заголовки и описания на Yoast, языковые метки для поисковиков. Шрифты подключены локально, картинки отдаются в нужном размере и подгружаются по мере прокрутки, внутренние страницы кэшируются, а главная с региональным баннером — нет.
Безопасность — по требованиям ТЗ: заголовки защиты браузера, блокировка подбора пароля, сложные пароли, двухфакторный вход по желанию пользователя, закрытые служебные интерфейсы и журнал действий в админке. Перед передачей я прошёл весь сайт на двух языках и в обеих версиях: страницы без ошибок, все формы проверены, на телефоне нет горизонтальной прокрутки.
Когда компания продаёт сложные инженерные решения, сайт работает как первый консультант. Инженер водоканала, представитель громады или застройщик должен быстро понять, что ему предложат и как это работает. Поэтому в B2B-сайтах я опираюсь на несколько принципов:
Если вам нужен корпоративный сайт полного цикла — от дизайна по техническому заданию до разработки сложных функций, — я проведу проект от первого макета до передачи готового сайта.
