✔ Показать, что компания строит всю систему учёта, а не только продаёт счётчики
✔ Наглядно объяснить путь данных — от счётчика до аналитики
✔ Говорить на своём языке с партнёрами и с бизнесом
✔ Принимать заявки через короткие формы в модальных окнах
✔ Дать команде заказчика самой обновлять кейсы, документы и контакты
Clever Meter Ukraine пришла с подробным техническим заданием на 65 страниц: корпоративный сайт на украинском и английском, две аудитории — «Партнёры» (водоканалы, теплосети, громады, дилеры) и «Бизнес» (застройщики, управляющие компании, предприятия), фирменная текстура воды и чёткие требования к анимациям, формам и доступности.
Сначала я сделал дизайн: направление стиля по брендбуку, главную, 20 шаблонов внутренних страниц, UI-kit со всеми состояниями элементов, лист анимаций и модальные окна для форм. Шапка, подвал, кнопки и CTA-блок — компоненты, поэтому правка в одном месте расходится по всем страницам.
Дальше — разработка: сайт собирается на WordPress на моей теме burum. Контакты и общие настройки — в ACF, формы — на Contact Form 7 в модальных окнах с номером обращения, кейсы и техническая документация — отдельные разделы с фильтрами, SEO — на Yoast. Основной язык — украинский, английская версия заложена по ТЗ.
Сайт, в котором сложная инженерная тема читается с первого экрана, а контент заказчик обновляет сам.
Полоса «счётчики → передача данных → платформа → аналитика» прямо в главном баннере
Токены, типографика, сетка на 12 колонок, кнопки и поля во всех состояниях
Разделы, новости, кейсы, документация, контакты, поиск, 404 — по карте сайта из ТЗ
Тема burum, общие настройки в ACF, SEO на Yoast, переключатель UA / EN в шапке
10 форм Contact Form 7 в модальных окнах, после отправки — номер вида CMU-год-номер
Кейсы с картой городов, каталог документов с фильтрами по типу, технологии, бренду и языку
От дизайн-системы и шаблонов страниц до сайта на WordPress, которым заказчик управляет сам.
Сайт решает несколько основных задач:
Ответ гарантированно в течение 24 часов.
Первая консультация бесплатна и ни к чему не обязывает.
Сайт компании, которая продаёт не просто приборы, а целые системы учёта, должен одновременно вызывать доверие и объяснять. На примере Clever Meter Ukraine рассказываю, как я превратил техническое задание на 65 страниц в дизайн-систему и шаблоны страниц, а затем — в сайт на WordPress на собственной теме.
Clever Meter Ukraine занимается учётом воды и тепла: подбирает и поставляет счётчики, организует автоматический сбор и передачу показаний, предлагает программное обеспечение, аналитику и интеграцию с биллинговыми системами. Компании нужен новый корпоративный сайт, который с первого экрана покажет главное: она строит всю систему учёта, а не только продаёт приборы.
Заказчик передал подробное техническое задание на 65 страниц: карта сайта, состав блоков каждой страницы, сегментация аудитории, требования к фирменной текстуре, анимациям, формам и доступности. Сайт — на украинском, с английской версией. Проект я веду целиком: сначала дизайн в Figma, затем разработка на WordPress.
У сайта две аудитории с разными вопросами. «Партнёры» — водоканалы, теплоснабжающие предприятия, громады и дилеры. «Бизнес» — застройщики, управляющие компании, промышленные и коммерческие предприятия. По ТЗ структура и навигация у сегментов общие, а меняются акценты: подзаголовок, рекомендуемые решения, кейсы и призывы к действию.
В шапке рядом с телефоном, почтой, поиском и переключателем языка я предусмотрел ссылку на версию для другого сегмента, а в первом экране — плашку, которая сразу говорит посетителю, для кого эта страница.
Первый экран — фотография города на всю ширину с мягким затемнением, фирменной текстурой и крупным заголовком: современный учёт воды и тепла — от счётчика до аналитики. По ТЗ баннер меняется в зависимости от региона посетителя, поэтому фото вынесено в отдельный слой. Внизу баннера — стеклянная полоса пути данных: счётчики → передача данных → цифровая платформа → аналитика и биллинг.
Дальше главная раскрывает предложение по шагам:
Шапку, подвал, плавающую кнопку быстрой связи, кнопки и CTA-блок я вынес в компоненты Figma. Внутренние страницы построены по общей схеме: баннер раздела с фото, хлебными крошками, заголовком и акцентной кнопкой → блоки по ТЗ → призыв к действию → подвал. Всего 20 шаблонов — направления и решения, телеметрия, программное обеспечение, сервис, техническая документация, новости и кейсы, о компании, контакты, академия и служебные страницы: поиск, благодарность, подписка, политики, 404 и технические работы.
Отдельная страница макета — UI-kit, по которому сайт собирается без догадок:
Фирменный оранжевый появляется только там, где есть действие или движение данных — главные кнопки, пунктиры путей данных, номера этапов, ключевые цифры — и занимает не больше 10% экрана. Белый текст на оранжевом не используется: такая пара не проходит проверку контраста, поэтому на акцентных кнопках тёмно-синий текст.
ТЗ требует, чтобы анимация объясняла, а не украшала. Движение для каждой секции описано прямо в макете, а на отдельном листе собраны общие правила и 17 блоков — что движется, сколько миллисекунд и зачем. Анимация показывает путь данных, усиливает цифры и удерживает внимание; декоративного движения нет.
Для форм обращения из ТЗ я спроектировал модальное окно в четырёх состояниях — заполнение, ошибка проверки, отправка и успех с номером обращения — и правила поведения: закрытие по Esc и клику по фону, удержание фокуса внутри окна, повторная отправка не раньше чем через 60 секунд, нижняя шторка на мобильных и зоны нажатия от 44 px.
Сайт свёрстан на WordPress на моей теме burum: все шаблоны по макету готовы, сейчас он ждёт фото и контактов заказчика. Стили и скрипты подключаются штатно, без лишних библиотек, а токены бренда из UI-kit перенесены в CSS-переменные — цвета на сайте те же, что в макете. Что сделано в теме:
Основной язык сайта — украинский, английская версия заложена по ТЗ.
Когда компания продаёт сложные инженерные решения, сайт работает как первый консультант. Посетитель — инженер водоканала, представитель громады или застройщик — должен быстро понять, что ему предложат и как это работает. Поэтому в корпоративных сайтах для B2B-компаний я опираюсь на несколько принципов:
Если вам нужен корпоративный сайт полного цикла — от дизайна по техническому заданию до сайта на WordPress, — я проведу проект от первого макета до запуска.
