Оборудование стоит за прозрачной стеной. Насосы гудят, трубы подключены, датчики считывают данные. Экскурсанты останавливаются, смотрят и идут дальше. Система работает, но остаётся закрытой для понимания. Именно с такой задачей ко мне обратился заказчик Geotermo.

Контекст задачи

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

Заказчик: Geotermo, отопление и кондиционирование коммерческих зданий при помощи возобновляемых источников энергии.

«Зелёный офис» Технониколь в Рязани это офисное здание площадью 3000 м², работающее практически в автономном режиме. Для обогрева и охлаждения используется геотермальная система:

• 8 тепловых насосов суммарной мощностью 288 кВт;

• 160 скважин на прилегающей территории;

• 8 000 м геотермальных зондов, по которым циркулирует теплоноситель;

• чиллер общей мощностью 448 кВт для охлаждения.

+ Солнечные панели создают электричество, которое питает насосы в дневное время.

Тепловой узел расположен в отдельном помещении с прозрачными стенами, специально для того, чтобы его было видно. В «Зелёном офисе» регулярно проводятся экскурсии. Но видеть и понимать это разные вещи. Логика движения энергии от земли к зданию не считывается визуально. Гости видят трубы и оборудование, но не видят систему.

Цель

Сделать сложную инженерную систему понятной для широкой аудитории.

Задачи

• Создать дашборд, который наглядно покажет работу геотермальной системы;

• Предусмотреть синхронизацию с геотермальным оборудованием в реальном времени;

• Предусмотреть возможность анимации элементов дашборда (потоков энергии).

Почему это нетривиально: три требования, которые тянут в разные стороны

Я занимаюсь визуализацией работы инженерных и технических систем. Когда искала референсы для этого проекта (весной 2025 года), не увидела ни одного похожего примера. Промышленные SCADA-интерфейсы точные, но перегружены данными и не рассчитаны на неподготовленного наблюдателя. Маркетинговая инфографика про «зелёную» энергетику эстетичная, но говорит на языке финансовой выгоды и оторвана от реальных показателей работы системы. Ни одного примера, где эти два мира объединены, я не нашла, ни в России, ни за рубежом.

Задача требует одновременно:

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

2. Ясности для неподготовленного наблюдателя: за 30 секунд у экрана гость должен понять как работает геотермальная система;

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

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

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

Исследование: сначала разобраться самой

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

Что нужно показать:

• Движение теплоносителя от скважин к тепловому насосу и дальше к системе отопления;

• Текущий режим работы: отопление или кондиционирование;

• Какие насосы включены, а какие в режиме ожидания;

• Температурные параметры в реальном времени;

• Сколько электроэнергии потребляется прямо сейчас;

• Сколько тепла вырабатывается;

• Какая доля из этого: возобновляемая энергия земли;

• Суммарная накопленная выработка «зелёной» энергии в кВт⋅ч;

• Экономия в рублях за всё время работы системы.

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

Поиск визуального языка

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

Первые наработки: общая композиция и стилистика

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

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

Геотермальный колодец. Скважина извлекает тепло из недр земли. При его отрисовке я отталкивалась от концепции «зелёной» экологичной энергии. На предварительном просмотре команда заказчика сразу сказала: «похоже на радиацию». Заменила на тёплый янтарный. Ассоциации стали правильными: тепло, земля, энергия.

Бак-аккумулятор. Накапливает нагретую воду и обеспечивает стабильное теплоснабжение при колебаниях выработки. Здесь показан бак при включении системы на обогрев, однако предусмотрен стиль бака при охлаждении и при отключении.

Система компонентов в Figma

Технически это самый важный раздел проекта.

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

Это потребовало проработки системы состояний оборудования, реализованной через компоненты Figma:

• Каждая сущность (насос, колодец, бак) существует как отдельный компонент с вариантами состояний;

• Переключение между состояниями в один клик через панель свойств компонента;

• Компоненты настроены так, что одна правка в мастер-компоненте распространяется на всю схему автоматически.

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

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

Выгрузка исходников

Для программиста Geotermo подготовила исходники в компоновке, удобной для быстрой и точной вёрстки: проект в Figma, компоненты дашборда и фигмы в svg, шрифты.

Результат

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

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

Проект геотермального отопления одержал победу в ХI Международной премии «Малая энергетика — большие достижения», в номинации «Лучший проект в сфере возобновляемой энергетики, накопителей и электротранспорта».

Что в итоге

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

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

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