Matt Hoover | Design, Inc. – HTML Banners and Rich Media Advertising Developer, Designer, Artist

BRANDS

BANNERS & RICH MEDIA

VIDEO GAME SITES

MOTION GRAPHICS

CONTACT

Motion Graphics & Video

I enjoy working in many different digital mediums, and motion graphics with video is something I’ve recently started doing more of. Without having to worry about file size or processing power as we do with digital ads, video has much more potential for envoking an emotional response.

I modeled and animated 11 of the birds featured in this project over the course of about 2 months (the Pelican and Eagle were stock models I rigged, all others I built from scratch). Each bird took me about a week to research, model and texture in Maya, and then animate short, seamless loops for each bird. The seamless loop allowed the birds to go from an idle action, either standing or gliding in the air, to one of several other motions, such as flapping wings or preening feathers, while maintaining a low file size – critical in online banner work. And each bird had it's own specific movements and idiosyncracies that needed to be reflected in the animations. At launch, people really went nuts for this campaign – I didn't realize there were so many budding ornithologists on the interwebs!

See some specific animations here: Atlantic Puffin | Blue-Footed Booby | Hummingbird | Eagle | Sandhill Crane | Arctic Tern

These very short YouTube bumpers were based on interactions with the loading symbol we all see on digital devices, symbolizing that Xfinity Internet is so fast that it’s destroying the loading animation in multiple ways. These ran right before a user’s selected video on YouTube. With the help of GSP producer Patrick Wong, I filmed an actor over greenscreen, then keyed the footage and added the other visual effects using Maya, AfterFX, and Nuke. I also animated the Ookla Speedtest flag that drops from the upper left, using cloth simulation in Maya.

This video production was ultimately shown in rich media banners, but it belongs here as well. Legendary producer Teymoor Ghashghai gave me a big task with a lot of creative freedom: Create a WW1 dogfight battle between two planes, where they ultimately fly out of a phone screen, revealing that we've been watching the battle on an Evo, the first 4G phone. I got right to work on storyboarding each scene for cinematic appeal. I created all the environment and animated some stock WW1 3d models, later adding in explosions, clouds, and bullet tracers. One tough constraint was that the entire banner could only be 15 seconds long. In the end it was an amazing opportunity to be a part of. I only wish we could have added a soundtrack.

This project consisted of taking a single photograph of a mountain and animating skiers bombing down the slopes in a realistic fashion. I was provided the photo and frame artwork, along with the ski paths drawn in by the art director. I knew that a simple Flash animation wouldn’t cut it as far as realism goes. So in Autodesk Maya I created 3d characters with skis and poles, and roughly approximated the shape of mountain with another model. I then keyframed each skier’s path down the mountain so that they matched the paths already present. Then in AfterFX I composited everything together, and added the snow spray from the skiers as they turned on the mountain. The foreground snow is actually done in Flash, and overlays the video.

Video Game Web Sites

Before I ever worked on banners or rich media, I created a number of fully-Flash web sites back in the early 2000’s for companies like LucasArts and Ubisoft. In each of these shown below, I created all of the artwork for the site in Adobe Illustrator and Photoshop, and later with Maya as well. Often I would get some of the 3d models for the characters, which I would pose, light, and render (or even animate in some cases). And I believe I was the first developer to integrate “idle loops” for video game characters on web sites, which I implemented because I just thought it would be cool to see them move a bit. In the examples below, some are linked to a live version - just click the image to launch the site.

Contact & About Me

I love designing things - digital, virtual, or real. I’ve been a freelance designer and developer for nearly 16 years, and I’ve worked with many talented people from agencies all across the country. From screen to print, I enjoy the process of creating and animating. I’m constantly learning new skills and refining my art. In everything I do, I try to craft an experience that’s worthwhile and fun. I take the same dedicated approach to each and every project I’m on. And I always communicate clearly with the other team members, and try to lead by example.

Experience. Passion. Talent. That’s what I bring to the table.

Please contact me if you’d like to get a quote, have questions, or just to say hello.

(415) 290-1367 | Email me

Marin, California

Household Names. Worldwide Reach.

During my career, I’ve been fortunate to work with some of the coolest brands on the planet. From hardware to software, from retail to foodstuffs, I’ve worked on campaigns across many types of industries, and with many talented art directors and producers. Every new brand or campaign is a chance to experience something fresh and exciting.

From Concept...to Art.

I love animating banners and rich media – and the whole process of taking a great concept and bringing it to life. I’ve animated hundreds of campaigns over 16 years, but these I enjoy sharing the most. There is a lot of effort involved when going from static concept to final banner, as any developer knows. My careful attention to detail and artistic sense differentiate my work from the mundane. “Standard” banners? These are anything but!

Filter below by media type: Standards | Rich Media | All

These banners were part of a larger campaign about Cisco’s readiness for new world threats facing businesses. Each required a lot of work and creativity in order to fit into 40k. In “Hacker”, the corruption of the image you see is a real-time effect that randomly alters the actual image data, each time resulting in displaying different patterns and colors.

For “Globe” I created a procedural background of stars and nebulous gases, since using a bitmap for the stars wasn't possible. I also used distortion mapping techniques to get the cables representing the oceans to move in a wavelike fashion.

On “Competitor” I did an entire scene reconstruction in order to fit such a large, high res image of the girl into the sunflower field. All in all, a tough but very rewarding campaign that I’m very proud of.

Other sizes & versions (desktop only): Hacker: 300x600 | 728x90
Globe: 300x600 | 728x90 Competitor: 300x600 | 728x90

Of all of the HP campaigns I’ve done, this one stands out as a favorite. Eye catching and colorful, it has a playful feel to the animation. To start, I created flying papers in 3d that spin and curve around in AfterFX, then traced those as individual frames in Flash, adding the colorful page designs to each one. I then sent those animations on a curving path from one banner to the other, so that they seemed to magically float to their end destination. The total file size had to be less than 100k even though it was rich media. By using vector art and creatively maximizing the number of unique page designs, I was able to accomplish something fantastic!

I love animating particles - snow, dust, smoke, or in this case, balloons! The idea behind these HP Inks concepts (getting more out a cartridge) is shown so elegantly, in my opinion. Very easy to understand, while at the same time beautiful to watch. By creating random movement of each “balloon page”, and using procedurally drawn “strings” to attach them to the copy lines, I was able to make this 30k banner concept look like a million bucks!

Other sizes (desktop only): 160x600 | 728x90

This campaign featured several different animations of the iconic 1-800-Contacts blue box and white-gloved hand, but this one is my favorite. With a 3d-rendered hand, and a box opening/closing animation created from a 3d model, this banner has many cool features that all come together to make a really fun animation. I even designed the “firework” rocket and illustrated it directly in Flash. As a bonus, I get to animate all the particles, which you know I love!

Other sizes (desktop only): 160x600 | 300x600 | 728x90

This banner owes it's success to an open-source library, specifically one called "boids", which is meant to emulate the flocking behavior of birds and fish. It was a perfect adaptation that I heavily customized for this banner. Simply animating the sardines any other way would not produce the realistic result required. Each time the banner runs the sardines choose their own path (within the boundaries of the banner, of course!), giving the user a different experience each time.

Other sizes (desktop only): 160x600 | 300x250 | 728x90

Of all of the banners I've created, this one probably took the most code in order to work. Because we only had 40k for the file size, each part of the movement, as well as the "construction" of the tentacles, had to be done in code, requiring a lot of trial and error, tweaking and late nights. In the end, it was worth it, as this is one of the banner campaigns I'm most proud of from a technical standpoint. I only wish that there wasn't a 15 second time limit!

Other sizes (desktop only): 160x600 | 300x250 | 728x90

These banners were filmed by production company Avocados and Coconuts, and I helped supervise the shoot to make sure we got the parts we needed for the banner. I’m always happy to help at photo and video shoots! The concept behind these banners is that a traditional (older) graphic design technique is replaced by publishing for the iPad, using the skills you already know. After a small amount of editing and visual fx, along with video speed adjustments to slowly ramp up into a "timelapse" effect, these banners came together beautifully. A follow-on campaign featured the letterpress concept in only 40k.

40k Version of Letterpress: 300x250

It’s amazing to me, even today, that I was able to get this much dynamic animation into a 30k banner. It’s a testament to the power and small file size of the Flash swf format. There is a lot going on here, to be sure. Each of the arms is an inverse-kinematics chain, there are flowers popping out and vines growing, and even the eyes at the bottom follow your mouse movement. Enough said – just take a look!

Other sizes (desktop only): 160x600 | 300x600 | 728x90

Related: CS5 Web Premium Banners (desktop only): 300x250 | 160x600

Cricket is near and dear to my heart because I've worked on so many different campaigns, and the characters are cute little creatures that do all sorts of funny things. In this banner, I used my previously developed methods for animating the character’s limbs, mouths, and eyes in a fun, cartoony way that still maintained low file size. While this is rich media, the total file size is only 60k. Making the character move in all of these ways was a great time, and I think that feeling of "fun" shines through.

Other sizes: 300x250

These Kayak banners are some of my favorites of all time. The style was designed by the art directors at GSP, and I was able to take those Photoshop concepts and create beautiful vectorized versions of the boards, with animated flipping actions for each of the "squares". I developed a system whereby the copy could be easily changed (including setting margins, line breaks, etc.) so that the copy flowed as the client wanted. I could also adjust the grid size independently, creating more or less flip units to accommodate the messaging. Many versions of these were created, including a rich media version that would poll a few tropical-water locations and then display the destination and the water temperature there. A click would then find flights to that location (in the demo below, for example, Key West is the destination).

Real-time weather data version (desktop only): 300x250

Other sizes (desktop only): 728x90

These campaigns for ACI were fun to develop. Some had animation interactivity (such as "Blizzard" below), and others were simply "sit and watch" concepts like this “international stocks” version. The idea was that the stock quotes fly along and then "form" into various recognizable international landmarks. Nearly all code-driven, it was tough to pull off in only 30k, but I think the results speak for themselves.

Other sizes (desktop only): 160x600 | 300x600 | 728x90

Related concept: “Number Blizzard”: 300x250 | 160x600 | 728x90

This interactive banner features an open-source physics engine called box2D. It’s powerful but not entirely easy to use. I used it to great effect on this banner, because the realistic bouncing and breaking of the pinata helps sell the entire experience. The harder (faster) you hit the pinata, the more the candy flies, and the pinata becomes progressively destroyed. When playing this one, a tip is to move your mouse in smaller motions...less is more!

Other sizes (desktop only): 728x90 “Disco” concept: 300x250 | 728x90

They just don't do banners like this anymore. Mini-games are perhaps a thing of the past, but they sure were fun to create. Nearly every piece of these banners is vector art that I designed from a fairly rough concept. I designed the environment (such as the code-driven water and beach waves), as well as each character and their running or swimming animations. Another tough concept to pull off in 30k. But the end result is both beautiful and fun.

Other sizes (desktop only): 160x600 | 728x90

“Swim challenge” version: 300x250 | 160x600 | 728x90

As I've mentioned several times, I love animating particles. So when this bubble-concept came to my desk, I was more than excited to try to build it! The earlier concept shown below featured the copy lines formed from the bubbles, but this was determined by GSP to be too hard to read. And thus the current concept at left was born, which not only was clearer to read, but animated more smoothly because it had less bubbles moving at once. Which one do you prefer?

Other sizes (desktop only): 160x600 | 728x90

Earlier concept: 300x250

This concept features an interactive synthesizer, using the old "wine glasses filled with various amounts of water" technique to create musical notes at different frequencies. Originally I tried simply recording the audio using wine glasses filled with various amounts of water, which I "tuned" using a guitar tuner. While this worked, I could not keep the sound consistent enough so that it would not have obvious repeats. I later settled on using Logic Pro and a usb keyboard to create the specific notes I needed for the harmonic scale. The easier part was coding everything together and creating the virtual keyboard that the user could play. With more time in the schedule, I would have added a background beat, or a “record and send to a friend” functionality.

Stubhub banner campaign imagery features all manner of events that look a lot more fun than simply staying home. From concerts to sports events, you can buy (or sell) a ticket to just about anything on their site. Many variations of this animation were created, in various colors. And by using SVG graphics, I was able to morph the Stubhub logo's quote graphic in and out of the frame, while keeping compatibility with mobile devices as well as desktop computers. The examples shown here display the general idea of nearly 100 banner variations (and counting).

Other sizes: 970x66 | 300x600 | 728x90

Legendary producer Teymoor Ghashghai gave me a big task with a lot of creative freedom: Create a WW1 dogfight battle between two planes, where they ultimately fly out of a phone screen, revealing that we've been watching the battle on an Evo, the first 4G phone. I got right to work on storyboarding each scene for cinematic appeal. I created all the environment and animated some stock WW1 3d models, later adding in explosions, clouds, and bullet tracers. One constraint was that the entire banner could only be 15 seconds long. In the end it was an amazing opportunity to be a part of. I only wish we could have added a soundtrack.

Other sizes (desktop only): 300x250 | 160x600 | 728x90

A relatively simple concept, this Cisco ad features the NBA as part of their larger campaign for networking prowess. Cisco is arguably the largest name in networking, and this banner was developed to perform exactly the same on desktop or mobile devices, with smooth animations and retina (high) resolution images and SVG graphics. I also created a custom subset of the brand font for the counter animations (which contained only numbers 0-9), since using an entire font would be file size prohibitive.

Other sizes: 728x90

The Quaker Spring banner required a lot of thought and planning in order to pull off the animation and interactivity in 40k. In creating this banner I discovered how to make a spring made up of 30+ individual bitmaps to not only expand and contract, but also bend side to side, whether following a user’s mouse or some hidden target. In the end, what seems like a simple banner is an exercise in creative problem solving and coding. The resulting code was also useful in a follow-on concept, shown below, where the spring compresses and then “explodes”.

Similar concept: 300x250 "Spring Explode"

Other sizes (desktop only): 160x600

This rich media unit was a fun exercise in large bitmaps and 3d-depth, not to mention streaming video with custom controls. I had to do a lot of retouching in Photoshop, as well as recreating the scene in Flash with repeating elements (like the black seats) that simply could not be brought in full size due to file size constraints. Thus there is a lot of behind-the-scenes tricks and illusions to make this one work, as we only had 100k total (not counting the video).

For this unit, we did a custom photo / video shoot with fitness models. Each model was filmed from above on a green-colored treadmill. I then keyed the actors out of the background and created loops for each one at different speeds (walking vs. running). The rest was code and keyframed animation in Flash to tie it all together. And yes, you can get any place in the race, from 1st to 4th – with a custom message for each place about how Muscle Milk would make you faster!

The natural extension of the concept above, this banner features actual 3d geometry and interaction. Utilizing PaperVision3d, a popular code extension for Flash back in the day, I built some simple 3d models, and then constructed a scene that the user could navigate with their mouse. If you angle the scene in a certain way, you even get to see specular highlights from the “sun” reflected off the solar panels. Never used in production, this was an experiment, but this type of banner is certainly possible with today’s WebGL features.

This campaign was an exercise in file size management. With only 40k available, I had to come up with innovative ways to reduce the size of the images. For instance, there is only one cloud image used (and simply repeated / rotated / scaled). The Taj Mahal has it’s twin towers reused on both sides. And the end frame featuring the flight crew is one image masked into 5 inside of Flash. And to top it all off, I created the lens flare as a vector graphic.

Other sizes (desktop only): 160x600 | 728x90

These two concepts were not only fun to do, but still interesting to watch. For “Shoot ‘em up”, I keyframed each letter blowing up in a unique way, as the file size prevented using an external physics code. Each time the banner randomly chooses the bullet hole locations, and if one hits a letter, the letter reacts accordingly. For “Centipede”, I worked up an insect design in Photoshop, with repeating body sections that would simply be duplicated in Flash to keep file size in check. Then I coded a simple chain that made each body part follow the one ahead of it. Adding moving antennae and tail parts put the finishing touch on this animation.

Flash versions for “Shoot ‘em up”: 300x250 | 160x600 | 728x90

Flash versions for “Centipede”: 300x250 | 160x600 | 728x90