At the focus of this course are over 1000 hand-drawn illustrations that supplement the text. As HTML5 elements, these images were animated using CSS3 transformations and transitions using our favorite HTML5 tool: Hype. This combination of HTML5 and CSS means that the animations can be “played” directly in the browser window, and don’t require the user to have a player installed on their device, as with media created with Flash. This means the course’s animated images and content is available to users with any modern web browser, including those on mobile devices, many of which do not support Flash.
Over 1000+ Animated Illustrations
After reviewing the original content for the course, we determined along with our client that animated illustrations would add an exciting and engaging aspect to the course. These images are presented front and center in the interface, and each one is designed to support and supplement the key concepts in the text.
Our process for developing these illustrations started with breaking out the content into pieces that would make up the “pages” within each of the six sections, ranging from a sentence to a few paragraphs each. Then we discussed each content piece and storyboarded our ideas for the entire course in rough sketches. We then took these sketches and drew them as digital vector images, applying a unique style and color scheme. These images were then imported into Hype where we animated and synched them to the audio narration.
Project Type: Animated Videos
Creative Roles: Design and Illustration
Media: Digital Illustration
Illustrations in videos are powerful and unique. We have developed both still images and full sequences of illustrations that have been used in animations. This process involves working closely with both the client and the video production companies to bring the messages to life.
© Copyright 2022 Cindy Rodella-Purdy and Creative Cat Media, Inc. - All Rights Reserved.
Saphirion AG, located in Switzerland, has potential clients all across Europe. They wanted an animated piece that explained with simple visuals what their software does and how it helps businesses. The initial version will be created in English with a second version created in German.
Storyboard to Final Illustration