Trade Me | Road to SVG
I joined Trade Me in 2018 and was immediately tasked with improving their web banner advertising.
The previous ads were of low quality, featuring static and blurry images, which fell short compared to those of Trade Me's competitors.
I undertook research and development and ultimately, my team and I delivered professional and visually appealing ads, elevating Trade Me's online presence to a higher standard.
The previous ads were of low quality, featuring static and blurry images, which fell short compared to those of Trade Me's competitors.
I undertook research and development and ultimately, my team and I delivered professional and visually appealing ads, elevating Trade Me's online presence to a higher standard.
Christmas campaign
Nov – Dec 2018
Christmas campaign 2018 display banners are some of the first examples of animated banners Trade Me created.
Created using Adobe Photoshop, exported as a gif. Very simple animation, poor quality and large file size created a colour dithering problem when attempted size reduction.
I was left thinking, there must be a better way!
Nov – Dec 2018
Christmas campaign 2018 display banners are some of the first examples of animated banners Trade Me created.
Created using Adobe Photoshop, exported as a gif. Very simple animation, poor quality and large file size created a colour dithering problem when attempted size reduction.
I was left thinking, there must be a better way!
HTML5 experiments
Jan – Sep 2019
This time period was spent trying to find a tool that allowed us to create HTML5 banners. This tool had to be easy to use, quick to understand and allow for the speedy creation of ads in-house.![]()
Jan – Sep 2019
This time period was spent trying to find a tool that allowed us to create HTML5 banners. This tool had to be easy to use, quick to understand and allow for the speedy creation of ads in-house.
Free selling Motors & Marketplace
Feburary 2020
The previous experiments failed for multiple reasons, they were on the right track but didn’t quite cut the mustard for what we knew was possible and what we were capable of. At the end of 2019 we had a break through, Bodymovin was found, two designers joined forces and created our first ever display banners made in After Effects.
Created using Adobe After Effects, exported as a HTML5 using.
Feburary 2020
The previous experiments failed for multiple reasons, they were on the right track but didn’t quite cut the mustard for what we knew was possible and what we were capable of. At the end of 2019 we had a break through, Bodymovin was found, two designers joined forces and created our first ever display banners made in After Effects.
Created using Adobe After Effects, exported as a HTML5 using.
HTML5 guidelines and export document
Feburary 2020 – Ongoing
The next step was to roll this process out to the whole design team, to do this we drafted up the document we now know as “Trade Me - HTML5 guidelines and export.” This document is a set of instructions on how to create static and animated HTML5 banners using Adobe Illustrator and After Effects, Sketch and a text editor.
Having these types of guidelines ensures the whole team is on the same level and we can all create top notch banners for Trade Me.
Ka Pai!
Feburary 2020 – Ongoing
The next step was to roll this process out to the whole design team, to do this we drafted up the document we now know as “Trade Me - HTML5 guidelines and export.” This document is a set of instructions on how to create static and animated HTML5 banners using Adobe Illustrator and After Effects, Sketch and a text editor.
Having these types of guidelines ensures the whole team is on the same level and we can all create top notch banners for Trade Me.
Ka Pai!