Кейс: Quartier — как мы приручили 24 подъезда в доме длинною с улицу. Часть 1
Начиналось всё с типового запроса: структура, контент, план. Но вскоре стало ясно — у проекта не будет стандартного маршрута. 24 подъезда, девять зданий в одном комплексе, немецкий язык со словами по тридцать букв, и архитектура с характером. Мы понимали: либо это будет просто ещё один сайт с таблицами, либо — полноценная цифровая сцена с эмоцией и точностью.
Quartier стал именно сценой — 🧩 интерактивной, многослойной, живой. С WebGL, акварелью и лицом Ганса Сакса на прелоудере.
📎 Когда инструкция не работает Немецкие сайты по недвижимости выглядят как таблицы Excel с иконками: ровно, сухо, строго. Эстетика? Не надо. Эффекты? Запрещено. Всё по сетке. Всё предсказуемо. Навигация — по шаблону, карточки квартир — строго по колонкам, фильтры — только базовые: площадь, этаж, комнаты. И в этом — не недостаток, а почти культурный канон. Но мы сюда не вписывались. Это не тот случай, где работает формула «белый фон + фотографии + бронировать». Мы понимали: если хотим передать масштаб и характер объекта — нужно строить не сайт, а визуальную сцену.
🎨 Стиль, который диктует акварель Quartier вдохновлён реконструкцией исторической застройки. Вместо стеклянной стерильности мы выбрали акварель. Акварель здесь не про эстетику. Она создаёт переход между индустриальным прошлым и будущим жильём. Смягчает структуру, добавляет дыхания, превращает интерфейс из каркаса в среду.
Но у акварели была и технологическая причина: WebGL в те годы не позволял использовать сложные текстуры без ущерба производительности. Чтобы скрыть упрощение геометрии, мы использовали акварельную визуализацию — ограниченную палитру, мягкие формы, которые снижали нагрузку и ускоряли загрузку сцены. Всё выглядело аккуратно — и работало быстрее.
Она появляется в логотипе, который медленно проявляется на прелоудере, вместе со стихами Der Eiszapf — героя сатирического стихотворения Ганса Сакса, немецкого поэта и драматурга 16-го века, в честь которого названа улица, где и расположен дом.
Этот образ не был случайным. Он стал частью визуального ритма, точкой входа в проект, и параллелью между архитектурной реконструкцией и культурным слоем Германии. Немцы не любят неожиданные образы. Но в этот раз образ был из их собственной истории.
🚀 WebGL — не фича, а единственный выход Дом — это не одна коробка, а девять исторических зданий, объединённых в единый жилой комплекс. Его структура была настолько протяжённой, что в какой-то момент казалось, будто мы проектируем не сайт, а цифровой квартал.
Сайт работал полностью на немецком языке — 🇩🇪 А это значит: слова на 30 букв, которые не переносятся. Заголовок может развалить сетку, если не учитывать длину. Поэтому дизайн здесь — это не просто пиксели, это геометрия под контекст. Мы считали ширину букв как инженеры считают нагрузки.
Теперь добавим: 24 подъезда, 5 этажей, десятки планировок. Выбор квартиры, фильтрация, бронирование — всё в рамках одной сцены. Не лендинг, а пространственная навигация. Интерфейс, по которому пользователь переходит между секциями, этажами и квартирами — как будто движется внутри объекта.
Обычные инструменты не подходили. Мы выбрали WebGL — не как модную технологию, а как необходимость. Только он позволил визуализировать весь комплекс: фасады, повороты, выбор квартиры, подсветку нужного этажа.
Мы собрали всё: карту, фильтр, параметры. Пользователь мог отфильтровать квартиры по этажу, площади, количеству комнат — и сразу увидеть результат прямо на интерактивной модели. Никаких таблиц рядом. Всё внутри объекта. Это была не презентация — это была навигация в трёхмерном пространстве.
WebGL здесь не для красоты. Он для того, чтобы 24 подъезда не превратились в 24 PDF-файла.
👉 Продолжение — в части 2.
