✔ Показати, що компанія будує всю систему обліку, а не лише продає лічильники
✔ Наочно пояснити шлях даних — від лічильника до аналітики
✔ Говорити з партнерами й з бізнесом зрозумілою їм мовою
✔ Приймати заявки через короткі форми в модальних вікнах
✔ Дати команді замовника змогу самостійно оновлювати кейси, документи й контакти
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: усі шаблони за макетом готові, зараз він чекає на фото й контакти замовника. Стилі й скрипти підключено стандартними засобами WordPress, без зайвих бібліотек, а токени бренду з UI-kit перенесено в CSS-змінні — кольори на сайті ті самі, що й у макеті. Що зроблено в темі:
Основна мова сайту — українська, англійську версію закладено за ТЗ.
Коли компанія продає складні інженерні рішення, сайт працює як перший консультант. Відвідувач — інженер водоканалу, представник громади чи забудовник — має швидко зрозуміти, що йому запропонують і як це працює. Тому в корпоративних сайтах для B2B-компаній я спираюся на кілька принципів:
Якщо вам потрібен корпоративний сайт повного циклу — від дизайну за технічним завданням до сайту на WordPress, — я проведу проєкт від першого макета до запуску.
