Design 101: How to Design for HTML5 Animated Banners

Design 101: How to Design for HTML5 Animated Banners

As a best-in-class digital production studio, we know first-hand that the best plans make the best builds. Because when you have the right tools and elements, bringing your story board ideas to life through animation is easy. So, before your creative team gets to work, check out the best practices we recommend for designing HTML5 animated banners.

Why HTML5 in Animated Banners?

First things first, why HTML5? Well, dissect any content online today, and there’s a good chance it’s using this language, explains Randall Castro, Senior Visual Design at Assemble. “HTML5 integrates a lot more technologies than other languages, and combined with CSS, you have the ability to create a really nice animation with really low file size and weight. So, if internet bandwidth is an issue wherever your viewers may be, you know your ads will still run.

“Consumer attention spans are shorter than ever, so it’s not only so important that your ads aren’t delayed even a second, but also that your creative is capturing their attention right from the start.” We’ll get to more on that later.

Having the Right Tools for the Job

Designers obviously have multiple software options to choose from on any given project, but each has its perks for certain types of work. When it comes to animated banner creative, our go-to software is Photoshop. Here’s why: the tools in Photoshop (ie. layers, effects, color modes, etc.) make it easier to export each individual element that needs to be animated. It’s also the most used software by Motion Designers and Developers in the world.

If Photoshop really isn’t your thing, Sketch, Adobe XD, and Adobe Illustrator are your best bets, as Randall strongly advises to avoid Adobe Indesign. “Indesign is primarily focused on polished designs for print media, so it’s not ideal for motion graphics. It works great for aspects like storyboard presentation, but not for the design itself.”

So, here are a few things you can do and not do to best prepare your design for HTML5.

Design Do's

Use Layers & Layer Comps

Ideally, each element in a working file that needs to be animated should be its own layer. Utilizing layers and groups within Photoshop makes it much easier to export in separate capacities and create individual animations at different speeds and times. Layer comps can also be created to preview and navigate through animation frames for easier exportation as well.

Use Smart Objects

The best way to reduce the weight of your file without sacrificing information or image quality is by using Smart Objects. This is especially helpful for higher resolution images or product shots used across multiple frames.

Build 2x the Required Banner Size

Bigger is better for animated banner creative. “On modern screens and retina displays, banners tend to show up blurry if they’re too small. We recommend twice the required size, so that higher resolution images are shown as clearly as possible on any screen. So, if the banner size is 300x600px, then you’ll want the working file to be 600x1200px.”

Provide Your Text Files

“You want your message to be loud and clear, so we recommend providing the font family files with your creative to ensure it looks as expected,” Randall shares. “Especially for dynamic banners, if the text is too light when exported as an image, it won’t show up as clean and clear as you want it to.”

Think About Placement

Another important tip in regard to text, logos, or vector images: place these elements on the banner canvas using round or even numbers. This will help avoid pixelation when the asset is scaled down with code during the animation process.

Design Don’ts

Use External Files

Remember when we recommended using Smart Objects? Here’s another reason why: they’re a way better option than using external files. Pulling from a local source or cloud can lead to having missing items, and tracking them down will only cause delays.

Merge & Flattening Images

Again, layers are good! So, try not to flatten or merge images whenever possible. This makes it harder to edit or animate these elements individually, which limits your design possibilities.

Use Blending Modes

Blending modes cannot be exactly replicated when exporting images for animation, so they tend to get lost in the translation. Randall says “this is especially important to remember for elements that need a certain level of transparency like shadows or the high-level of detail in hair and fur.”

Having a Backup Plan

So, let’s say you’re reading this having already broken most of these rules, so you can’t provide a working file to become animated. It’s ok — we can work with your exported assets. Just try to supply each as a separate, full-sized PNG in its correct order. Remember to provide them as 2X the size of the original banner and optimized to a weight below the required limits, so they’re high-resolution ready. (You can use a site like tinypng.com for this.)

Other Animation Tips

When putting your ideas into motion, keep a few things in mind. First, never forget how short the consumer attention span is. “Be sure to show your product or main message in the very first frames. We see a lot of great art from clients, but if these important elements are only at the end of your banner, they may not ever get seen.”

Your final frame should also show your message or product again, so it leaves the viewer with these items top-of-mind. And don’t forget a simple call-to-action to encourage engagement with your brand. To best lay all your ideas out from start to finish, we like to recommend creating a Storyboard so your vision is displayed clearly and everyone is on the same page.

“It’s also extremely helpful to provide any creative specs — like file weight (KB weight), length of animation, type of device it will be displayed on, etc. — because it informs us on the technological requirements or limitations for a smooth delivery,” Randall explains. “All of these best practices are to help you create animated banners in the most efficient way possible. It’s not just easier for us, but it helps save you time and money while creating the most impactful banners for your campaign.

“We love seeing static graphics turn into animations, but it’s even more fun for us to provide our expertise from the very beginning and help our clients turn their ideas into the best performing banners possible.” Whether you have your own creative team or are looking for designers to help you bring your ideas to life, contact our experts for more helpful resources on the design and production process.

More Posts

Assemble 2023 Digital Outlook

Assemble 2023 Digital Outlook

Another year of exciting changes in the digital world has flown by. But if there’s one thing you can always count on in an ever-evolving industry like ours, it’s that Assemble will have you covered every year with all the latest and greatest updates for marketers in our annual Digital Outlook blog.

So as you prepare for a successful 2023, we invite you to check out 12 of the top trends you’ll see making a big impact this year — and you should start taking advantage now.

Why are Website Audits Important for User Experience & Performance?

Why are Website Audits Important for User Experience & Performance?

No one is telling you that you need a website anymore. We all know that. But simply having a website isn’t good enough now. In today’s fast-paced, ultra-connected digital world, consumers have very high expectations when they visit a site. They’re not going to put up with slow-loading pages or error messages. They’ll be on to the next.

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

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.

In the Spotlight: Jimmy Gonzalez

In the Spotlight: Jimmy Gonzalez

For me, every work day starts at 5am — thanks to a 14 year old son, Joshua, and a 10 year old daughter, Abigail. First things, first is getting them up and ready for school in the morning, followed by cleaning up the house. I like to keep things neat and tidy so I can’t start my day until the mess is gone.

Get in ToucH