Responses by Elliott Mangham, director, Code Resolution.
Background: Designer Dram is a place for enthusiasts to create a completely bespoke and high-end bottle of whiskey from barrel to label all from the comfort of their own devices. Until now, whiskey enthusiasts had no place to create their own unique blend of whiskey in a beautiful, personalized bottle entirely online. This sparked the need for a disruptive startup like Designer Dram, which is based in Los Angeles.
Design core: The overall elegance and sophisticated look and feel to the site. The smooth, seamless transitions provide a rich experience while using the site. The real standout feature is the product itself, though!
Favorite details: The water disperse effect, which utilizes WebGL technology to achieve the desired look. It’s always tricky, but it pays off.
Challenges: Performance is always an important consideration. Smooth scroll, parallax, WebGL, custom cursors, transitions and everything else all looks good, but it adds a lot of weight. This translates to longer load times and greater bandwidth. We optimized every element for speed and usability while being mindful of accessibility.
Divergent paths: We implemented nice effects before functionality, which was fine for most of the site. But when it came to the “Make My Whiskey” page, I would probably have reconsidered this process and built the functionality first! It was a bit of a headache doing that backwards.
New lessons: On this particular project, we went to great lengths to ensure images were optimized on a whole new level using imgix. This enabled us to provide API-driven image compression, real-time cropping, resizing, reformatting, retina support and ultimately better responsiveness for every image. That was a lot to take in.
Navigation structure: We ensured that the primary focus stayed on the core elements of the website, which was slimmed down to provide a beautiful, friendly content hierarchy. The submenu is a way to dig further into the website and brand culture, which is complemented by a graceful interactive menu.
Special navigational features: The informative cursor effects, such as when you hover over particular elements and the cursor illustrates “Return” or “Basket,” provides a friendly narrative for the user.
Technology: We built the website utilizing the core strengths of WordPress, which provides a powerful yet easy-to-use content management solution. On the front end, we used CSS3, GSAP, jQuery and three.js to achieve the desired animations. Finally, we rock gulp.js as the task runner during development.