Место, где хочется остаться: сайт бизнес-центра Ликова — Site of the Day на Awwwards и CSSDA

Ликова — деловой центр группы «Абсолют» в Новой Москве. Здание видно издалека: кубические объёмы из стекла и металла с переменной этажностью, приподнятые над землёй, зелёный двор со смотровой площадкой внутри. Это архитектура, спроектированная с мыслью о том, что рабочее место должно вдохновлять, а не просто быть крышей над головой.

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

На пути стояли три сложности.

Стереотип категории. Застройщики бизнес-центров чаще всего говорят на языке сухих фактов: квадратные метры, варианты отделки, количество машиномест. Большинство их сайтов устроены одинаково: слайдер с рендерами, блок планировок, карта, форма заявки. Человек переходит с одного такого сайта на другой и видит ту же структуру, меняется только название объекта. При этом арендатор ищет не просто помещение, а место, где его команде будет хорошо. Сайт, который даёт только цифры, заставляет сравнивать цифры и не объясняет, почему здесь дороже.

Строгость без скуки. Общий стиль проекта должен был оставаться выдержанным, в деловой тональности. Нужно было сделать сайт живым, не разрушив этой строгости.

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

Мы не думали категориями «каким должен быть сайт бизнес-центра». Подход к дизайну определил характер объекта, а не его категория: если здание сделано с вниманием к человеку, его сайт должен говорить живо.

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

Форма здания как стилеобразующий элемент

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

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

Анимация, в которой здание перестраивается

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

Статичный элемент оживает, а вместе с ним и страница. Человек не просто видит ступенчатую форму, он чувствует её в движении, и прокрутка становится ритмичной. Так строгий деловой стиль получил живость, не потеряв выдержанности.

Арт-дирекшн рендеров

Мы убедили заказчика отказаться от передачи рендеров «как есть» и взяли на себя арт-дирекшн визуализаций для сайта. Мы определяли ракурсы — какие грани здания показывать, с какой высоты, при каком освещении. Композицию задавали под конкретные экранные макеты, чтобы акцент попадал в видимую область, а не терялся за её пределами.

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

Три 3D-сцены, каждая со своей задачей

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

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

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

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

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

Ликова получил звание «Сайт дня» сразу на двух международных площадках — Awwwards и CSS Design Awards. Для сайта коммерческой недвижимости это редкость: в категории, где большинство сайтов собраны по одному шаблону, профессиональное сообщество отметило проект, который от этого шаблона отказался.

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

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

Строгость при этом не пострадала. Сайт остался в деловой тональности, но перестал быть сухим: живость ему дают движение и ритм, а не декоративные приёмы.

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