Earlier this year, I had the opportunity to train a group of print designers who were interested in learning how to design and animate HTML5 digital ads. I started off by assigning a tutorial that teaches the basics of Adobe Animate. Afterwards, I hosted a teach-out over Microsoft Teams to show the end-to-end process from building an ad to uploading the files to Google Campaign Manager. While learning how to use Animate is an important first step, I soon realized the designers needed to be familiar with the best practices in order to feel confident working on their own.
Working as an in-house designer for a company means working within boundaries of the brand guidelines. The good thing was that the designers I was training were already familiar with the company’s style guides. Before I had started on this training experience I thought the most challenging part was going to be helping them navigate through Adobe Animate. However, I soon realized that it’s not difficult showing people different parts of a software. The real challenge was guiding them to find a balance between animated ads best practices, brand standards, and publishers’ requirements.
Along the way, I’ve consulted and opened up discussions with my teammates on animations in order to deliver the best training possible. In the end, I am putting together my learnings in the format of a step-by-step list for building an animated banner ad from start to finish.
I find storyboarding effective for many reasons. One being that it helps me plan the layout of different components of the ad across different frames, and allows me to better visualize the animation of each component. Another is that I can quickly mock-up the storyboard to show clients/stakeholders. They can then easily suggest changes without creating that much re-work for me.
The final frame is what stays on the page after the ad is finished playing. Looking at the final frame, your audience needs to understand the context and see customer value. This includes showing the most important information such as a savings claim or a message that drives an action. The value needs to be obvious because your goal is to engage your users to click through.
The perfect layout has balance and hierarchy. One of the challenges I frequently encounter is looking at the brief and knowing there are way more things than I can easily fit on a web banner. I try to cut down on the content by asking clients if we can remove a product or shorten the copy without directly affecting the overall message.
Requesting a product to be removed can sometimes be controversial. But I counter with the reasoning that fitting too many products would be reducing the size of each one. This would affect the legibility of each product and make the visual cluttered, which potentially creates a negative experience.
Before animating, we need to know exactly what sizes we are working with. Animated ads come in 3 standard sizes:
Medium Rectangle: 300×250,
Half Page: 300×600
Leaderboard: 728×90
But they also come in many other sizes depending on the publisher and campaign strategy. Because there are so many different sizes, make sure to design a layout plan of each banner size. For example, mobile banner ads are much smaller than half page ads. Therefore it’s probable that not everything on a half page will be able to fit on a 320×100 mobile banner. What components can we remove from the mobile banner while still retaining an effective message?
User attention is a short. If your audience does not develop interest in 3 seconds, they will likely stop paying attention. Our animation always starts with the company logo to facilitate brand awareness, but we aim to get to the message as quickly as possible.
The next part is deciding how long your message stays on the screen before transitioning to the next frame. I estimate the time needed by allowing myself enough time to quickly read the text 3 times.
Google allows the maximum animation time to be 30 seconds (including loops) but 15 seconds is the maximum recommended length of a banner ad.
How do you plan on animating each component? There are so many ways to animate something, but the movements have to make sense. I always ask myself these questions:
What type of mood are you trying to convey?
Fast animations with bounces at the end (Ease-out Back) show playfulness while a slow ease in shows a more serious tone.
Is there consistency?
Consistency allows for a smoother animation. If multiple components are moving in a frame, are they moving at the same speed? The animation timing should also be the same across different banner sizes.
Are the graphics eye-catching?
Banner ads usually live on the peripheral areas of web pages and are not the main focus. It’s important that your ads can draw user attention and at the same time adhere to the brand and publishers’ guidelines.
Does the user know where to focus on?
Don’t animate each component just for the same of animating it. Too many moving parts, if not synchronized, can distract and even overwhelm the user. All of the moving parts must work together. This means allowing more eye-catching animation for the critical information and more subtle animation for the “background” information.
Due to company’s brand guidelines, we are not able to customize our call to action buttons. However, there are numerous resources online on how to maximize the effectiveness of banner CTA buttons.
The size of the button with relation to the ad size has come up during several discussions with my digital team. We agree that the button needs to be a focal point which the user can easily find, as long as it remains balanced with the rest of the banner components and is not intrusive. After all, the point of having an ad in the first place is to get the customer to click through. Not only should the CTA be easy to find, the CTA copy needs to set clear landing page expectations for the user.
Because individual members on the team own the end-to-end execution of each ad package, style guides and consistency across each campaign package is crucial. We developed a guideline so that the CTA is consistent across all of our work.
If your ad has a white background, be sure to include a border around it. This will help to differentiate the ad from the surrounding webpage, and is a requirement by publishers.
Your typography is a critical element to your ad and plays an important role in the overall experience. To ensure that users see the font as intended, you will need to break the final copy text into individual shapes. The reason for doing this is because the output format is in HTML5 and JS. Unlike MP4 video format, the text is not embedded. Users who don’t have a specific font on their device will see the ad in a default font and not the font you have chosen for the design. To avoid this, always convert your text into shapes.
I will briefly tie this back to my second point where I talked about the importance of having all of the key information in the final frame. You will need to upload a static back-up image to your publisher, and it’s usually a still image of your final frame. Publishers require a static back-up image for users who are viewing the ad on a device that does not support HTML5 and therefore are unable to see the animation. Your static back-up image will show in its place instead.
Many things on the web have file size limitations and animated display ads are no exception. When my team upload ads to Google Campaign Manager, each banner package must have a size limit of no larger than 150kb.
In the planning phase, I would resize the images small enough to try and stay within the file size limit. This helps to save me from many headaches later on. But when the final output is still larger than the file limit, I turn to image compression tools for some help.
TinyPNG is a fast and simple tool that compresses both .jpg and .png files at the same time. It can reduce individual image sizes upwards of 80% without compromising image quality.
TinyPNG is usually enough for me to get my image files down to the required sizes. But sometimes I’m working on an ad with multiple product images and I am still just a dozen or so kilobytes over the maximum allowance.
When this happens, I use another compression tool called Compress PNG and Compress JPEG. What makes this tool different is that you can compress the image even further by removing the number of colours on the image. When doing so, compare both the compressed and original image to make sure that the image colours do not appear different to the naked eye.
Before uploading to your publisher, we need to add click-through tags to allow the user to click on the ad and go to the landing experience.
Once your user clicks on the banner, the landing experience should be consistent with your ad. We want to create a linking experience that correlates with our ad message and CTA. When our ad tells our customer to click to “learn more”, the customer should be directed to an informational page. A “shop now” button should direct to a Product Listing Page or Product Detail Page showcasing the featured product(s) in your ad.
There are many factors required to make an animated banner ad that is attention-grabbing to the user, effective in storytelling, prompts the target audience to take action, and continues the experience onsite after the click through. User behaviours, design trends, and even publisher’s requirements are constantly involving. Have frequent discussions with your team and take time to do your research in order to stay up-to-date and make sure your brands awareness has a unique edge.
Posted By
Annie Sheng
Categories
Uncategorized