Рассказываем, как найти идеальный баланс между творчеством и функциональностью, не свалиться в красивую картинку и получить работающий продукт.
Работа компании ART3D над проектами OCTOBER GROUP всегда нетривиальна и увлекательна. Стиль и визуальную эстетику каждого проекта мы формируем в процессе постоянного взаимодействия с клиентом, основываясь, в том числе, и на отзывах отдела продаж в режиме реального времени. Так мы не скованы рамками брендбука и на многие вещи можем взглянуть под другим углом, что уже не раз доказывало свою эффективность.
Примерами удачной коллаборации стали уже известные на рынке сайты для проектов Stories, King&Sons и корпоративный сайт October Group, отмеченные наградами престижных отраслевых премий.
С таким подходом мы работали и над новым сайтом для K-CITY.
K-CITY объединяет бизнес-центр класса А и трансформируемый арт-хаб будущего, где офисы не просто высокотехнологичное пространство, а синтез искусства, эстетики и бизнес-процессов. Важно понимать, что дополняя друг друга в жизни, каждая из сфер по-разному воспринимается своей целевой аудиторией.
Перед нами стояла задача создать сайт о бизнес-кластере K-CITY, гармонично раскрыть все основные преимущества проекта, не нарушая баланс между искусством и бизнесом, красотой и функциональностью, сделать информацию доступной и эстетично преподнести ее в нужных пропорциях, создать эмоциональную связь между покупателем и офисом его мечты в K-CITY.
В каждом проекте мы создаем историю. Не просто выдаем пользователю скучный лонгрид, а комфортно погружаем в процесс. Делаем информацию не только доступной, а увлекательной и достаточной. Поэтому на сайте K-CITY история проекта раскрывается постепенно, создавая эффект полного погружения.
Все характеристики представлены подробно, но без лишних слов и эмоций. Мы ценим время и скорость, с которой пользователь получает необходимые факты. Такое сочетание технологичности и визуальной эстетики созвучно философии K-CITY.
При базовом наборе контента мы работали с каждым разделом индивидуально для достижения максимальной информативности.
Выбрали эмоциональную подачу материала и вместо привычного рендера на главной странице представили «амбассадора» бренда — главную героиню в ярком деловом костюме.
Такими мы увидели будущих резидентов K-CITY: динамичными, энергичными, постоянно в движении.
Насытили сайт интерактивной анимацией и инфографикой для наглядного позиционирования проекта.
Ценим время пользователя. Все характеристики проекта даны подробно, без лишних слов, а УТП проекта — сразу на одном экране.
На главном экране предусмотрели акцентную кнопку выбора офиса и предложили два варианта подбора: визуальный на генплане и по параметрам с удобными фильтрами. Каждый лот можно подробно изучить, выгрузить в pdf, забронировать и добавить в избранное.
Раздел про локацию тоже подали нестандартно: с интерактивной анимацией, наглядно показывающей, что до ТТК всего 200 метров, а до метро «Бауманская» — пять минут пешком.
Мы пробовали разные варианты, но ни одна отрисованная карта или полноценный модуль не раскрывали реальную близость метро. Поэтому построили в 3D целый фрагмент района, чтобы просто «заглянуть за угол» здания и показать: метро и ТТК действительно рядом — буквально за углом.
В разделе про архитектуру представили проект с помощью интерактивного видео, чтобы лучше передать динамичный дух бизнес-центра, дополнив его галереей с рендерами — для детального изучения экстерьера и внутреннего пространства.
В разделе про инфраструктуру буквально разложили здание на составляющие легким движением скролла, чтобы максимально подробно проиллюстрировать возможности будущих резидентов.
Слева на экране представили все зоны в формате списка, при выборе конкретного пункта расположение сервиса подсвечивается на схеме этажа для удобного ориентирования.
Мобильная версия сайта представляет собой полностью самостоятельный продукт. В ней мы сохранили весь функционал десктопной версии, включая выбор лотов. Навигацию и меню разработали специально для смартфона. Предусмотрели удобную вертикальную верстку, крупные шрифты. Контент быстро загружается даже с помощью сотовой связи.
Сайт проекта стал удобным инструментом продаж для девелопера: более 30% лидов на старте продаж. Наблюдаем хорошую глубину просмотра и низкий % отказов у посетителей.
Сайт качественно презентует ключевые УТП проекта, а анимационные решения усиливают восприятие информации.
Блок про транспортную доступность сочетает визуальную привлекательность, современный дизайн и практическую пользу. Для коммерческой недвижимости такой формат подачи информации крайне важен, и здесь он реализован безупречно.
Продуманная типографика и эффектное разделение контента крупными заголовками улучшают навигацию и общее впечатление от сайта.
Wolf + PHP + Node.js.
Фреймворк Nuxt 2, основанный на Vue 2.
Для генерации PDF используем самостоятельно разработанный модуль PdfGenerate, основанный на библиотеке Puppeteer.
Для анимации используем нативный JS и CSS либо библиотеку GSAP.
Для сбора обратной связи от клиентов и заявок используем самостоятельно разработанный модуль для отправки писем на сторону заказчика, а также самописный модуль Form для вёрстки форм обратной связи.