برند ÉLAN VOGUE، یک خانه مد لوکس، به دنبال ویترینی دیجیتال بود که شکوه و ظرافت کلکسیونهایش را در فضای آنلاین منعکس کند. نیاز اصلی یک تجربه کاربری فراگیر با المانهای بصری خیرهکننده بود.
ما یک وباپلیکیشن تکصفحهای با اسلایدر فولاسکرین، ذرات طلایی زنده که به حرکت موس واکنش نشان میدهند، گالری با فیلترهای هوشمند و لایتباکسی طراحی کردیم که بازدیدکننده را مسحور خود میکند.
وبسایت قبلی استاتیک و قدیمی بود، هیچ تعاملی با کاربر نداشت و تصاویر با کیفیت بالا به کندی بارگذاری میشدند. نرخ پرش بالا و نرخ تبدیل نزدیک به صفر بود.
همچنین، مشتری میخواست نمایش کلکسیونها به صورت دستهبندیشده (زنانه، مردانه، اکسسوری) با قابلیت بزرگنمایی تصاویر و بدون لگ باشد. چالش فنی ترکیب زیبایی بصری و عملکرد بینقص بود.
ما با استفاده از Canvas و JavaScript، سیستمی از ذرات طلایی ساختیم که به طور زنده در پسزمینه شناورند و با موقعیت موس واکنش نشان میدهند. اسلایدر تمامصفحه با CSS transitions و مدیریت لمسی روان پیادهسازی شد.
گالری تصاویر با Vanilla JS و فیلترهای CSS نوشته شد تا وابستگی به کتابخانههای سنگین نداشته باشد. لایتباکس اختصاصی امکان بزرگنمایی با حرکت روان را فراهم کرد. تمام تصاویر به صورت lazy loading و بهینهشده برای WebP بارگذاری میشوند.
موشن گرافیک پویا با Canvas که به حرکت موس واکنش نشان میدهد.
انتقال نرم بین تصاویر با کنترل لمسی و کیبورد.
فیلتر لحظهای بر اساس دستهبندی با انیمیشنهای محو.
بزرگنمایی تصاویر با کیفیت بالا و خروج آسان.
طراحی واکنشگرا و لمسی برای تمام دستگاهها.
Lazy loading، WebP و CDN برای عملکردی برقآسا.
"وبسایت جدید فراتر از انتظار ما بود. ذرات طلایی و اسلایدر تمامصفحه حس و حالی از لاکچری بودن واقعی به برند ما بخشید. نرخ تعامل کاربران ۷۰٪ افزایش پیدا کرد."
امیررضا کیانی
مدیر خلاقیت ÉLAN VOGUE
وارد دنیای ÉLAN VOGUE شوید و قدرت طراحی تعاملی را لمس کنید.
مشاهده وبسایت