Case Studies

Druthers Brewing SVG Animated Timeline

At LUMINUS, we strive to give every single client a little something extra. So when Druthers, a brewpub in Saratoga Springs, NY, hired us for web design, we immediately started searching for ways to push the limits of traditional restaurant websites. Our favorite part? A scrolling animation that tells the story of Druthers Brewing founder, Chris Martell.

Breakdown of services

Programming
Responsive Web Design
1
PUSHING THE ENVELOPE

Telling the Story of Druthers

Initially, Druthers tasked us with creating a responsive website that fit in with their brand’s rustic industrial charm.

When it came time to tell their origin story, however, we wanted something better than the run-of-the-mill “About” page. Inspired by the work of animator Rachel Nabors, we decided to create a vertical scrolling animation to dramatize the journey of Chris Martell, the lawyer-turned-brewmaster who founded Druthers in 2012.

Campaign Deliverables

Storyboarding Character Design Copywriting SVG Animation GreenSock ScrollMagic Compression

2
GETTING THE STORY

Discovering What Makes Druthers Druthers

Over the phone, Chris recounted the 14-year journey that led him from working as a lawyer in San Diego to becoming a brewmaster in Saratoga Springs. While he regaled us we scribbled notes and sketched out scenes until we had a rough storyboard put together.

The storyboard gave us the structure we needed to move forward by pegging specific events to specific dates. We ended up settling on six scenes total for the animation.

Plot out scenes to match Chris's story.

Discovery Interview Structuring Storyboarding

3
ILLUSTRATING DRUTHERS

Just what is contour drawing, anyway?

Our biggest illustration challenge was producing characters that weren’t overly cute but weren’t goofy-looking or unflattering. With this in mind, artist Mike LaDuca decided to animate the scenes using a hybrid form of contour line drawing and his own style, which preserved the brand’s rustic look while producing visually pleasing characters.

Using his trusty Wacom tablet, Mike sketched the scenes by hand and then converted the images into vectors using Adobe Illustrator. Then, he used Adobe After Effects to mock up the animation sequences.

Illustrate the Scenes

Find Style Create Characters Illustrate Scenes Mock Up Animation

Examples of Contour Drawing

Examples of Contour Drawing

Initial Sketches

Initial Sketches
4
ANIMATING FOR THE WEB

Creating an animation that performs well across all devices.

Once the illustrations were complete, front-end developer Dennis Gaebel used SVG to code the animations for the web.

First, he’d take the vectors that Mike provided and compress them by converting reusable elements into “symbols” which could be instantiated once and used multiple times throughout the animation.

Then, he’d code the animation sequence using the famous GreenSock Web Animation Library. Chris, the founder of Druthers, would remain fixed within the center of the screen as the user scrolled through the timeline. The setting, including his surroundings and his outfits, would change as you followed his journey.

Make the animation work on the web.

Convert to SVG Compress Images Ensure Responsiveness

Dennis's Code

Character Design

5
IMPLEMENTING THE ANIMATION

Finishing up the project.

Compressing the vector images went a long way towards boosting performance and scalability for the web. On the suggestion of our programmer, John Connelly, we opted for AJAX to load additional scenes once the first scene loaded. Clearing those hurdles enabled us to implement an animation that performed well across a range of devices.

View the complete project here.

Animation on Web
Poster 1
Poster 2
Finished Poster

The Blog

Things happening with us, our work, or general ramblings about anything really.

I hate the American Advertising Awards a little bit. Here's why. March 13th, 2017

I hate the American Advertising Awards at least a little bit. As a social occasion, they’re great. You get all of Buffalo’s ad people in a room with hors d'oeuvre...

3 Simple Ways to Use Video to Promote Your Business November 4th, 2016

This morning, before getting out of bed or even fully opening my eyes, I found myself reaching for my iPhone to clear away all of the little red notifications. I checked my t...

Interested in following along in our quest for knowledge?
So...
Are we gonna work together or what?