Combining SVG & Contour Drawing to Make Druthers Druthers

The Project: Create a vertical scrolling animation that tells the origin story of the Druthers brewpub in Saratoga Springs, NY.

The Idea: Use SVG animation to create an interactive experience that still performs well across a range of devices.

The Problem: We’d never done anything like it before.

At the end of 2015, a few members of the LUMINUS team decided to take this challenge on. Mike LaDuca (artist) and Dennis Gaebel (front-end developer) would try to create an innovative animation that would give the story of Druthers its proper due.

We pulled it off, and while it wasn’t easy, it was worth it tell an interesting story about one of our favorite clients: Druthers, a brewpub in Saratoga Springs.

Connecting with Druthers

We met Chris Martell from Druthers through another branding company. He’d been struggling to find a web design company that could adapt their style to his brand’s look and feel and we ended up being the chameleon he was looking for.

Chris had a story to tell and he enjoyed telling it. Formerly a public finance lawyer, Chris stopped practicing full-time to follow his passion for brewing beer, leading him on a 14-year journey that ended with him opening Druthers brewpub in Saratoga Springs, NY.

We wanted to be able to present this story as dramatically as Chris told it, so we knew the standard “About” page wouldn’t do. Mike and Tim Bouchard, his co-founder, had recently been introduced to animator Rachel Nabors, who inspired them to try something new: a vertical animated timeline that users could scroll through. It would be interactive, impressive and communicate the Druthers identity much better than a block of text could.

Getting the Story

First things first: we needed to hash out exactly what story we wanted to tell.

We got Chris on the phone and asked him to spin us his yarn; he obliged. While he rattled off dates and events, our team took notes and sketched on the fly. By the end of the phone call, we had a rough storyboard which we then refined into six separate scenes.

Executing the Story

This is where things start to get a bit thornier. It’s one thing to sketch out some scenes, but how do you make them live on the web?

Luckily, we’d just brought on Dennis, who, among other things, knows his way around SVG.

For the laymen: SVG stands for “Scalable Vector Graphics.” Unlike regular images, they’re made up of a series of points and lines that become a graphic. That graphic can be shrunken and expanded to any size without a loss of quality, making SVG animations great for the web, since you never know what size screen your user will be using.

Mike would use Adobe Illustrator to create vector images. Dennis would take those vectors and code an animation. It seemed simple enough at the time.

But we still needed a style.

Finding a Style

Mike knew that he’d be animating the Druthers crew as cartoons, but he also needed them to fit in with the brand. They needed to be industrial, rustic and crafty, not too cute but still likeable.

Finding a style that fit these requirements proved to be more difficult than he expected. It’s hard to draw an endearing cartoon man following his dreams and not have him feel a little bit cute.

After weeks of head-scratching, Mike started to research a style he’d seen in some European cartoons. The characters in these cartoons were fun to look at, but they also had wrinkles, scruff and an air of rustic clumsiness.

With a bit of research, he found the style: contour drawing.

If you know Picasso, then you probably know contour drawing. Basically, you keep an eye on your subject, you keep your eyes off your paper, and you sketch with one continuous line. The result has an unfinished feel to it, which fit in with the Druthers site perfectly.

Mike didn’t follow every single rule of contour drawing. Rather, he adapted contour drawing to his own animation techniques, and voila: we finally had a style.

Making It All Work

You’d think that deciding on a story, a style and an execution method would have made completing the project just a matter of labor. You’d be wrong.

When Mike sent the vector for the first scene over to Dennis, the project grinded to a halt.

The file was huge. Monstrous, even, when you consider that people might have to download it on their mobile devices. Since Mike had used contour drawing to create the characters, the vector had a ton of points (translated into an XML file, it had about 70,000 lines of code when uncompressed). The file size defeated the purpose of using SVG in the first place, which was optimizing web performance and scalability across devices.

Needless to say, we were bummed out. We still wanted to do the animation, but changing it from SVG to PNG images introduced a host of new challenges, including forcing us to work around multiple requests for a ton of images.

Dennis, after a bit of pondering, found a solution. He started to pull out reusable elements of Mike’s artwork and converting them into symbols (reusable elements that can be instantiated multiple times with only one piece of code). By compressing the file, he dramatically reduced its size. Combine that with our programmer John Connelly’s suggestion to use AJAX to load additional scenes after the first scene loaded and we were back in business.

Accepting Our Limitations

We set ourselves up with a pretty tight timeline for this project: about four weeks. On top of that, Dennis and Mike had other projects to get to first. The Druthers animation became an outside-of-work passion project for them, leading to a lot of late nights and frustrations.

Once we figured out the workflow, though, things went relatively smoothly. Mike would make the vectors in Illustrator and mock up animations in After Effects. Dennis would code the the animation along with the mock ups. Before we knew it, the Druthers animation was finished.

What We Learned

The most valuable takeaway from this whole process is that we now know how to do something like this. Dennis had done animations like these in the past but he’d never worked on anything with a comparable file size. In the future, we have a template and a workflow we can follow, and we’ll be better at collaborating this intensely to hit a deadline.

More than that, we gained confidence that yes, we can pull the trigger on these bigger, aspirational concepts. Even if we don’t know how to do something right off the bat, we’re a small and agile enough team that we can troubleshoot and make decisions on the fly to get it done.