✔ Показати, що компанія будує всю систему обліку, а не лише продає лічильники
✔ Говорити окремо з партнерами (водоканали, громади, дилери) і з бізнесом
✔ Наочно пояснити шлях даних — від лічильника до аналітики та білінгу
✔ Збирати заявки з номером звернення й спрямовувати їх у потрібний відділ
✔ Дати інженерам документацію, а маркетингу — новини та розсилку
✔ Дозволити команді замовника змінювати весь контент двома мовами без програміста
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-сайтах я спираюся на кілька принципів:
Якщо вам потрібен корпоративний сайт повного циклу — від дизайну за технічним завданням до розробки складних функцій, — я проведу проєкт від першого макета до передачі готового сайту.
