Zacapa is a guatemala rum company and makes their rum using the first press of virgin sugar cane and aged using the Sistema Solera method. Zacapa Centenario was created in 1976 to celebrate the hundredth anniversary of the foundation of Zacapa, a town in eastern Guatemala.
Zacapa needed a marketing site that told their story in a captivating way. The overall ask was to enchant viewers and elevate their existing brand. The site needed to consist of three distinct segments to provide a unique element of who they are and showcase which rum is available.
Design an immersive web experience that captivates and enchants it's viewer while welcoming them to learn more about Zacapa's process, heritage, and place above the clouds as well as learn more about what products are available within the United States.
A responsive website built from an animated Cinema 4D scene and executed using react-three/fiber and incorporates the use of videos, transitions, dramatic lighting, and depth of field, that reflects the overall look and feel that adds and reinforces Zacapa's existing brand.
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.
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.
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.
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.
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.
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.
.svg)
.svg)
