Промисловому замовнику не потрібні гучні обіцянки — йому треба швидко зрозуміти, чи робить компанія потрібний продукт, чи має вона виробництво і як замовити розрахунок. На прикладі «Унітехнологій» розповідаю, як я зробив корпоративний сайт із каталогом на 16 напрямів, сторінками послуг і формами консультації.
Про компанію та завдання
«Унітехнології» (бренд UNI METAL technology) — українська компанія, яка працює з 2009 року. Починала вона з інженерного забезпечення промислових і цивільних об’єктів, а сьогодні бере на себе комплексні рішення у проєктуванні та будівництві. Компанія має власні виробничі потужності, сучасне обладнання й повний цикл: від аналізу задуму замовника до введення об’єкта в експлуатацію з усім пакетом супровідної документації. Головний принцип, який компанія виносить на сайт, — один виконавець на всіх етапах і один відповідальний за результат.
Асортимент у такого виробника дуже широкий: щитова продукція, стелажне обладнання, сендвіч-панелі, промислові трапи, повітропроводи, вентильовані фасади, обладнання для бомбосховищ, двері, ворота й огорожі, меблі та димарі з нержавіючої сталі. До цього додаються послуги металообробки на замовлення. Завдання сайту — розкласти все це так, щоб інженер, постачальник чи забудовник швидко знайшов свій напрям і без зайвих кроків зв’язався з компанією.
Шапка, меню та навігація
Шапка спільна для всіх сторінок і працює як коротка візитівка компанії. У верхньому рядку — логотип UNI METAL technology, телефон, пошта й адреса з підписами «Подзвонити нам», «Написати нам», «Завітати до нас», а праворуч — темна кнопка «Замовити дзвінок». Нижче — основне меню:
- «Компанія» — випадний список із розділами «Про нас», «Вакансії» та «Блог»;
- «Каталог продукції» — випадне меню з усіма 16 напрямами, від щитової продукції до вентиляційного обладнання;
- «Послуги» — випадний список послуг металообробки;
- «Галерея» та «Контакти»;
- іконки YouTube, LinkedIn, Facebook, TikTok та Instagram;
- перемикач мови з прапорцем.
Під час прокручування шапка стискається до компактної панелі з меню та кнопкою зворотного дзвінка, тож каталог і заявка доступні в будь-якому місці сторінки. Внутрішні сторінки відкриваються зелено-графітовою плашкою із заголовком і хлібними крихтами — відвідувач завжди бачить, у якому розділі він перебуває.
Головна: від слайдера до форми консультації
Головна вибудувана як шлях промислового замовника від знайомства до заявки:
- слайдер першого екрана на п’ять слайдів із лічильником «01 — 05» і стрілками; на першому — «Будівельні технології» та обіцянка комплексно виконати вимоги замовника;
- «Продукція» — сітка карток із фото й круглою кнопкою-стрілкою та кнопка «Вся продукція»;
- «Послуги компанії» — слайдер на графітовому тлі зі стрілками й крапками: аргонодугове й лазерне зварювання, гнуття металу, обробка на координатно-пробивному верстаті та інші послуги;
- «Переваги компанії» — чотири плитки з іконками: зростаємо з 2009 року, власні виробничі потужності, сучасне обладнання, повний цикл виробництва;
- «Співпраця з нами» — робота «під ключ», супровідна документація й комплексні рішення для промислових, громадських і цивільних об’єктів, лабораторій і дослідних комплексів, об’єктів енергетики;
- «З нами легко взаємодіяти» — чотири кроки на вертикальній лінії: звернення й консультація, комерційна пропозиція в обумовлений термін, технічне завдання або документація на запит, договір і виконання;
- форма «Отримайте консультацію зараз» із полями «Ім’я» та «Телефон».
Підвал повторює структуру сайту повністю: розділи, увесь перелік напрямів каталогу, усі послуги й контакти. До будь-якої сторінки можна дістатися в один клік із самого низу.
Каталог продукції та сторінки напрямів
Каталог — серце сайту. Кожен із 16 напрямів отримав свою сторінку, і всі вони влаштовані однаково — так замовнику простіше порівнювати й не губитися. Візьмімо сторінку «Навісні вентильовані фасади»:
- перший екран поділено на зелену половину із заголовком і хлібними крихтами та велике фото фасаду;
- плитка «Технічна документація» з іконкою PDF — документи можна завантажити просто зі сторінки;
- докладний текст про продукт: з яких панелей виготовляють фасади, де їх застосовують, гарантія на продукцію та монтаж, індивідуальний розрахунок вартості;
- блок «Вигоди та переваги» — естетика, енергоефективність, стійкість до погоди й захист стін;
- кнопка «Більше прикладів продукції»;
- форма консультації, слайдер «Відеоматеріал» із роликами про виробництво та блок етапів співпраці.
Такий шаблон працює для будь-якого напряму: щитів, стелажів, сендвіч-панелей чи дверей. Компанія додає текст, фото, документацію й відео — і сторінка готова.
Послуги металообробки
Послуги винесено в окремий розділ, бо їх замовляють інші клієнти й за іншими запитами. Сторінка «Послуги» — сітка з дев’яти плиток із великими фото й підписом на білій плашці зі стрілкою:
- слюсарні роботи та порошкове фарбування;
- плазмове й лазерне різання металу;
- обробка металу на координатно-пробивному верстаті;
- лазерне й аргонодугове зварювання;
- гнуття металу та токарно-фрезерна обробка.
Фото реальних процесів — іскри зварювання, промінь лазера, листогинний прес — одразу показують, про яку роботу йдеться, ще до того, як відвідувач прочитає підпис.
Про компанію, галерея, вакансії, блог і контакти
Решта сторінок відповідає на запитання тих, хто обирає надійного підрядника або шукає роботу:
- «Про нас» — блоки «Основна мета» та «Про компанію», смуга з чотирьох переваг і форма консультації;
- «Галерея» — фото, поділені на «Продукція», «Виробництво і устаткування» та «Реалізовані об’єкти»;
- «Вакансії» — картки вакансій з очікуваннями від кандидата та завданнями: інженер-технолог з програмування верстатів із ЧПК, директор з персоналу, директор з продажу;
- «Блог» — стрічка статей із пагінацією «Перша», «Попередня», «Наступна», «Остання»;
- «Контакти» — телефон, пошта, адреса, контакти менеджера з продажу й технічного консультанта та форма консультації.
Палітра сайту — фірмовий зелений і графітовий з білим, великі фото виробництва та строга сітка. Такий вигляд пасує промисловій компанії: він спокійний, діловий і не відволікає від продукції.
Що важливо в сайті виробничої компанії
Промислові замовники приходять на сайт виробника з конкретним завданням і мало часу витрачають на читання. З досвіду цього проєкту сайт металообробного чи будівельного виробництва працює, коли:
- каталог доступний з меню на будь-якій сторінці — людина шукає свій напрям, а не гортає головну;
- кожен напрям має свою сторінку з текстом, перевагами й документацією — її зручно переслати колегам, і вона краще знаходиться в пошуку;
- послуги відокремлено від продукції — у них інша аудиторія та інші запити;
- на видноті аргументи виробника: рік заснування, власні потужності, обладнання, повний цикл;
- зрозуміло, з чого починається робота — кроки від запиту до договору знімають страх перед першим дзвінком;
- форма консультації коротка — ім’я й телефон, решту менеджер уточнить сам.
Якщо у вас виробництво з широким асортиментом, почніть із карти напрямів і єдиного шаблону сторінки для кожного з них. Тоді сайт легко зростає разом з асортиментом, а замовник завжди знаходить потрібне й знає, де залишити заявку.
Деталі проєкту
Тип проєктукорпоративний сайт-каталог
КатегоріяКорпоративний сайт
ТехнологіїHTML5, CSS3, JavaScript
Рольрозробка сайту: верстка сторінок, випадне меню каталогу, слайдери, сторінки напрямів і послуг, форми консультації
Клієнт«Унітехнології» (UNI METAL technology)
КраїнаУкраїна
Що зроблено
- Зверстав сторінки: головна, про компанію, вакансії, блог, каталог, сторінка напряму, послуги, галерея, контакти
- Зібрав спільну шапку з контактами, кнопкою «Замовити дзвінок», соцмережами й перемикачем мови
- Зробив випадне меню каталогу на 16 напрямів і компактну шапку під час прокручування
- Зробив слайдер першого екрана з лічильником слайдів і слайдер послуг на головній
- Зверстав блоки переваг, співпраці та чотири етапи роботи з клієнтом
- Зібрав шаблон сторінки напряму: текст, переваги, технічна документація, відео й форма
- Зверстав сторінку послуг із дев’яти плиток і галерею з трьома розділами
- Зробив вакансії, блог із пагінацією та контакти з менеджерами
- Зробив форму консультації й підвал з повною картою каталогу та послуг
Результат
- Корпоративний сайт-каталог виробника українською мовою
- 16 напрямів продукції з єдиним шаблоном сторінки та документацією
- Окремий розділ із дев’яти послуг металообробки
- Аргументи виробника й етапи співпраці на головній
- Форма консультації та зворотний дзвінок з будь-якої сторінки
Переглянути сайт проєкту
