Real-time 3D Web Experience

Zacapa: Enchanting Moments

table scene of people enjoying Zacapa rum.


logo for FWA
FWA of the day


Color Styles
Responsive Design
Hifi Mockups
User Flows
UV Unwrapping
UI/UX Design



Project Manager
Senior Designer ✌️
✌️ my position

Research & Illustrations

I was responsible for illustrating the icons and visual elements for the navigation as well as the visuals present within the scene. I began with researching graphic elements that Zacapa had as a part of their brand already as well as former marketing campaign materials that provide me with a starting point.

I created a large variety of illustrations both representative of their culture and process; we landed on the wooden barrel symbolizing the craft; the petate band representing the heritage; and the mountain representing where they are located.

Responsive Design and Prototyping


Some early work was exported by the art director for mobile as well as desktop prior to me coming onto this project. Since this was the case, little to no wire framing was needed so I mostly worked high fidelity then moved onto respective break points as well as interactive prototyping.

Break Points

The three main breakpoints that I was asked to focus on was desktop, mobile landscape, and mobile portrait; this was mainly because we would need to solve for how the scene was going to be framed on smaller screens and aspects that way the art director, client, and developer would know how these problems were to be solved.


During this point, I had already explored how the look development potential 3D icons might end up looking like and how they were to transition into the scene and where. I took this opportunity to showcase how these during prototyping updates so that we all had a full picture of what the end result might feel like. I additionally explored use of depth of field during this process as well.

3D Scene


Although I've been working in 3D since 2005, this was my first time using Cinema 4D. Because of that, I documented every step of my process. This was mostly for my own need but I figured that it would be helpful in case of any future 3D site projects I happen to be a part of beyond this project.

Unique Challenges

There were some challenges with getting all of the alphas and textures to all export from C4D; as a solution, I exported the entire scene with animations, meshes, and partial materials and made some fixes in Blender to then export the final file. Beyond that, I iterated on various clean selects and separated various objects into more objects to give it a bit more believable dimensionality to the scene.

My Process

You can view my process below that documents, from left to right, steps from photoshop clean selecting then into C4D image projecting the objects to texture projection onto meshes, animating and smoothing the camera, and exporting from C4D to .gltf.


The Zacapa Enchanting Moments project successfully enhanced the brand through an immersive web experience, combining animated Cinema 4D scene, responsive design, and captivating visuals. Recognized as FTW of the day, the website effectively showcased Zacapa's process, heritage, and location above the clouds. Despite challenges, the 3D scene added depth and realism, while extensive research ensured culturally aligned illustrations. Overall, the project engaged users, communicated the brand's story, and showcased products effectively.