g Text Version
Beauty & Self
Books & Music
Food & Wine
Health & Fitness
Hobbies & Crafts
Home & Garden
News & Politics
Religion & Spirituality
Travel & Culture
TV & Movies

Bored? Games!
Take a Quiz
Rate My Photo

Natural Living
Folklore and Mythology
Distance Learning

All times in EST

Full Schedule
g Flash and Animation Site

BellaOnline's Flash and Animation Editor


Example Storyboard for Book App

A book app storyboard should indicate the interactions and animations for each page of the app. You will need to know the type of interaction that occurs. Is it a tap on an object or by shaking the tablet? You will also need to know what should happen as a result of the interaction. Will something disappear, will something change size or will a sound effect by played? A storyboard helps to insure that both the app developer and client understand what to expect in the finished app.

When we continue to examine the sample storyboard, we can see listed the interactive design elements and the interaction that occurs when they are tapped, swiped or whatever. You will want the name of the object that the reader taps to trigger the interaction and the name of the object that is affected by the interaction. Sometimes this will be the same object, such as when an object makes a sound or disappears when tapped. Other times, what triggers the interaction may be different from the object that is animated. For example, if the reader tilts the tablet, a graphic on the screen may float down or to the side via the physics engine.

As you can see from the sample, the Christmas ornaments begin swinging as soon as the page loads and do not require any interaction to begin the animation. The animation will continue forever or until the page is replaced with another page. However, when the ornaments are tapped, we will hear the jingle sound, which only plays once.

The second interaction is the cookie graphic. It also begins a bouncing animation automatically when the page loads. The animation will get the attention of the reader and the message tells the reader that the bouncing objects are interactive. This is true throughout the book app. When the reader taps the cookie, we hear a laughing sound effect, the message disappears, he stops bouncing and the graphic is replaced with a graphic of the cookie that is missing a foot.

In the next section, we have information about any special buttons on this page. Because it is the cover page and the first page of the app, we have the Read-to-Me or Read Myself buttons. Depending on which is clicked, the reader will hear the narrative on every page or the pages will load without playing the matching audio files. The Games button will take the reader directly to the games center, which has thumbnails for three jigsaw puzzle games. These buttons only appear on the cover page.

At the bottom, we have a general description explaining how all the elements should work together. Here is where the client may add any special instructions to the app developer or you can make notes yourself during the client meeting.

Blank Storyboard Template

← Back

Join us in the Animation forum. | Join us in the Digital Art forum.


Add Example+Storyboard+for+Book+App to Twitter Add Example+Storyboard+for+Book+App to Facebook Add Example+Storyboard+for+Book+App to MySpace Add Example+Storyboard+for+Book+App to Digg Example+Storyboard+for+Book+App Add Example+Storyboard+for+Book+App to Yahoo My Web Add Example+Storyboard+for+Book+App to Google Bookmarks Add Example+Storyboard+for+Book+App to Stumbleupon Add Example+Storyboard+for+Book+App to Reddit


RSS | Related Articles | Editor's Picks Articles | Top Ten Articles | Previous Features | Site Map

For FREE email updates, subscribe to the Flash and Animation Newsletter

Past Issues

Printer Friendly
tell friend
Tell a Friend
Email Editor

Content copyright © 2018 by Diane Cipollo. All rights reserved.
This content was written by Diane Cipollo. If you wish to use this content in any manner, you need written permission. Contact Diane Cipollo for details.


g features
Subtle Animation Website Trends

Wix Editor - Background Video

Video on Wix Websites

Archives | Site Map


Past Issues

Note: BellaOnline uses cookies to help provide a consistent user experience. Our advertisers may use cookies to help customize ads. Please contact us with any question about our cookie use.

Summertime Foods
Corn on the Cob
Burgers on the Grill
Apple Pie


| About BellaOnline | Privacy Policy | Advertising | Become an Editor |
Website copyright © 2018 Minerva WebWorks LLC. All rights reserved.

BellaOnline Editor