השקת מותג משקאות פרימיום באמצעות ויזואליזציה תלת-ממדית של המוצר
לקוח
קודי דיר
תעשייה
מוצרי צריכה / משקאות
שירותים
אסטרטגיית מותג, עיצוב דיגיטל, פיתוח ב-Framer, ושילוב אלמנטים בתלת-ממד
ארסנל טכנולוגי
מובנה ל-Framer, רינדורי 3D בפורמט WebP, מערכת ניהול תוכן (CMS), ומוכן למסחר אלקטרוני
שנה
2024
כיצד סטודיו AGR בנה את אתר מותג משקאות הפרימיום של Cody Deer עם רינדורי תלת-מימד אופטימליים של המוצרים ומערך מוכן למסחר אלקטרוני (e-commerce) על גבי Framer.
Cody Deer is a premium craft beverage brand launching into a competitive market dominated by established players. Without an existing retail presence, the website was their primary brand touchpoint, the place where distributors, retailers, and consumers would form their first impression.
The founders invested in professional 3D product renders, clay models, floating can compositions, lifestyle scenes, and needed a website that would showcase these assets as effectively as a physical retail display. The site had to feel premium from the first pixel.
מיצוב המותג באמצעות הרשת
חקרנו כיצד מותגי משקאות מצליחים משתמשים באתרי האינטרנט שלהם: הטובים ביותר גורמים לך לרצות להושיט יד דרך המסך ולקחת את המוצר. הצילום (או במקרה זה, רידורי תלת-ממד) עושה את העבודה הקשה. הטקסטים מינימליסטיים ובטוחים בעצמם. החוויה הכוללת מרגישה כמו כניסה לחנות מעוצבת להפליא.
מבנה האתר עוקב אחר הקשת הרגשית של גילוי המוצר: סקרנות (תמונת הירו עם מוצר מרחף), תשוקה (תמונות לייפסטייל ותיאורי טעמים), אמון (רכיבים, סיפור המקור) ופעולה (נתיב הרכישה).
Product-Forward Design
The 3D renders dictated the design language. We built the entire color system from the product itself, extracting palette values from the can designs and using them as section backgrounds. This creates a seamless relationship between product and page, as if the cans are painting the environment around them.
Typography is bold and condensed, a single display face for headlines with a readable body font. The layout alternates between full-bleed product hero shots and tight product-detail sections, creating a rhythm of scale that keeps visitors scrolling.
3D Asset Optimization
The 3D renders were delivered as high-resolution PNGs, beautiful but heavy. We processed each image through a multi-step pipeline: background removal, WebP conversion with quality optimization, and responsive variants at 3 breakpoints. The result: renders that look stunning at 2x retina resolution while loading in under 500ms each.
The product gallery uses a custom grid component that maintains consistent image proportions across all viewport sizes. Individual product pages pull from a CMS collection, letting Cody Deer add new flavors and SKUs without developer involvement.
Launch Impact
The website became Cody Deer's most effective sales tool. Distributor meetings that previously relied on physical samples now start with a website walkthrough. The premium digital presence helped Cody Deer secure retail placements that typically require an established brand track record, the website made them look established before they were.
26 אופטימיזציות
הדמיות תלת-ממד
< 500 מילישניות לתמונה
זמן טעינה
4 שבועות
ציר זמן
