Eye-Catching Animations: Tips & Examples that Bring Banner Ads to Life

We love animated banner ads. They’re fun, they’re eye-catching, and they can deliver a lot of great info in a quick, engaging way. And your audiences love them too. In fact, eMarketer reports that the click-through rate on rich media banner adverts is 267% greater than their static counterparts. So when you use them the right way in the right places, it can do wonders for your overall marketing goals.

To tap into all the power of animated banner ads, we’re here to share some helpful tips to consider when starting a new campaign, as well as some of the cool things you can do with animations today. Check it out.

Things to Consider When Creating Banner Animations

1. Having the right team.
   If you really want to create unique, out-of-the-box animations, you need the right team. That means having the right balance between tech gurus and creative geniuses. Because one without the other is like bread without butter — it’ll work, but it’s not nearly as good.

   “As a developer, my focus is speed and efficiency,” Emma Ulloa, Training Manager, explains. “Tech guys know what sizes, assets, and information we need to ensure that resizing or new placements are much quicker and easier. We can advise clients on the capabilities and advantages of the tech itself, which will offer the best performance, or if what they want to achieve is even possible. But the creative aspect is so important. Creative teams understand how the motions can work together in a way that’s not only more unique but more natural. They have the expertise and attention to detail that can make all the difference in the final product. And having that foresight from the very beginning makes the entire process a lot smoother for the developers — and the end result is a lot more exciting.”
   
   

2. Having the right tools.
   Even the most qualified individuals are only as effective as the tools they’re given. That means embracing all of the languages, platforms, and frameworks in the market to be able to bring your visions to life without limitations. “You have to trust and invest in as many resources as possible for your team,” Fabian Miranda, Web Development Manager, advises. “Rather than just picking a platform or language and sticking only to what it specifically allows, you want your motion designers to be trained and experienced in all the tools; knowing their advantages and which will offer the best route for the client’s unique visions. Similarly, there are some frameworks that may make the job easier or faster, but they may not create the best animation in the end. As an expert, you have to know all these tools to understand which tech best suits the desired final product.”

   This expertise includes advanced animation tools like AnimateCC. As part of the Adobe Creative Cloud, this kind of tool gives you the ability to apply many of the features of high-end animations — such as advanced rigging, character animation, lip sync, and more. For additional details, check out the official site or contact Assemble with questions about utilizing these tools to create awesome animations.
   
   

3. Being as detailed as possible.
   It’s not unusual for a company to not exactly know what they want. In fact, it’s pretty common. But in all cases, the more information you can provide your development and creative teams, the better. The stronger understanding they have of what you’re trying to achieve, the more insight and guidance they can provide to create an end product you love.

   “The specific details you share with your developers make all the difference,” Emma explains. “Instead of, we want the text to appear on screen, maybe it’s, we want the text to slide onto the screen from the left. For any simple motion, there are tons of options as to how to make that happen, so be detailed in your descriptions. Even if you aren’t sure how you want the text to appear on screen, for example, tell us things like the speed at which you want it to appear, is it all at once or in sections, is it smooth or more stylized? We can offer guidance on what’s possible, but without knowing what you’re thinking, the journey to get there will be a lot longer.”

   For example, Assemble recently worked on a banner animation for Nike. The campaign objective was to show off their new Brazilian National Team soccer jerseys, so they knew they wanted the jersey to rotate from front to back. But Assemble offered a suggestion to make the concept more dynamic.

   “A lot of times when we receive design-ready files from a client, the designer treats it as a static unit, not considering how they can animate it,” Mari Mora, Senior Visual Designer, explains. “Essentially, they provide a final frame without any idea as to how all the elements are going to come into place to achieve that. In some cases, it’s valuable for us to do a reverse approach — looking at the final result to determine each of the steps needed to get there. With Nike, we knew they wanted the jersey to rotate, but instead of just appearing to spin around, we thought about each of the little movements that would take the jersey from one view to the next. We ended up designing the frame with an extra asset to make a simple fade in and fade out have a glitch effect to it. The end result was very cool.”
   
   

4. Remembering cohesion.
   Like any other successful marketing campaign, cohesive visuals and messaging are key to building brand recognition and loyalty. So when you’re planning a banner campaign, all of that needs to be communicated with your dev team upfront.

   Give them other brand materials, ads, and visuals you have that can serve as a reference point. And if you don’t already have one, consider creating a style or font guide that offers creative direction for all future animations. The most effective banner ads have a cohesive style that becomes recognizable to your audience. And, like mentioned above, if you’re not sure what you want that to look like, have a conversation with your dev and creative teams. They can offer suggestions that can help you understand all your options and find the right fit for your brand and your campaign objectives.

What You Can Do with Animations

Speaking of options, animations have come a long way since the days of the simple fade-in and fade-out, so here are just a few examples to help inspire your next campaign.

• Stop-motion Animations. This technique involves piecing together multiple static images to create the illusion of movement. From having floating particles fuse into a single cell to bringing toys to life as they walk across the screen, we’ve done a lot of cool things here.

• Playing with X, Y, & Z Axes. Think of the legendary text intro to the Star Wars movie… We can add another layer of dimension to the motion graphic by adjusting the Z-value. We can achieve a “2.5D” parallax that makes an element feel like it’s going off in the distance or coming toward you.

• Changing 3D properties. Similar to adjusting the Z-value, tools like Javascript, Google Web Designer, and others allow you to scale 3D properties to make an object appear as if it’s rotating on its axis. An easy way to make a flat vector feel a lot more dynamic.

• Scaling. We can scale elements from 0 to 100 at any speed. We can also create a bounce effect by scaling up beyond 100 (let’s say 120) and back down to 100. It adds a little extra eye-catching value to the motion. Simple, but super effective!

• A combination of effects. Just like in our Nike example, blending different motion effects can create a cool, new style. Maybe it’s a scale with a change in opacity or a fade with a z-value adjustment — the combinations are pretty endless.

  To learn more about creating eye-catching animations that take your banner campaigns to the next level, contact the experts at Assemble today.