Влезте в бутика. Разгледайте отвсякъде.
Задачата
Искахме да покажем как един онлайн магазин може да предаде усещането за посещение в бутик. Пространството трябва да носи собствен характер, а продуктите да могат да се разглеждат отблизо. Разходката и изборът трябва да работят както с мишка и клавиатура, така и с докосване на телефон.
Решението
Разработихме Maison Éline като собствена демонстрационна концепция: светъл 3D салон с три зони, интерактивни продуктови модели и отделен каталог. Посетителят може да се разходи свободно, да променя атмосферата, да избере цвят и размер и да премине през примерен процес на поръчка.
Създадохме интериора, моделите, интерфейса и движението като общо изживяване в браузъра.
Собствен интериор с три различни зони
Салонът, зоната за кожени изделия и ателието са свързани в общо пространство с витрини, централна маса и места за представяне на колекцията. Мраморните повърхности, металните акценти, стъклото, текстилът и моделираните цветя изграждат светлата палитра на бутика.
Геометрията и материалите са разработени за визуализация в реално време с Three.js и WebGL.
Свободна разходка на компютър и телефон
На компютър посетителят се движи с WASD, стрелките или скрола и оглежда пространството с мишката. На телефон използва аналогов джойстик и отделен жест за погледа. Добавихме плавно ускоряване и спиране, ограничаване на преминаването през обзавеждането и преходи към трите зони, които заобикалят мебелите.
Режимът за свободен поглед и изгледът на цял екран допълват управлението.
Светлина и атмосфера, които се променят
Три режима показват бутика през деня, по залез и вечер. Автоматичният цикъл преминава плавно между тях, като променя слънчевата светлина, сенките и вътрешното осветление. Покривният прозорец и отраженията участват в усещането за обем.
Началният екран показва напредъка на зареждането и отваря пространството автоматично след подготовката на текстурите и първия кадър.
Колекция с интерактивен 360° преглед
Подготвихме шест примерни продукта: две чанти, рокля, сако, парфюм и обеци, с общо 16 цветови варианта. Всеки модел може да се върти, приближава и разглежда от различни страни. Продуктовият прозорец събира избор на цвят и размер, подробности и добавяне в селекцията.
Каталогът позволява филтриране по чанти, облекло и аксесоари, а при облеклото има ръководство за размерите.
Количка и демонстрационна поръчка
Избраният цвят и размер се запазват в количката заедно с количествата и общата стойност в евро. Селекцията остава в браузъра и след презареждане чрез локално съхранение. Добавихме преглед на поръчката и демонстрационно потвърждение, за да се види целият потребителски път.
Концепцията не приема реални плащания, не изпраща поръчки и не изисква въвеждане на лични или картови данни.