Привлечь аудиторию, получить узнаваемость, активизировать продажи еще до фактического запуска проекта — эти и многие другие задачи способен решить современный сайт. Именно такой создали в Easy digital agency для культурно-делового кластера «Суперметалл» в Москве. В основе интерфейса расположена архитектурная 3D модель объекта, благодаря чему пользователь получает необычный опыт взаимодействия с веб-продуктом, а бизнес — наглядный и удобный инструмент для продаж. Как мы это сделали — читайте в материале Sostav.
Что такое «Суперметалл»
«Суперметалл» — культурно-деловой кластер на месте Института чёрной металлургии имени Бардина неподалеку от станции метро «Бауманская» в Москве. Градозащитники могут спать спокойно: Научно-исследовательский институт (НИИ) стоит и работает, а расположенные по соседству цеха и лаборатории стали мощной альтернативой блеклым бизнес-центрам и идеальным выбором для тех, кто безуспешно пытался найти в столице мини-офис для своего дела.
Большая часть арендаторов — представители креативных индустрий: от топовых IT компаний и громких гастропроектов до дизайн студий и диджитал агентств. Проект создали те же люди, которые ранее запустили общественное пространство «Хлебозавод», жилой комплекс «Красная Стрела» и превратили «Корабль Брюсов» в арт-клуб на воде.
Они обратились в Easy за сайтом, отвечающим нескольким целям:
- продемонстрировать сложное пространство объекта, состоящее из нескольких зданий;
- сделать сайт, который привлечет внимание крупных представителей креативных индустрий и сам станет инфоповодом;
- создать основной канал коммуникации с высоким потенциалом конверсии трафика в продажи.
Как масштабировали фирменный стиль
Ключевой ориентир фирменного стиля «Суперметалл»
Кроме четких целей клиент пришел с названием и идеей — подать логотип как элемент периодической таблицы Менделеева. Нам предстояло пересобрать имеющиеся графические элементы в полноценный фирменный стиль, но при этом соблюсти определенную строгость — проект не должен был утратить деловой характер. Именно по этой причине мы отказались от ряда первоначальных концепций, которые выглядели слишком крикливыми и неуместными.
Ключевыми ориентирами в работе над дизайном стала монументальность сталинского ампира, сохранившаяся в цехах комплекса. При этом, основатели «Суперметалл» вложили в свой проект «современное предназначение», что следовало учесть при создании сайта.
Палитра и шрифты
Мы проработали несколько вариантов сочетаний цветов, одновременно отсылающих своим видом к металлическим сплавам и контрастирующим с ними оттенкам зелени (лобби «Суперметалла» — настоящая оранжерея). Но в итоге выбор пал на серо-оранжевую палитру в лучших традициях брутализма.
Шрифт RF Dewi — актуальная итерация семейства нео-гротесков. Он расставил визуальные акценты, подчеркнув твердость и решительность, свойственную успешным предпринимателям во всем мире.
Новаторский UI+3D модель = передовой веб-продукт
Геймификация, 3D и моушн
Understand замахнулись на нечто неординарное и сумели перенести типичный для геймдизайна элемент на сайт, открывающийся на смартфоне. Возьмите современную AAA-видеоигру — практически в каждой игрока ждет карта, помогающая ориентироваться на местности. Так, мы адаптировали архитектурную 3D-модель «Суперметалла», анимировали фактурные особенности интерьера и фасада, проделали титанический труд, играя со светом и цветом.
Гиперреальность
При скролле сайта модель здания постепенно вращается и демонстрируется с нескольких ракурсов, что позволяет потенциальному арендатору увидеть будущий дом его компании. На словах все звучит лаконично и просто, но наш моушн-дизайнер и его напарник-компьютер готовы с этим поспорить.
Современный веб-инструмент, облегчающий пользование
Наверняка, не за горами тот день, подобные сайты получат широкое распространение. С развитием технологий реализация сложных элементов упростится, а сами сайты начнут легче грузиться и нести еще более прикладное значение. Арендодателям, строительным компаниям и другим участникам рынка недвижимости будет проще и выгоднее запустить подобные виртуальные туры, чем лично показывать объекты. Любой желающий, зайдя на сайт, сможет детально рассмотреть квартиру или офис, панораму которых даже не придется предварительно снимать. Дизайнерам хватит лишь архитектурного плана и рендеров, чтобы самостоятельно воссоздать реальный объект в цифровом виде.
Но это потом, а уже сейчас подобный веб-инструмент отлично зарекомендовал себя для:
- запуска новых продуктов;
- спецпроектов;
- решения задач девелоперов, строительных компаний и архитектурных бюро.
Внутренние страницы, мобильная версия и главные сложности
Форма бронирования
Сайт «Суперметалла» — не одностраничный лендинг с эффектной титульной страницей, а полноценный элемент системы продаж. Мы стремились соблюсти в нем баланс между креативностью, удобством и конверсией. Конечная цель сайта — это новые арендаторы.
Внутренние страницы
Интерфейсу было уделено не меньше времени, чем детальной работе с 3D. Он продуман для максимальной простоты использования: внутренние страницы позволяют исследовать разные корпуса, выбрать подходящий лот и арендовать его, а уникальный дизайн каждого блока с легкими анимациями, параллаксом и швейцарской версткой не оттягивает на себя все внимание.
Мобильная версия
За счёт изящной типографики мобильная версия отлично смотрится и без 3D модели — ей пришлось пожертвовать ради легкости и быстроты загрузки.
С чем пришлось столкнуться?
Именно скорость загрузки и поддержка браузеров — основные подводные камни, которые проявились в процессе создания сайта. Мы не использовали WebGL (кроссплатформенный API для 3D-графики в браузере — прим. Sostav), потому что на момент запуска сайта, он все еще слабо поддерживался некоторыми браузерами. Другая сложность — покадровая анимация. Ее основной минус — долгая загрузка, поэтому пришлось схитрить над сжатием и отказаться от прелоадера (анимационный или другой эффект, который показывается прежде чем полностью загрузится страница сайта — прим. Sostav). Как следствие, если сразу начать скроллить вниз, модель может подгружаться с задержкой. Зато нет проблем с конверсией, это важнее.
Определенные ограничения были вызваны сложностью исходной 3D-модели пространства. Трехмерные графические модели, изначально предназначенные для архитекторов и строителей, достаточно сложны в адаптации под нужды анимации и сайтов. Но мы справились, хоть и потратили немало часов на рендер.
Заключение
UX, UI & Journey Design
За время работы мы настолько сильно погрузились в задачи клиента, что отшлифовали каждую деталь до блеска. Использование 3D модели решило задачу презентовать сложное пространство со всеми корпусами, а 90% лотов были сданы еще до старта проекта. Конечно, это заслуга профессиональной работы всей команды культурно-делового кластера, но и сайт внес значимую лепту. Финальный результат определенно стоил всех усилий. Мы получили не только очередной успешный кейс в портфолио, но и награду фестиваля креативных индустрий G8 в номинации «UX, UI & Journey Design», что также послужило дополнительной PR-активностью проекта.
Не сомневаемся, что идея отражать особенности пространств с помощью трехмерной графики в будущем ляжет в основу концепций многих сайтов. А мы в очередной раз слегка опередили время и подтвердили жизнеспособность нашего подхода к веб-дизайну.
Его принцип гласит, что любой сайт на 70% состоит из контента, который в случае Easy создается в тесном взаимодействии всех участников команды — от веб- и моушн- дизайнеров до специалистов по брендингу и маркетологов.