Blue Balloon App This project consisted of proposing an interactive iPad version of the popular children’s book ‘The Blue Balloon’ by Mick Inkpen.
My goal was to make an engaging, intuitive reading experience for a young audience that made use of the different sensors available such as the touchscreen, gyroscope and microphone.
The screenshots and storyboards shown across these boards showcase the different proposed interactive elements of the story.
Rob Green OUGD301 Brief 2: Blue Balloon App Board 1
This is an example of a page in my iPad book. To open the menu interface the reader double taps the screen with two fingers.
This screenshot shows the interactive menu being opened by the user. The bottom bar shows a hint that helps the user interactive with the book.
The top bar has a scollable collection of page thumbnails for easy navigation around the book.
This shot shows the user scrolling through the different page thumbnails using the arrow button.
Blue Balloon App This board shows the menu system I have proposed for the app and how the user will interact with it.
I have designed the menu system in a way that it will be uninstructive to the reading experience whilst being easy to access when needed.
Rob Green OUGD301 Brief 2: Blue Balloon App Board 2
The first page opens with the front cover of the book.
The user taps the boy to start an animation of him tapping the balloon.
After tapping the balloon a couple of times the screen fades to white.
The next page’s type then fades in and an animated Kipper (dog) walks across the screen.
He stops in the middle of the screen and stand waiting for a second.
Most of the type then fades out and only the text relevant to the next interactive screen stays visible.
Blue Balloon App This board shows the intro screen and how the book’s typography will work with the interactive screens.
The bottom series of screens continues on to the next board.
This relevant text then moves to the top left of the screen and kipper walks off the right hand side of the screen while fading out.
Rob Green OUGD301 Brief 2: Blue Balloon App Board 3
This screen has been constructed from other illustrations in the book to create a unique animation.
This interactive screen allows the user to move the character using the touch screen.
Blue Balloon App This board shows how two of the interactive screen work. The first three are a continuation from the last board where the user inflates the balloon.
The user physically blows air onto the iPad microphone to trigger the balloon inflation animation.
The user can pull the characters away from one another to stretch the balloon. As they are pulled their steps will be animated.
The second three show another interactive section where they ‘stretch’ the balloon.
The the balloon grows the camera zooms out to allow room for the balloon to grow to a bigger scale.
The type at the top of the screen will also ‘stretch’ at the same speed as the main animation by getting more middle letters.
Rob Green OUGD301 Brief 2: Blue Balloon App Board 4
This interactive page’s text fades on like on previous screens.
In this instance the user need to physically rub the ipad on their head so the gyroscope can sense the movement.
On this screen the user has to move the balloon above the characters to start the animation
The balloon illustration fades in after the user swipes to the left to move the page forward. The body copy also fades out.
Once this is done the balloon has ‘static’ electricity and can be moved to the top of the screen.
The interaction in action.
Blue Balloon App This board shows two more interactive sections of the iPad book.
The relevant type stays visible and move to the top left like before.
For pages like this the user may need to doubletap and bring up the interface for help.
The hint will tell the user how to complete the interactive screen.
Because of the static electricity the balloon will ‘stick’ to the top of the screen like it would in real life on the ceiling.
The balloon takes off with the characters dangling below as the ground moves downwards off screen to show them flying upwards.
The first set shows a section where the user can make the balloon static by rubbing the iPad on their head and then stick it to the top of the screen.
The user then swipes downwards on the screen to move the character up further into the sky.
The second set shows how the user interacts with a screen to send the character flying into space, pulled upwards by the balloon.
Eventually they go into space in time with the scrolling action of the user.
Rob Green OUGD301 Brief 2: Blue Balloon App Board 5
On this final interactive screen the boy can be seen walking along with the balloon floating behind.
The user ‘grabs’ the back of the balloon by pressing and holding it down.
Blue Balloon App The top images on this board shows the final interactive screen I have proposed and how the user would use it.
The final two images show the app icon I have created using the book illustrations. The first is a scaled-up version of the icon and the second is the icon shown on an iPad homescreen.
As the boy continues walking the camera begins to zoom out and the balloon expands lengthways.
As the animation continues, the full spectrum of the rainbow is revealed in the balloon with the boy eventually stopping.
Rob Green OUGD301 Brief 2: Blue Balloon App Board 6