How to Prepare Your HTML5 Ad Assets and Design for Animation or Coding
7 tips and best practices for designers who design animated banners and other online ads
You have developed a creative idea with your client, have designed your banner ads, you may also have prepared a Storyboard with an animation solution, and you feel like it’s ready to be sent off to an animation or coding team? Good! 👍
Now it’s time (well maybe next time at least? 😉) you should properly prepare the files and assets for animation or coding. The tips provided below will ensure that you achieve what you expect from your production team and the ads are prepared in the most effective manner 🚀
tl;dr
- Prepare the ads in Adobe Photoshop or using some better quality software (not print design software… 🛑 InDesign or Illustrator, for example, are not a good idea)
- Use as many (only?) vectors in your design as possible
- Organize your file contents properly: use Artboards, Folders, name the elements / layers by using meaningful titles
- Use as many “raw assets” as possible in your design: big images, vectors, unedited photos, masked photos etc.
- Use fonts wisely + provide the fonts when sending out the assets
- Design the ads with a maximum of 3–5 animated content frames
- Share your animation idea or Storyboard and your vision with the production team, animator or agency
Tip 1: Prepare the ads in Adobe Photoshop
You may ask — why Photoshop ???
Adobe Photoshop .PSD files are the best option (at least from our experience) due to the following reasons:
- It allows to arrange the content elements to Artboards and Folders
- It supports both vector graphics and raster graphics
- It has tools to export images and vectors in different formats
- It has tools to slice the design
- Your ads design can be coded and animated as “pixel perfect”
- It has tools to arrange the structure of the file / folder / assets in a nice way
- It works nicely with Adobe Animate when importing assets
Well, we animate and code HTML5 ads that are designed in almost every software out there: Adobe Illustrator, Adobe XD, Adobe InDesign, Figma, Zeplin, Affinity Designer, Sketch etc. But there is always something missing in the above: proper tools to slice the design, to export the assets, to export the images in the needed quality or format, and sometimes designers design ads in millimeters 😭 instead of pixels, software is meant for print design, or some effects cannot be copied etc.
So if you can choose — use Adobe Photoshop and provide .PSD files for coding. And if not — the developer or animator might find ad development a bit bit more frustrating.
Tip 2: Use as many vector graphics in your design as possible
HTML5 animated ads consist of graphics (JPG / PNG images) + shapes / vectors + some HTML /JavaScript code.
Try using as many vectors in your design as possible: vector logo, vector buttons, vector badges. Don’t rasterize any vector elements. The developer will figure out the proper format to use by himself while exporting the assets.
The main thing here is that vectors can be manipulated a bit easier: you can scale, rotate, export, animate vectors without reducing the quality. And for the development — vector elements are converted to the HTML / JS code that compresses well and looks good when scaled.
Tip 3: Organize the content of your files in a proper way
This tip works nicely for every Photoshop or graphics file that you are going to provide to your developer, coder or animator later on.
- Arrange your content using Artboards
Use Artboards when designing + add easy to understand names to the Artboards (300x600 frame1, 300x600 frame1, 1800x1800 Instagram video frame1, etc.) - Arrange your content using Folders
Group your content to Folders (and also name the Folders nicely): header, footer, main content, text, CTA button etc. - Name all the elements to human readable names
Proper names will allow the developer to quickly understand what is there inside, import /export the assets faster and in a simply easier to work with way. “Client logo” is much better than “Asset 1”, don’t you think?
The proper file structure with meaningful names will allow to export the contents faster, use search /filters, arrange the content faster and will save a huge amount of time for everyone in the end.
And we believe that you, dear Designer, know how painful it is to receive some messy file from someone and when you have to fix this and that…
Tip 4: Use as many “raw assets” as possible
The main idea here is as follows: do not flatten or merge anything, do not compress the assets or images and use high quality images (Smart objects).
• Separate elements can be animated, combined or flattened — cannot
• Big images can be exported in the necessary size, used for zoom or pan effects
• Small images cannot be up-scaled or cropped as necessary.
Tip 5: Use fonts wisely + provide the fonts
Generally you can use any fonts you like, because in most cases those fonts will be converted to vectors. Adobe Animate converts the fonts automatically to vectors. But there may be situations when fonts cannot be converted, or converting font to shapes is complicated (Paint brush font?😲 Font with a lot of edges?🤔)
So our advice here:
- Use fonts you like wisely (almost always)
- Use Google Fonts if possible (safe decision)
And one more important note: do not forget to provide Fonts used in your design when sending out the assets for development / coding / animation!
Tip 6: Design the ads with 3–5 content frames max
These days ads always have some weight limitation (most often it is 150KB .zip file weight) to meet. So, it is a good practice to design ads with a maximum of 3–5 animation frames.
Keep in mind that every ad element means more weight. Every ad frame implicates more weight. So here “less is more”, because you can animate lots of stuff nicely when you have a 3 frames ad. And only some elements can be animated, if you have 5 frames that need to be animated.
Also, think about your animation or Storyboard wisely. It sounds nice to the client “let’s make the car move around and flash lights and door open and <…>” but in the end the animation may need to be simplified, 3D animations in HTML5 ads are not always possible and HTML5 ads are not TV or video clips.
You can find more ad optimization tips in our article below:
How to optimize HTML5 banners weight (it is intended for developers / animators mostly, but quite suitable for ad designers).
Tip 7: Share your animation idea or Storyboard
It is always a good practice to provide the animation idea or Storyboard with the assets. The main thing here is that Designer (or Project Manager) already knows a bit how they wish their design to be animated, what needs to move in what direction, and what effects they would like to see.
So don’t hesitate to provide Storyboard or at least some brief example / idea how you see your ad animated. Not everything can be completed with HTML5, but lots of things can be done.
The best Storyboards we’ve worked with had the following:
- Frame by frame design examples (frame1 > frame2 > frame3)
- Detailed explanation on what moves and in what way (for example, pans from the left, slides in from the right, bounces a bit)
- Some information about the timing of the animation (for example, this moves faster, this moves slower)
- Online examples of the effects that are mentioned, if they are a bit advanced or not usual 2D movements
- TV clip, video examples from the same campaign to keep the animation consistent across all platforms and media
Final thoughts
If you prepare the assets properly, it will save your valuable time in the end, because client /developer / coder / agency will not ask any additional questions, will not ask you to provide any additional assets or to update the design.
And first and foremost, files with proper assets, high quality images and nicely organized files are always a pleasure to work with.
Bonus example
We’ve prepared a quick example of PSD file structure. Artboards + folders + layers + meaningful names. It will be a pleasure for everyone to work on something similar :)
Time to animate some banner ads? We are here for you!
At Adguns we have a professional team of HTML5 animators, pro level digital designers and highly skilled project managers.
Ad design and animation is our bread and butter.
Find our more if you need help with digital production here: https://adgunsdigital.com/
