Archi Lab — География в цифрах
Как мы перенесли брутальную структуру в мир архитектурного бюро, работающего с 3D-моделями и топографическими данными.
Archi Lab — бюро из Новосибирска, специализирующееся на генеративной архитектуре и городском планировании. Их продукт — интерактивные 3D-карты, где рельеф, застройка и транспортные потоки переплетаются в единый цифровой слой. Задача была не «сделать красиво», а выдержать тактильность данных без потери скорости и без превращения интерфейса в игрушку.
Что стояло за задачей
Бюро уже год вело внутренний прототип на WebGL, но публичная витрина выглядела как шаблон из 2016-го. Им нужно было лицо, которое бы объясняло сложность генеративных форм за секунды, а не за минуты чтения.
Мы взяли на себя айдентику, дизайн-систему и веб-платформу — от иконки до отрисовки 1,2 миллиона треугольников в браузере. Бюджет проекта: 3,4 млн ₽. Сроки: 11 недель с момента брифа до запуска.
Данные, которые не прощают компромиссов
Archi Lab оперирует массивами, которые в классическом вебе просто не помещаются. Наша задача была превратить «тяжелый» продукт в среду, куда хочется вернуться.
Первый вызов — плотность информации. На одной сцене одновременно живут рельеф, сетка застройки, изолинии высот и слой логистики. Обычный UI тонул в этих слоях. Второй — тактильность: архитекторы привыкли «щупать» форму мышью, поэтому интерфейс обязан реагировать мгновенно, без задержки в 150 мс. Третий — контраст с рынком: конкуренты делали «мягкие» и пастельные дашборды, и бюро просило уйти от этого.
Мы решили держать brutalist-lite: жесткая сетка, крупная типографика Space Grotesk, один акцентный цвет #d4ff00 и честные границы. Но там, где речь шла о данных, структура подчинялась геометрии модели, а не наоборот.
От иконок до 3D-интерактивов
Система из 64 компонентов, где каждый элемент знает, как вести себя рядом с рендером.
Мы собрали библиотеку иконок на модульной сетке 24×24 с шагом 2px — от слоёв рельефа до инструментов орбитального вращения. Каждая иконка дублируется в 3D-кнопке на сцене, чтобы жесты мыши и клики по панели вели себя одинаково.
Для сложных интерактивов описали токены состояния: hover, active, loading и «данные загружены». Переход между состояниями занимает 200 мс с cubic-bezier(0.4, 0, 0.2, 1) — достаточно быстро, чтобы интерфейс ощущался живым, но не дёргался.
Что вошло в дизайн-кит
Сетка и типографика
Базовая сетка 12 колонок с gutter 24px. Заголовки на Space Grotesk, тело на Manrope. Акцентный цвет #d4ff00 применяется только к ключевым данным и CTA — не более 8% поверхности экрана.
3D-виджет орбиты
Кастомный контроллер вращения с инерцией. Угол наклона фиксируется при наведении на слой, что позволяет «прищупать» модель одной рукой, пока вторая листает легенду.
Слайдеры слоёв
Три независимых канала прозрачности: рельеф, застройка, транспорт. Значения сохраняются в URL, поэтому ссылку на конкретную композицию можно отправить коллегам за секунды.
Токены состояния
Единый набор переменных для hover, active, loading и data-ready. Все анимации на 200 мс, easing cubic-bezier(0.4, 0, 0.2, 1), без лишних эффектов.
Архитектура и производительность
Браузер — это не игрушечный рендерер. Мы построили платформу так, чтобы 1,2 млн треугольников не превращали страницу в слайд-шоу.
В основе — WebGL 2.0 с собственным пайплайном отрисовки: LOD-уровни для рельефа, фичеризация застройки и батчинг текстур. Модель города Новосибирска весом 380 МБ грузится за 2,1 секунды на 4G, потому что мы разбили её на 14 тайлов и подгружаем только видимый фрагмент.
Фронтенд собран на чистом JS без тяжёлых фреймворков — всего 42 КБ после gzip. Серверная часть на Node.js отдаёт данные по gRPC, а кэш на Edge-нодах сократил время первого ответа до 80 мс. Нагрузка на GPU удерживается ниже 60% даже при полном включении всех слоёв.
Как выглядит «брутальный» рендер
Архитектурные рендеры часто уходят в глянец. Мы сознательно сдвинули стилистику в сторону тактильности: грубая фактура, чёткие тени, один акцентный цвет.
Для визуальной части кейса мы снимали физические прототипы бюро в студии Archi Lab. Своты выбирали из палитры #0f0e13, #181621 и #d4ff00 — так же, как в интерфейсе. На фотографиях модели города сняты под углом 45° с короткой выдержкой, чтобы подчеркнуть структуру сетки, а не «красивый» закат.
Постобработка минимальная: контраст +10%, лёгкий шум, без HDR-эффектов. Результат — визуальный язык, который одинаково читается и в браузере, и в печатной айдентике.
Итоговые показатели вовлеченности
За первые 90 дней после запуска платформа Archi Lab стала главным инструком для презентаций бюро перед заказчиками.
Средняя сессия выросла с 3,2 до 11,4 минуты — пользователи начали исследовать слои, а не просто смотреть. Конверсия в заявку на консультацию составила 4,7% от всех посетителей. Бюро получило 23 новых проекта в Q4, из них 9 — в сегменте генеративной архитектуры.
Archi Lab получила шортлист на Awwwards и награду «Best UI» на Russian Design Awards 2024. Для нас главное — платформа не превратилась в игрушку: архитекторы реально работают в ней каждый день.
Хотите так же с вашими данными?
Мы адаптируем brutalist-lite под любой продукт с плотной информацией — от финтеха до науки. Расскажите о задаче, и мы вернёмся с предварительной сметой в течение 48 часов.
Обсудить проект