Loading ...

Responses by Trent Gardner II, lead web developer, Affinity Creative.

Background: After engaging with the great team at winery Charles Krug—and only after understanding and internalizing the brand story—we would say the purpose of the site is to represent and showcase the ever-growing legacy of this pioneering estate of Napa Valley wineries. It was an honor to be able to tell that story through our videos and unique web experience. The target audience for this site is discerning users who appreciate the history and proud tradition of a multigenerational winery like Charles Krug, and can also appreciate innovation and the winery’s forward-thinking, pioneering spirit.

Favorite details: We were able to get some gorgeous footage of the Charles Krug estate and have thoughtful interviews with the Mondavi family vintners on top of photographing striking scenery. Capturing those details and showcasing them on the site is what we are most proud of. For example, when landing on the site, you are instantly greeted by a drone shot over the fog of its Cold Springs estate; that immediately sets the tone for the rest of the site experience.

Another of our favorite details towards the bottom of the home page is the custom “Lazy Susan” carousel where the user can browse the winery’s offerings in a fun, interactive way. If one takes a closer look at the shadow underneath each bottle, they’ll find we also animated them to appear more lifelike—as if the bottle was going under a spotlight. That’s attention to detail.

New lessons: This was our first opportunity to integrate a site with eCellar, a wine e-commerce platform. Throughout the entire design and development process, we were constantly looking for ways to tightly couple the educational side of the site with the e-commerce portion. Leveraging eCellar’s strengths enabled us to do just that.

It’s no secret that a majority of wine e-commerce platforms are “closed off” in nature and have limited capabilities to implement the type of experience web designers might want to create. For example, one might see the e-commerce store on a subdomain (i.e., shop.winery.com) as opposed to being on the primary domain. Being able to pull down the shop’s product and customer data via customizable templates into our framework was a game changer for providing an integrated experience throughout the site.

Navigation structure: The thinking behind our zoomed-out, “windowed” navigation was to fully immerse the user in the site and emphasize discovering what Charles Krug is all about. From the foundation to its current wine catalog, we delivered a seamless journey throughout the website. A vital component was not reloading the site when the user goes from page to page. This menu structure helped facilitate an uninterrupted journey that we wanted to create, giving us time during the menu animation to pull in the next page’s content dynamically behind the scenes.

Technology: The Charles Krug site is a custom theme built on WordPress that uses one of our favorite WordPress plugins, Advanced Custom Fields (ACF). It enables the marketing team to update portions of the site without needing development assistance. We can do this by writing a little PHP and adding ACF functionality inside our page templates.

As far as JavaScript goes, two stand-out libraries enabled us to create our transitions throughout the site: Barba.js and GSAP. Barba.js gives us the ability to load page content without reloading via push state AJAX, and GSAP’s highly performant animations and comprehensive API enable us to have total freedom and flexibility in our transitions. We used GSAP for nearly all our animations throughout the site.

charleskrug.com

Browse Projects

Click on an image to view more from each project
X

With a free Commarts account, you can enjoy 50% more free content
Create an Account
Get a subscription and have unlimited access
Subscribe
Already a subscriber or have a Commarts account?
Sign In
X

Get a subscription and have unlimited access
Subscribe
Already a subscriber?
Sign In