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

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

О клиенте

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

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

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

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

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

Мы выделили три ключевых направления:

— упростить и прояснить структуру, чтобы пользователь сразу понимал, чем занимается компания и какие услуги она предоставляет;

— выстроить последовательный пользовательский путь, чтобы посетители не останавливались на главной странице, а переходили дальше и свободно изучали сайт;

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

⚙️ Отдельно изменилась работа с контентом. Благодаря переходу на Webflow команда клиента может самостоятельно обновлять сайт без участия разработчиков — это упрощает поддержку и ускоряет любые изменения.

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

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