arrow arrow-2 arrow-2-right LinkedIn Behance Treehouse cv Email Options Share Twitter

HTML5 Banners


In producing HTML5 banner ads for different brands, I have been able to showcase my design and development skills in a dynamic and engaging way. In each case I sought to communicate a brand's message via space-effective layouts, animation, and interactivity, whilst minimizing file sizes & load times and ensuring maximum cross-browser compatibility. I ensured all media complied with the Interactive Advertising Bureau's guidelines.

To produce these banners, I structured the content in HTML5, created custom layouts and styling using CSS, and used javascript to provide interactivity, harnessing the GreenSock javascript library to control animation within the banner.


336x280 300x250 250x250

In order to publicise the student discounts app, I created a storyboard of 3 distinct sections: communicating the brand, demonstrating the app's primary purpose, and inviting the user to download the app.

Where possible, I used SVG images to keep the banner's file size low and to optimise it for high resolution displays. The banner's CSS layout was also made responsive so that the advert could be effortlessly resized to fit standard and non-standard banner dimensions.

Dancing Spaceman

Experimenting with my own fictitious electronic music blog "Dancing Spaceman", I designed a simple brand and created all visual assets in svg format, keeping the filesize low whilst preserving image quality. As well as controlling animations through the GSAP Javascript library, I incorporated hover interactivity and an asynchronous email sign-up form.

Design Portfolio

I wanted to create an interstitial banner which communicated my professional brand identity, which detailed the services I offer, which gave a sample of my work and which provided a call to action to find out more. I utilised the Green Sock library in order to animate the information in an engaging and interesting way.

Further reading