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.
