Research/ Graphic Style

When it came to deciding on the graphic style that I wanted to use, I wasn't overly sure as to how I wanted it to look. 

The first thing that I did was find out the age that the book is targeted for; to find this out I went on the publisher's (Walker) website. On having a look on the site, I found out that the age for the book is 4+.

http://www.walker.co.uk/Who-s-That-Banging-on-the-Ceiling-9781406347364.aspx

After finding this out, I then went on to have a look at existing books for the age group, and I did this on the WH Smith website.

http://www.whsmith.co.uk/dept/books-fiction-75759/home?filters=&hierarchyPath=/3/ TOP_NAVIGATION/wc_dept_books/wc_dept_books_childrens_01540/ wc_dept_books_fiction_75759&page=1&results=60&sort=asc_bestSellerRanking

From having a look through the website and at the covers which I have picked out, I found that there wasnʼt that many books which used block colour, but instead used shadows and had a lot of detail in the drawings. This got me thinking about how I wanted my images to look as one of my initial thoughts was that I wanted it block and bright, but having had a look at the drawings on these books Iʼm changing my mind with the style and thinking that I am going with using drop shadow and gradients; to give my images more detail.

Initial Storyboard

Flow Diagram

This is a simple version of my flow diagram which I've come up with for my book.

In my sketch book, I have a more detailed version of this which explains what each section does. Each page will be linked together with the user being able to navigate forward and back between each page. From the contents page the user can navigate to each orange room.

Script

SCRIPT : this is the script which I'll be using in my book. I have taken it straight from the book, however I have changed/ rearranged some of the text due to the fact I've removed some of the pages from the book. 

Page One

“What’s that clack, clack, clacking on the ceiling?” says Mrs Manky on the ground floor…

Page Two

“It sounds like a dinosaur dancing the fandango!”

Page Three

But that would be silly! “What’s that boing, boing, boinging?” says Mrs Fettle on the first floor…

Page Four

“It sounds like elephants on pogo sticks!”

Page Five

But that would be silly! “What’s that crash, boom, twanging?” says Mrs Dutz on the second floor…

Page Six

“It sounds like a rock and roll show!”

Page Seven

But that would be silly! “What’s that moo, cluck, quacking?” says Mr Plodge on the third floor…

Page Eight

“It sounds like a farmyard!”

Page Nine

But that would be silly! “What’s that ow, ouch, yowing?” says Mrs Haddaway on the fourth floor…

Page Ten

“It sounds like a fight!”

  

Page Eleven

But that would be silly! “What’s that argh-ee-argh-ee-arghing?” says Mr Chebble on the fifth floor…

Page Twelve

“It sounds like Tarzan of the Apes!”

Page Thirteen

But that would be silly! “What’s that huff, puff, puffing?” says Mrs Gadgee on the sixth floor…

Page Fourteen

“It sounds like the big bad wolf!”

Page Fifteen

But that would be silly! “What’s that zap, bleep, blooping?” says Mr Dunch on the seventh floor…

Page Sixteen

“It sounds like an alien invasion!”

Page Seventeen

But that would be silly! “Who’s that banging on the ceiling?” says Mrs Hacky-Mucky on the top floor…

Page Eighteen

“It sounds like King Kong tap-dancing!”

Page Nineteen

-

Page Twenty

-

Page Twenty-One

-

Page Twenty-Two

The End!

IOS

http://www.apple.com/uk/ios/what-is/

IOS Guidelines
This website, https://developer.apple.com/library/ios/documentation/userexperience/conceptual/mobilehig/ gives the guidelines for designing with IOS.

This is a screen shot which I have taken from the site. It compares the look in iOS 7 (left) to iOS 6 (right) in which there a notable differences. The look of the iOS 7 looks far cleaner and in some respects more professional. 

"iOS 7 embodies the following themes:

• Deference. The UI helps users understand and interact with the content, but never competes with it.
• Clarity. Text is legible at every size, icons are precise and lucid, adornments are subtle and appropriate, and a sharpened focus on functionality motivates the design.
• Depth. Visual layers and realistic motion impart vitality and heighten users’ delight and understanding."

The website is really detailed and breaks down the guidelines into different categories. 

Layout

This section describes the layout for iOS 7, the images gives the recommendation on the left and what isn't recommended on the right. The idea for the new layout is showing the more important buttons which you need to know and are likely to need to use.

Interactivity

In this section it shows mini videos of the gestures which are used on the new system.

https://developer.apple.com/library/ios/documentation/userexperience/conceptual/mobilehig/InteractivityInput.html#//apple_ref/doc/uid/TP40006556-CH55-SW1

This link takes you to this page.

Branding

This section focuses on the branding of the new iOS 7. Again it shows another recommended (left) and not recommended (right). The look of the recommended is cleaner, plain and there isn't any distractions on the page compared to the screen which isn't recommended.

Colour and Typography

This section shows the colour scheme and the typography for the iOS 7. 

It gives you points to what needs to be considered when picking the colours. The main point for the typography is the fact that it needs to legible. They also recommend that the font should be the same on one page rather than a load of different fonts, and looking at the images they put up it works much more effectively using the same font.

Graphics and Icons

In this section it looks at icons and graphics. In the first part it says that people generally judge an app's quality, purpose and reliability on the look/ design of the icon of the app, so the design of it is crucial and its important it is done correctly and effectively.

Integrating with iOS

Fonts

Thinking about fonts is going to be key, due to the audience of the books. 

http://www.fonts.com/content/learning/fyti/situational-typography/typography-for-children

I found this website useful in finding the right font for my book.

I decided to go with 'Chalkboard' for my font. The first font which I came into my mind was Comic Sans, which I didn't really want to use but knew that it would be well suited for children to read. I thought that Chalkboard was a good choice as it was similar to Comic Sans and would be clear and easy for children to read and understand.

http://www.google.co.uk/search?q=chalkboard+typography&source=lnms&tbm=isch&sa=X&ei=urydUueaLMrX7AaDkYDgDA&ved=0CAcQ_AUoAQ&biw=1180&bih=603#q=chalkboard+typeface&tbm=isch&facrc=_&imgdii=_&imgrc=ayxcb_LJfgW6jM%3A%3BAH2-Yq6qDeQcUM%3Bhttp%253A%252F%252Fwww.identifont.com%252Fsamples%252Fapple%252FChalkboard.gif%3Bhttp%253A%252F%252Fwww.identifont.com%252Fsimilar%253FG47%3B432%3B288

Interactivity Ideas

These are some interactivity ideas I've come up with for the story.

Block of Flats

Old Lady with Cats

Dinosaurs Dancing
reference to jurassic park with the water in footprint, tap on the maracas and they start playing, also if you tap on the dinosaur with the guitar he starts to play

Old Man Typing
if you tap on the typewriter you could play on it and type your own messages, maybe tap on the light to turn it on/ off, drag the rubbish to the bin

Elephants on Pogo Sticks
perhaps tap on the elephant they jump up and down or drag your finger up and down the screen to make them jump

Kids jumping on Bed
tap on the kids to make them jump or drag your finger so that they jump up and down

Pirates
reference to pirates of the caribbean 

Kids in Bath

Pigs
tap on them to make them make noises from the speech bubble

Family Eating

Giant Mice
tap on them and they make a noise, maybe tap on the cat and he disappears back in the hole

Old People - Lady with Cake Tray

Rock and Roll Band
if you tap on them maybe they start to play

Teenage Room
boy strumming on the racket

Farmyard
tap on each animal and they make their relevant noise

Old People in Lounge
tapping on the man and he make the farmyard noises

Boxing
if you tap on the boxers they'll throw a punch with one maybe missing, maybe tap on the ref and hearts will appear above him

Bathroom

Tarzan
maybe include a mini game, like tapping on all the cats you see

Man doing DIY


Wolf and 3 Pigs
perhaps tap on the wolf to make him blow or maybe tapping on him multiple times

Gym
maybe have the woman skipping - by making a circular shape on the screen with your finger

Aliens
aiming the guns and tapping on them to shoot, you could maybe buy extras weapons or more bullets

Family 
maybe tap on the controller or the TV and have a mini game within that

Top of the Building

My chosen story:

... Who's that banging on the ceiling?


I have decided to go with this book, which is a book that I had when I was younger. Originally I had aimed to go more towards 'Little Red Riding Hood', but having look through for existing interactive books, this one proved to be quite popular. With 'Who's that banging on the ceiling?' there is a lot more that I can do with it in terms of making it interactive and compatible with using it on the iPad.

"Welcome to the noisiest block of flats imaginable! What’s that banging, splashing, crashing on the ceiling? It sounds like elephants on pogo sticks … or a sea battle … an alien invasion. But that would be silly. Wouldn’t it? Colin McNaughton asks children to imagine what on earth is going on on different floors of a tower block. Move up the floors as you turn the pages – and get ready for a big surprise when you reach the top!"

http://www.walker.co.uk/Who-s-That-Banging-on-the-Ceiling-9781406347364.aspx

Initial Ideas

Short Stories
- Little Red Riding Hood - either the original version or Roald Dahl's version
- Gingerbread Man Story
- Hansel and Gretel
- Peter Pan
- Little Rabbit Foo Foo
- We're going on a Bear Hunt
- Cinderella
- 3 Little Pigs
- Goldilocks and the 3 Bears
- Who's that Banging on the Ceiling?

LITTLE RED RIDING:
Characters: Red, Granny, Huntsman, Wolf
Places: Forest, Red's House, Granny's House, maybe where the Wolf lives and also the Huntsman
Audio: Noises from the forest - birds, insects, breeze, rustling of leaves, *not sure about the characters having voices
Imagery: Maybe having the images look as though they are stuck on the scene - give them a white outline
Visual: For the colours have them so that they are block and bright/ Roald Dahl version - darker and bold, Typography - if its based on the original story the text will be clear and easy to read, if the story is based on Roald Dahl's version than the text will have a more mature look and feel, The text will be placed in some kind of content box which means it will stand out and will be clear and easy to read
Interactivity: Thinking of having it set out like a map - so you can see all of the different locations, it will take you on a route through the forest to Granny's house, maybe have different things happening when you touch around

*Notes*

Properties/ Features which you can have on an iPad:
- Camera
- Accelerometers
- GPS
- Augmented Reality
- Connectivity
- Wifi
- Bluetooth
- Live Interactivity
- Non Linear, Multiplayer Platform
- Audio, Video

Storyboards:
(in pages - outline mode) - best way to start is in text edit, with a series of statements, then move on to sketching

TITLE
First Main Heading                                          Audience
sub heading 1                                                     Age
sub heading 2                                                     Spending
Second Main Heading                                    Connectivity
- bullet point 1                                                    Internet
- bullet point 2                                                    Other Players
- bullet point 3                                                    Not Resolved
Third Main Heading                                        Moving Image

- When drawing a storyboard do each square on an individual bit of paper so you can move the squares around, change them and it means you don't mess any other squares up 
- You need to be objective when making decisions 
- Check with your peers and get their opinions

First Project: iPad Design

The Brief

Design an interactive story/narrative for the iPad. Take an existing short story or narrative and adapt it to be interactive. This can be aimed at any target audience and can be fictional or non-fictional. You must consider your target audience and evidence this in your research blogs. Prepare and visualise your story so that a developer can interpret your designs and do the necessary coding. This will include wire framing (flow diagram) and storyboarding your app, with details of events that need to take place on each page. Your storyboard could be hand drawn/ painted style initially but you must use a digital method to finally produce your storyboard. You will also need to produce a dynamic visualisation of your story in order to pitch and demonstrate how it will work, giving detailed examples of animation content. 

You will need to consider the usability and user experience involved in designing for the iPad, producing samples of user testing handouts/ questionnaires and you will also need to evidence research into the technical options and constraints that the development of such an app might encounter. What are the differences in designing for this medium, what are the IOS guidelines, how do you tackle various screen sizes and resolutions? Detailed research into the above must be in your research blogs before you begin your designs.