Оборудование стоит за прозрачной стеной. Насосы гудят, трубы подключены, датчики считывают данные. Экскурсанты останавливаются, смотрят и идут дальше. Система работает, но остаётся закрытой для понимания. Именно с такой задачей ко мне обратился заказчик Geotermo.
Контекст задачи
Геотермальное отопление это тепловая установка, которая в качестве бесплатного источника энергии использует низкопотенциальное тепло земли. В основе системы лежит теплообменник и тепловой насос, которые извлекают и преобразуют низкопотенциальное геотермальное тепло в тепловую энергию, пригодную для отопления, горячего водоснабжения и кондиционирования.
Заказчик: Geotermo, отопление и кондиционирование коммерческих зданий при помощи возобновляемых источников энергии.
«Зелёный офис» Технониколь в Рязани это офисное здание площадью 3000 м², работающее практически в автономном режиме. Для обогрева и охлаждения используется геотермальная система:
8 тепловых насосов суммарной мощностью 288 кВт;
160 скважин на прилегающей территории;
8 000 м геотермальных зондов, по которым циркулирует теплоноситель;
чиллер общей мощностью 448 кВт для охлаждения.
+ Солнечные панели создают электричество, которое питает насосы в дневное время.
Тепловой узел расположен в отдельном помещении с прозрачными стенами, специально для того, чтобы его было видно. В «Зелёном офисе» регулярно проводятся экскурсии. Но видеть и понимать это разные вещи. Логика движения энергии от земли к зданию не считывается визуально. Гости видят трубы и оборудование, но не видят систему.
Цель
Сделать сложную инженерную систему понятной для широкой аудитории.
Задачи
Создать дашборд, который наглядно покажет работу геотермальной системы;
Предусмотреть синхронизацию с геотермальным оборудованием в реальном времени;
Предусмотреть возможность анимации элементов дашборда (потоков энергии).
Почему это нетривиально: три требования, которые тянут в разные стороны
Я занимаюсь визуализацией работы инженерных и технических систем. Когда искала референсы для этого проекта (весной 2025 года), не увидела ни одного похожего примера. Промышленные SCADA-интерфейсы точные, но перегружены данными и не рассчитаны на неподготовленного наблюдателя. Маркетинговая инфографика про «зелёную» энергетику эстетичная, но говорит на языке финансовой выгоды и оторвана от реальных показателей работы системы. Ни одного примера, где эти два мира объединены, я не нашла, ни в России, ни за рубежом.
Задача требует одновременно:
Технической точности: интерфейс синхронизирован с геотермальным оборудованием, параметры меняются в реальном времени;
Ясности для неподготовленного наблюдателя: за 30 секунд у экрана гость должен понять как работает геотермальная система;
Визуальной привлекательности: дашборд является частью экскурсионного пространства и работает как элемент экспозиции.
Мне нужно найти баланс между этими требованиями, собрать технически точный и при этом понятный дашборд.
Нейросети в таких задачах не использую, потому что это неизбежно приводит к искажению смысла.
Исследование: сначала разобраться самой
Я не занимаюсь визуализацией «по ощущениям». Рассматриваю каждый проект как систему, которую сначала нужно понять изнутри. Работала в тесной связке с командой Geotermo: мне важно чтобы схема отражала как работает конкретное оборудование, а не «геотермальное отопление в целом».
Что нужно показать:
Движение теплоносителя от скважин к тепловому насосу и дальше к системе отопления;
Текущий режим работы: отопление или кондиционирование;
Какие насосы включены, а какие в режиме ожидания;
Температурные параметры в реальном времени;
Сколько электроэнергии потребляется прямо сейчас;
Сколько тепла вырабатывается;
Какая доля из этого: возобновляемая энергия земли;
Суммарная накопленная выработка «зелёной» энергии в кВт⋅ч;
Экономия в рублях за всё время работы системы.
Последние два параметра принципиально важны для заказчика. Система должна не просто работать, но и демонстрировать свою эффективность инвесторам и гостям.
Поиск визуального языка
Заказчик предоставил примеры стилистики, общую схему работы оборудования, логотип и фирменную палитру. Далее моя работа: собрать структуру дашборда и найти визуальный стиль, отрисовать все компоненты схемы и продумать визуальное отображение состояний каждого компонента.
Первые наработки: общая композиция и стилистика
Компоновка схемы. Потоки энергии должны легко отслеживаться взглядом. Направление движения: от земли вверх, к зданию. Это определило вертикальную логику схемы. Потоки энергии предназначены под анимацию, поэтому при компоновке я заранее думала о том, как будет выглядеть движение: не статичный элемент, а живой процесс.
Тепловой насос. Пробовала несколько ракурсов и вариантов компоновки. В итоге выбрали прямой ракурс: визуализация подключения получается более схематичной, что упрощает считывание, а саму схему удобно масштабировать под разные компоненты геотермальной системы.
Геотермальный колодец. Скважина извлекает тепло из недр земли. При его отрисовке я отталкивалась от концепции «зелёной» экологичной энергии. На предварительном просмотре команда заказчика сразу сказала: «похоже на радиацию». Заменила на тёплый янтарный. Ассоциации стали правильными: тепло, земля, энергия.
Бак-аккумулятор. Накапливает нагретую воду и обеспечивает стабильное теплоснабжение при колебаниях выработки. Здесь показан бак при включении системы на обогрев, однако предусмотрен стиль бака при охлаждении и при отключении.
Система компонентов в Figma
Технически это самый важный раздел проекта.
В схеме задействовано множество одинаковых сущностей, которые постоянно меняют состояние: включен на обогрев / включён на охлаждение / отключён; а направление насосов зависит от режима работы системы. Если делать каждую комбинацию состояний отдельным артбордом, проект становится неуправляемым уже на этапе согласования, не говоря о корректировках.
Это потребовало проработки системы состояний оборудования, реализованной через компоненты Figma:
Каждая сущность (насос, колодец, бак) существует как отдельный компонент с вариантами состояний;
Переключение между состояниями в один клик через панель свойств компонента;
Компоненты настроены так, что одна правка в мастер-компоненте распространяется на всю схему автоматически.
Это позволило быстро просматривать различные режимы работы системы и согласовывать их с заказчиком без путаницы. Когда потребовалось изменить цвет геотермального колодца, замена цвета заняла пару минут и корректировка автоматически применилась ко всем восьми экземплярам колодцев единовременно.
Система компонентов спроектирована с расчётом на масштабирование: дашборд может быть адаптирован под любой объект Geotermo без переработки архитектуры. В перспективе на базе этой системы планируется создание диспетчерского центра мониторинга, где в едином интерфейсе будет отображаться работа систем Geotermo на объектах по всей России.
Выгрузка исходников
Для программиста Geotermo подготовила исходники в компоновке, удобной для быстрой и точной вёрстки: проект в Figma, компоненты дашборда и фигмы в svg, шрифты.
Результат
Два экрана дашборда, которые с определённой цикличностью сменяют друг друга.
Интерфейс полностью синхронизирован с оборудованием. Динамические элементы спроектированы под анимацию. Повторяемые сущности реализованы в системе компонентов, дашборд готов к поддержке и масштабированию.
Проект геотермального отопления одержал победу в ХI Международной премии «Малая энергетика — большие достижения», в номинации «Лучший проект в сфере возобновляемой энергетики, накопителей и электротранспорта».
Что в итоге
Задачи визуализации физических процессов для неподготовленной аудитории это отдельный класс задач, который не покрывается ни промышленными интерфейсами, ни маркетинговой инфографикой. Здесь нужно одновременно работать с реальными техническими данными, проектировать систему состояний и думать о восприятии человека, который подходит к экрану на 30 секунд, ничего не зная о системе заранее.
Для меня принципиально важно не отделять визуальную часть от смысла: дашборд это не украшение, а функциональный объект, который формирует понимание системы. Именно поэтому работа начинается с погружения в логику процесса, а не с поиска красивой стилистики.
Сталкивались ли вы с задачами визуализации производственных или инженерных процессов для неподготовленной аудитории: посетителей, инвесторов, экскурсантов? Как решали?