Infographics

Multiple animated inforgraphics for Oracle campaign

Javascript,scrollmagic, php, Webpack, SCSS GSAP (greensock animation platform), Adobe illustrator, Photoshop

The Challenge

As part of Oracle’s new campaign, there was a plan for animated infographics that would fill the role of landing pages, leading to additional assets. One of the main challanges was to create a visual connection with the audience, explaining/visualising the numbers and results of research using only limited number of icons/illustrations.

Design Process

First part of the process would include me working with copywriters tweaking the copy where necessery for best use of the message and enforcing the design. I use paper and pencil sketches mainly at this stage for both initial ideas and rought wireframes and layout. Adobe Illustrator and Photoshop were used for hi-fidelity mock-up to present to the client. Also Illustrator is usually my maintool to work extensively with SVG icons, preparing for animations, web and creating more complicated illustrations.

Development

Dev process from my point of view started after all the designs were approved by the client. The code base of the structure for these infographics were createed by Bill McGlone. And that made it so much easier to work on a solid foundations.
Vanilla Javasript was used thruouth the mini apps, with addition of only 2 libraries: GSAP and ScrollMagic.
Styling was written in SCSS and compilled using Webpack. I love working with GSAP (GreenSock Animation Platform), it makes working on animation very pleasent and easy to tweak and try various variants. Not to mention that it allows for back compatibility as far as IE9 – which can be quite important when working with large enterrprise clients.

Final Result

In the end client received a series of consistent looking product, build using future proof, modern technology, ready to be plugged-in to any system or used as stand-alone elements as part of the the largest campaign in history of Oracle.