<-
Back to Projects.
Cody Deer
Year
2024
Industry
Consumer Goods / Beverages
Scope of work
Framer, 3D WebP Renders, CMS, E-commerce Ready
Timeline
4 weeks
The Brief
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.
Discovery & Strategy
Brand Positioning Through Web
We studied how successful beverage brands use their websites: the best ones make you want to reach through the screen and grab the product. Photography (or in this case, 3D renders) does the heavy lifting. Copy is minimal and confident. The overall experience feels like walking into a well-designed store.
The site structure follows the emotional arc of product discovery: intrigue (hero with floating product), desire (lifestyle imagery and flavor descriptions), trust (ingredients, sourcing story), and action (purchase pathway).
Design Approach
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.
Development & Build
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.
Results & Impact
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.
Book an intro call
Time to get introduced and explore how AGR Studio can help you
Do you prefer email communication?
artyum@agr.studio
For instant messaging:
Frequently
asked questions
Let's talk about your idea.
Offices
Ashdod, South District
77456
Israel
1111B South Governors Avenue
Dover, DE 19904
United States
