Промышленному заказчику не нужны яркие обещания — ему нужно быстро понять, делает ли компания нужный продукт, есть ли у неё производство и как запросить расчёт. На примере «Унітехнології» рассказываю, как я сделал корпоративный сайт с каталогом из 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 направлений продукции с единым шаблоном страницы и документацией
- Отдельный раздел из девяти услуг металлообработки
- Аргументы производителя и этапы сотрудничества на главной
- Форма консультации и обратный звонок с любой страницы
Посмотреть сайт проекта
