An HTML5 infographic, animated with HTML5 – a world first?

This infographic, or animographic (as we’ve just coined it), summarises the need-to-know facts about HTML5 and brings them to life with animation produced using HTML5.

As a creative agency we love to put our grey matter to the test. With already plenty of infographics out there on the subject of HTML5, our self-imposed challenge was to try and do something that would stand out. The big idea?

If it’s all about HTML5, why not animate the infographic using HTML5. Seems kind of obvious, but to the best of our knowledge it’s the first of its kind.

The animation element has been developed in HTML5 using Adobe Edge. It’s been a lot of fun and we have learnt a huge amount in the process. For a visual account of the journey we have been on, check out our Behance profile. Individual credit goes to Russ Henderson for his conceptualisation and art direction, and to David Souch for his illustration and graphic design skills.

The next step for us is to develop some useful resources on HTML5. Watch this space for my white paper on the subject and handy tutorial videos on using Adobe Edge. We’re also working on our own mini-movie animation based on the animographic.

View the animated ‘animographic’

View the static infographic

P.s. HTML5 is a language that is still under development and as such may not correctly work in all browsers. It is always important to ensure your browsers are up to date, not only for security reasons, but for the new features and HTML5 support. We created our animation using Adobe Edge, which is still in development by Adobe. We did say this was cutting-edge stuff…

Further reading

If you want to learn more about HTML5 read the Wikipedia article

Shannon Young Digital Designer/Developer mark-making*

I'm cool and I like to write code. And design stuff.

Leave a Comment