Ad Banners for Augustinus Bader

•

Advertising banners for Augustinus Bader

This Project included the development of dozens of banners optimized for the size and weight (in kb) requirements of advertising platforms. I made both static and HTML5-animated banners, created from the original photosets of Augustinus Bader brand products.

To begin with, it was necessary to cut out the main products from photos, think over the layouts for placing text and images on multiple banner sizes. And finally, save them with a size of no more than 150 kb, while maintaining an attractive picture quality.

I. Static banners

II. HTML5-based banners

Initially, this animated series of banners were created under the guidelines for HTML5 display creatives. Such as: final zip-folder, containing images and code files must be under 150 kb (or less than 300 kb for some dimensions). Surely, I kept the image quality as crisp as possible while compressing files to such a small sizes.

The animation in these HTML5-banners loops endlessly. CTA reacts with a mini-animation when hovering over it with the mouse. However, clicking anywhere on banner's surface causes a redirection to an advertised URL.

The layout of banners varies depending on its size in pixels: the goal was to display all the important information (including text, pictures and CTA) in small areas, such as 300x50px, 300x250px and others. As well as on big ones: 970x250px, 1160x287px.

Below you can see a few examples of 1160x287px and 970x250px banners, converted into a video clips (which unfortunately deprives it of interactivity and noticeably degrades the original image quality) - otherwise it wouldn't have been possible to demonstrate them on Behance: