Using design to reduce development
Whilst the majority of these creatives were fairly simple, the particular challenge presented was to makle the cyclists look like they were actually "cycling" across the screen in a credible fashion. This would have been tricky enough back in the Flash days, when we could easily move the registration points of hinged / rotating asstes, but with HTML5, the task of simply positioning and rotating each leg asset correctly would have been prohibitively long (and may have resulted in significant performance lag due to the sheer number of independent assets that would have been animating at once.. So we needed another option.
By investing a little more time in the design and asset preparation phase, we were able to greatly reduce the amount of time and effort that was involved with the build by producing just two png assets of the group of cyclists, that could be toggled on and off within a parent div tag using a simple loop. To get there, we first had to remove the background from the original asset and then cut the parts of the cyclist that we would be looking to animate later...
However, as you can see from the above example, we were now left with a bike with some pretty serious holes cut out of our bike, which would obviously look terrible with the riders' legs anywhere other than their original positions. The next step, therefore, was to spend a bit of time recreating the missing parts of the bike (no mean feat when you're talking about things as finicky as spokes, gears, chains, saddles and water bottles), and to add the rider back in, but on separate layers for upper and lower legs (front and back), feet, and torso, head and hips...
Next, it was necessary to retouch the rider's clothes and helmet in order to create the variety that would be necessary to create the final group (and so every rider doesn't end up looking like Bradley Wiggins)...
At this point, all of the raw assets were complete, and it was now time to start creating the duplicate assets for the various stages of the leg animations...
...the idea being that we could now take each of the above pngs, for each of the different riders, and string them together into a sequence that would look something like this...
The final stage was to create a more elaborate group-version of the above sequence, with the stages of each rider's pedalling varied, and with subtle shifts forwards and backwards with each frame. As you can see, the result is quite effective, and this is achieved with by cycling through just four pngs. More work for the designer, but it meant that all the developer had to do was position a parent div, tween it across the screen, and run a simple looped script within it that toggled the visibility of each png on and off as appropriate.
Ultimately, this job was a success because our focus, as a team, was on striking the best balance between design and dvelepment for the client, rather than each department simply focusing on completing their part of the process, so they come out of it looking good in the wash up. As the lead digital designer on the project, it would have been considerably quicker and easier for me to simply hand the developers a bunch of cut up bits of bikes and legs and then leave them to the laborious, painstaking task of positioning and animating everything manually - however, the amount of time this would have taken (not just in terms of the initial set up, but also all of the subsequent rounds of QA and feedback) would have bene prohibitive, and so we decided that it was well worth investing a little more time in the design phase for the sake of drastically reducing the time spent on development.
• • •
Got a problem that needs a creative solution?
(Click or tap anywhere to close.)
The brief
We received a brief from one of our partner creative agencies, Innocean, to design and build a set of standard HTML5 banners for the release of a special "Team Wiggins" edition of Hyundai's popular Santa Fe SUV. The original instructions (the scamp) that we received, as well as the final storyboards that we produced, can be seen here:
The provided scamp.
Our finished storyboards.