Wells Fargo Bank
Wells Fargo wanted a banner on their brand standards site that took its animation cues from an existing promo video. Not only did they get that, they got an animated banner that works flawlessly in Internet Explorer 7. SEVEN! Yes, that was a requirement. Tip: Never trust the Internet Explorer feature that lets you preview how a site will look in an older version. It is a liar. Also, you can’t animate a transparent PNG’s alpha channel in IE7. Knowing that up front will save you some headaches.
This multi-part animation illustrates the features and benefits of PernixData’s enterprise server software. The biggest challenge in this project was making sure it was possible to jump to any of the five chapters at will while also having a smooth scene-to-scene transition when playing each chapter in its entirety.
I’ve built out three different animated slideshows for Misahara. The ingredients, beautiful fashion and product photography, were straightforward. Mixing them together with the right pacing and timing, with a common animation language across all slideshows, was the key.
Autodesk OTC 2015
I was tasked with creating a quick, high-energy banner for the Autodesk OTC conference website. My original plan was to do the blur and flash of overexposure with CSS filters. That turned out to be impractical because even the blurred and overexposed frames needed to have sharp film grain. In the end, the total weight of the piece was kept within the target, thanks in part to using SVGs for all of the text overlays.
Herman Miller Digital Experience
The HMI Digital Experience application is essentially a product catalog and company brochure that was created for large 1920x1080 touchscreen displays in showrooms and trade shows. A separate version, optimized for smaller screens and lower-resolution projectors, was created alongside the original piece. Because this piece deals with huge assets and was not optimized for an internet connection, I’ve created a movie showing it in action.
Design: OFFICE vs OFFICE / In collaboration with Propp + Guerin
This was a fun project to work on because it gave me a lot of new problems to solve. I’m particularly proud of the "draw-in" animation of the Film and Gaming pipelines, for which I developed a few custom classes. This module had to accommodate localizations in a handful of languages, including Korean, Japanese and Chinese, which was also a brand new challenge for me. Font SWFs FTW!
I’ve since discovered that the animated drawing of some of those 1px lines has issues on Retina screens so I’m not nearly as proud of it as I once was. The lesson here is that you should never go back and look at old work.
When I saw the comps for this project, I was pretty excited to work on it. I liked the look and feel and really loved the style of the portraits that were being used. Most of the code for the video player was pulled from an existing project I worked on for Gilmour Craves, letting me spend more time on transitions from screen to screen. Of course the entire project is XML-driven for easy updating of all the content.
Here are two different takes on character galleries for MAQET, a service that allows people to create their own character online and get a real collectible figure in the mail. The Bubble Gallery shows a collection of pre-built characters you could buy as is or use as a starting point for your own creation. The Character Chooser gives you access to all of the available characters. Both are fully XML-driven. The Character Chooser is built in such a way that third party designers who create characters for MAQET can also create an animated background for their character, serving as a sort of online packaging.
This is a fully XML-driven home page module that features as many products as the client wishes to highlight. The amount of time between slides is dictated by the amount of text displayed on each slide; slides with more copy to read are shown longer than those with less text. The original product box movies were far from snappy enough for this project, but TweenMax gave me all the control I could want to create the rapid-fire, high intensity look and feel we were looking for. As a matter of fact, the original movies didn’t scale the product up as they spun into place, so I faked that with TweenMax, too.
7EYE Home Page
Perhaps my favorite project from a fit-and-finish point of view. I feel like it’s a great balance of tasteful eye candy that enhances the experience without being distracting or confusing. It was later supplanted by a much simpler version that removed a lot of the UI elements, replacing them with HTML overlays, but it added a background slideshow to showcase more sunglass models.
ChrDAUER Architects Website
When I was in junior high school, I wanted to be a residential architect. But well-intentioned adults scared me out of it because being an architect was really "more about math than it was about design." So, go figure, I grow up to become a programmer, where math never comes into play. By the way, Christian told me that it’s the structural engineers who need the math. In his line of work, if he’s doing math, he’s probably dealing with his financials.
Design: Erik Watts Design Office
Jon Ragel Photographs
Jon wanted to show a lot of images from his impressive portfolio. And he wanted it to be easy for potential clients to quickly view his work. This site stretches wide to fill the screen with photographs you can quickly and fluidly scrub through. The slideshow also features the ability to click on any portfolio image to download it. Being XML-driven, it was easy for Jon to edit his online portfolios himself.
Design: Verlander Design
Originally created and deployed in 2006. This is still a favorite of mine because it was the first large, complex site I was the primary developer on. Looking back on this site, knowing now all of the things I didn’t know then, there’s a part of me that’s surprised this site doesn’t collapse under its own weight.
Hello there. I’m Erik. I’m mostly a developer with a bit of designer and motion artist thrown in. My work has been used by Autodesk, Wells Fargo Bank, Herman Miller, Nordstrom, Neiman Marcus, Warby Parker, Scandinavian Designs, and others.
I notice things; typos, when the white balance in a series of photographs doesn’t match, when a gas station hangs the number eight upside down, when things aren’t centered properly. I consider this a good thing, I wish there was a way to make a career out of pointing out when companies use “login” when they mean “log in” and “backup” when they mean “back up.” I have strong opinions about the placement of punctuation marks in relation to quotation marks. Despite these tendencies, I'm actually a very pleasant person who probably overuses emoticons :)
I’m looking for good people to work with and new problems to solve.