Как сделать красивый сайт в консервативной индустрии: редизайн для нефтегазовой отрасли

Похожую задачу — обновить сайт завода, не потеряв характер бренда, — мы разобрали в кейсе НТЭС.

Недавно на проекте мы столкнулись с ситуацией: сайт устарел, пользователи почти не двигались дальше главной страницы, а решать задачу только за счет усиления визуалов не получилось бы — это могло снизить доверие. Рассказываем, как пересобрали структуру и нашли решение.

О клиенте

Наш заказчик — компания, которая занимается диагностикой и ремонтом трубопроводов. Она работает с нефтяными, газовыми и водными магистралями. С помощью специальных устройств проверяет трубы на коррозию, деформации и утечки, а затем помогает устранить найденные проблемы. Для такого бизнеса сайт — инструмент, который должен быстро объяснять, чем занимается компания и почему ей можно доверять.

Когда клиент пришел в Purrweb, у компании уже был сайт на WordPress. Но со временем он перестал решать сразу несколько важных задач. 

Во-первых, пользователи почти не двигались дальше главной страницы: меньше 1% переходили на другие разделы. Во-вторых, сайт не выглядел современным, а в компании не было специалистов, которые могли бы поддерживать его самостоятельно: любые изменения зависели от внешнего разработчика.

Так выглядел старый сайт компании:

При этом задача была не из тех, где было бы достаточно «подкрутить» интерфейс. 

🛠 Нам предстояло обновить сайт так, чтобы он выглядел современнее, но не выпадал из ожиданий рынка. В этом и был главный вызов проекта.

У вас тоже сайт есть, но он не приводит к результату?

Мы помогаем пересобирать структуру и сценарии так, чтобы пользователи не уходили с главной, а двигались к целевому действию.

Напишите — разберем, где теряются ваши пользователи

Напишите — разберем, где теряются ваши пользователи

Контекст индустрии: одинаковые сайты — не случайность

На старте мы посмотрели, как выглядят сайты компаний в этой сфере. Оказалось, что подход во многом схожий: используется простая структура, сдержанные цвета и минимум декоративных элементов. 

Заказчик работает в сложной B2B-нише, где решения принимают специалисты из крупных компаний. Им не нужно сравнивать визуальные стили интерфейсов: важнее быстро понять, подходит ли подрядчик под задачу и можно ли ему доверять.

Слишком яркий или нестандартный дизайн может восприниматься как отклонение от привычной логики, а значит, и снижать доверие. А мы помним, что конверсия в переход на другие страницы и без того была меньше 1%😭

Так что этот контекст стал основой для всех последующих решений: нам нужно было обновить сайт, не разрушая ту модель восприятия, к которой привыкла аудитория бизнеса.

Попробовали более выразительный подход

Понимая ограничения индустрии, на старте мы все же решили посмотреть, как может выглядеть более выразительное решение. Нам хотелось найти баланс: сохранить понятную структуру, но за счет визуала сделать сайт ярче на фоне конкурентов.

Мы подготовили два мудборда с немного разными направлениями: 

Решили усилить графику и поработать с визуальными метафорами. Мы оттолкнулись от продукта: формы и детали оборудования стали основой визуального языка и легли в графику интерфейса. На этой базе собрали концепт главной страницы.

Опираясь на мудборд, собрали первую версию концепта главной страницы.

Немного деталей: так выглядели графические элементы, в основе которых — элементы оборудования. 

Работаете в сложной B2B-нише, где креатив не всегда приветствуется?

Мы умеем находить баланс между понятностью для аудитории и современным дизайном.

Обсудить проект

Обсудить проект

Нашли точки соприкосновения в разных подходах 

Первый концепт выявил разное видение задачи. Мы предложили выразительный дизайн — с интересной графикой, текстурами и визуальными акцентами — чтобы выделиться на фоне конкурентов. Клиент настаивал на сдержанном решении со строгой структурой и минимальным декором, что более привычно для B2B-индустрии.

Клиент активно участвовал: приносил референсы, объяснял специфику инструментов. С одной стороны, это помогло глубже понять продукт, но в то же время усилило расхождение в подходах к визуалу.

Это не был жесткий отказ — скорее сигнал о несоответствии ожиданиям целевой аудитории. В B2B-проектах это нормальная ситуация: интерфейс должен соответствовать ментальным моделям пользователей, а не только эстетическим трендам.

Решение: мы пересобрали визуал. Убрали активные градиенты и часть декоративных элементов, усилили структуру и читаемость. Приблизили дизайн к индустриальному стандарту, сохранив сильные находки из концепта.

Узнали, что ИИ не умеет делать ролики с промышленным оборудованием 

Клиент предложил добавить на сайт 3D-анимации с оборудованием. Такие видео могли бы наглядно объяснить, как работают его решения. Чтобы не уходить в дорогое 3D-моделирование, решили протестировать нейросети — как более быстрый и доступный вариант.

Мы попробовали несколько инструментов, но столкнулись с ограничениями.

Главная проблема — сложность самих объектов. Оборудование состоит из множества деталей, и для клиента было важно, чтобы каждая из них отображалась точно. Нейросети с такими задачами справлялись плохо: искажали форму инструментов, теряли важные элементы и вообще упрощали детали до неузнаваемости. Все-таки это не генерация эффектных голливудских трейлеров: здесь важно показать именно реальное оборудование, а не что-то, издалека напоминающее его 🙂

Отдельный фактор — это исходные файлы. 3D-модели были тяжелыми и в форматах, которые не поддерживались большинством сервисов. В одних случаях файлы просто не открывались, в других сильно страдало качество генераций.

В итоге от идеи с ИИ-анимациями пришлось отказаться. Вместо этого мы использовали те визуальные материалы, которые уже были у клиента, и встроили их в интерфейс без потери качества.

✍🏻 Этот этап подсветил важную вещь: нейросети хорошо работают с автоматизацией рутины, но в задачах, где важна предельная точность и детализация, они пока не могут заменить ручную работу.

Добавили этап с вайрфреймами, и как это повлияло на результат

Клиенту было важно заранее понять, как будут выглядеть страницы, какие блоки на них появятся и как пользователь будет перемещаться между разделами.

Чтобы не растягивать сроки, мы не рисовали вайры с нуля. Вместо этого использовали готовые решения и адаптировали их под задачи проекта. 

Отдельно проработали переходы между страницами. Мы продумывали, куда пользователь попадает после каждого блока, какие действия он может совершить и как выстроить последовательность просмотра.

В результате получилась система без тупиков: с любой страницы пользователь может либо углубиться в тему, либо перейти к следующему логичному шагу. Так мы смогли решить исходную проблему — люди перестают «застревать» на одной странице и начинают двигаться дальше по сайту. 

Не уверены, как выстроить структуру сайта или продукта?

Поможем разложить логику, продумать пользовательские сценарии и собрать интерфейс, который приведёт пользователя к нужному действию.

Получить оценку проекта

Получить оценку проекта

Webflow и гайдбук: простая поддержка сайта

Клиент планировал самостоятельно обновлять сайт: добавлять новые страницы, менять тексты и загружать изображения. При этом у него уже было много разнородных материалов — фотографии, рендеры, изображения оборудования — и без системы сайт со временем мог потерять целостность.

Чтобы этого избежать, мы подготовили гайдбук — набор правил, которые помогают сохранять единый визуальный подход при любых обновлениях. В него вошли рекомендации по работе с изображениями и графикой, а также правила построения блоков и страниц. 

Параллельно с дизайном мы собрали сайт на Webflow так, чтобы команде клиента было удобно работать с ним без разработчиков и технических навыков. 

Результат и финальный дизайн

У заказчика появился обновленный сайт, который решает сразу несколько задач:

Вот что получилось в итоге:

Иногда важнее сохранить привычную для аудитории логику и немного улучшить её. Баланс между новым и ожидаемым — то, что напрямую влияет на доверие.

➡️ Нужен сайт, который реально помогает бизнесу? Мы на связи!

В этом проекте мы продумали структуру и пользовательские сценарии так, чтобы с любой страницы можно было перейти дальше — без тупиковых сценариев. Мы так работаем и с другими проектами: сначала разбираемся в задаче и логике продукта, потом проектируем структуру и пользовательский путь, и только после этого собираем дизайн и разработку.

Если у вас похожая задача — например, сайт есть, но не дает результата, или его сложно поддерживать внутри команды — поможем разобраться и предложим решение.

Расскажите нам о проекте — прикинем сроки, бюджет и план работы.

Почему Purrweb

🔹 Проектируем под конкретную задачу
Помогаем выстроить структуру и сценарии так, чтобы пользователь понимал, что делать дальше.

🔹 Умеем работать со сложными B2B-продуктами
Учитываем ожидания аудитории и ограничения индустрии — без лишних экспериментов ради визуала.

🔹 Делаем так, чтобы продукт было удобно поддерживать
Продумываем не только запуск, но и то, как команда будет работать с продуктом дальше.