CSS Animation and Artful Storytelling

Adding Value to Children’s eBooks

Kris VetterMarch 31, 2016

#ebookcraft

File size InDesign skillset

vs. traditional animator skillset

Time savings Cost savings

CSS animation & JS triggering

A lot of work for “realistic” movement

Pros Cons

Images are native digital files, not scanned physical work

Images on separate layers, or in separate files

Images have transparent background RIGHTS!

Can I animate it?

Time to tinker!

Should I animate it?

Think UX first, not “What can I animate?”

Would animation: Add context Assist the narrative Assist age/reading level comprehension Assist reading order

If yes, that is added value

Be conscious of your audience Make interaction obvious

Buttons should look like buttons Interactive objects should prompt

interaction with an obvious visual cue Timing and duration account for

age/reading level Quality over quantity—keep your

animations lean and purposeful

I’m going to animate!

Let’s evaluate!

Foresight, not afterthought Inter-department

collaboration Get authors and illustrators

excited! Dogfooding Marketing

Yeah, I’m an idealist

Show preview sample in retailer stores Write copy that specifies that the ebook is

animated and how it improves the reader’s experience

Tell your sales team! Blog about the animation decision and

creation process (read: Show off your purposeful and pure intentions)

Market it!

Creating Animations with Adobe InDesign CC, Diane Burns, Lynda.com

Creating Fixed-Layout EPUBS with InDesign CC, Anne-Marie Concepción, Lynda.com

Want to learn more?

The Zoomer’s Handbook, Andersen Press UK Illustrations in A Christmas Carol and Sir Isaac Newton

illustration in The Theory of Gravity by Amy Salveson www.AmySalveson.com

Illustrations in Jack and the Beanstalk by Brittany Olson www.BrittanyOlsonIllustration.com

Tree in The Theory of Gravity by ZixBrony via Deviant Art

All other illustrations sourced from Pixabay and Public Domain Vectors

Acknowledgments

@kris_vetter

www.linkedin.com/in/krisvetter

Thank you!

#TeamPuppies