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

AI Prompt Analysis

Introducing AI Prompt Analysis: How its Elevating the Creative Process in a Very Real Way

In today’s ever-changing production world, artificial intelligence is no longer a sci-fi fantasy but a remarkable reality. It’s becoming standard to rely on Artificial Intelligence (AI) to help us answer questions, write code, create content, design images, and more. But robots won’t be fully taking over our to-do list any time soon. Instead, we’re starting to see all the incredible ways that we can take advantage of its capabilities to improve our own internal processes. And that doesn’t mean teams taking a back seat; it means stepping up our skills.

AI-Generated Content & the Human Touch

It feels like just yesterday that robots were a thing of sci-fi films and cartoons. But just like that, they’re now helping us write articles, create images, and produce videos. Granted, we’re not quite ready to hire them full-time, but we are getting a really good preview into some of the things we can expect Artificial Intelligence (AI) to bring to the digital production world. So we’re taking a pulse check on what we currently know about AI-generated content and how to prepare your teams for what’s to come

blogpost Fran Reyes

In the Spotlight: Fran Reyes

My morning starts with tying up loose ends from the day before and then diving into any high-priority tasks for the current day. I like to check in with our designers and make sure their allocated assignments are perfectly clear and they have everything they need to get them done. The rest of my day is jumping in and out of meetings, both internally and client-facing, and ensuring that everything that was on the to-do list is checked off and delivered to wherever it needs to go — so we can do it all again tomorrow!

Client Modular Website Case Study

When a multinational hospitality company needed a quick turnaround on a new website for one of their new locations, they came to Assemble. To accommodate the tight production deadline, in addition to ever-changing rates and amenities, they needed a site that gave their team the ability to add updates, make edits, and create new pages — without any coding or development expertise.

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.

Get in ToucH