Wireframes

This is my wireframe and flow diagram for my story. As each page of my story is going to have a similar layout, I have made a wireframe for one of my pages, as well as the menus and title screen.

The flow diagram shows the order in which the pages go in the story, which is for the most part linear. There is a branched path at the beginning of the story where the user can explore, and can go back to the main story at any point.

Looking at Tim Burton's Art

I have looked at Tim Burton's art as inspiration for my own drawings, as he uses a lot of dark colours and a unique, creepy-like art style would fit in well with the story I am going to tell.

Target Audience for my App

As I am changing up the Wizard of Oz story to be about the villain, I feel that the target audience's age should be raised slightly to cater to being about the darker side of the story. As there are already existing apps for the Wizard of Oz as an ebook for young children, I wanted to make my book for slightly older children or young adolescents, who would still fin entertainment in an interactive book but the story would be more engaging for the older audience.
Aside from changing the story, the art style of the book should be darker as the main character is the villain.  I was thinking about looking at artists such as Tim Burton, as he has worked on many films that are aimed at older children with a dark art style.

Changing the Wizard of Oz Story

To make my iPad app be more of a unique story, rather than just a copy, I have chosen to use the Wizard of Oz story, but change it from being about Dorothy and friends to being about the Wicked Witch of the West.

After doing so research behind the character, there are several other pieces of media about the world of Oz that I could tie into my story. One of these being a book called "Wicked: The Life and Times of the Wicked Witch of the West".

"The novel is a political, social, and ethical commentary on the nature of good and evil and takes place in The Land of Oz, in the years leading to Dorothy's arrival. The story centers on Elphaba, the misunderstood green-skinned girl who grows up to become the notorious Wicked Witch of the West. Gregory Maguire fashioned the name of Elphaba from the initials of Lyman Frank Baum, L-F-B. The story is divided into five different sections based on the plot location. There is also a prologue where Elphaba is spying on Dorothy and her friends, hearing their gossip about her."

http://en.wikipedia.org/wiki/Wicked:_The_Life_and_Times_of_the_Wicked_Witch_of_the_West

This story is more of an alternate universe, but it fleshes out the character of the Witch of the West more, and I could use this as a part of my story, like a part that branches off and the reader can look through her past to see what really made her so bad in the first place.

In the film, the Witch of the East is killed, which is the Witch of the West's sister. This could be used as a major plot point for sympathising with the Witch, and the reader could see why the Witch wanted revenge on Dorothy in the first place.

iOS Guidelines

On Apple's website, there is a list of guidelines that designers should abide to when creating apps for iOS7. It includes things such as app anatomy, layout, navigation, colour and typography, etc.

"Almost all iOS apps use at least some of the UI components defined by the UIKit framework. Knowing the names, roles, and capabilities of these basic components helps you make informed decisions as you design the UI of your app."

"The UI elements provided by UIKit fall into four broad categories:

• Bars. Bars contain contextual information that tell users where they are and controls that help users navigate or initiate actions.
• Content views. Content views contain app-specific content and can enable behaviors such as scrolling, insertion, deletion, and rearrangement of items.
• Controls. Controls perform actions or display information.
• Temporary views. Temporary views appear briefly to give users important information or additional choices and functionality."
  
  
  Here is an example of the anatomy of an app:
   
   
  The phone on the left has the recommended  navigation for an app, whilst the one on the right is not recommended. Apps shouldn't have cluttered navigation - it should be clear with only a few buttons for the user to click so it is not as confusing. Only put the buttons that are absolutely necessary.

Wizard of Oz - Story

As there are many versions of the Wizard of Oz story, I have chose to make an adaptation of the the 1939 movie, as it is the most well known versions of the story and would be the simplest to adapt.
The main story focuses on Dorothy and her adventures with the Scarecrow, Tin Man and the Cowardly Lion, and how the Wicked Witch of the West wanted to kill Dorothy. Dorothy is trying to get back home after her house was caught up in a cyclone which transported her to Oz.
She is told by the Good Witch of the North to visit the Wizard of Oz so she can get home. However, the Wizard refuses to help her unless she kills the Wicked Witch of the West.

Designing for iOS

When creating an app for iOS, you need to know about the platform you are working with, how it can work best on the platform, and the technical limitations of it. With the iPad and iOS, there are certain guidelines that must be adhered to when designing for it.

"Retina - Most recent iPhones and iPads are fitted with Retina screens, a high resolution screen intended to make pixels invisible. The Retina resolution of a device is an exact doubling of the previous resolution. A single pixel in a non-retina iOS device is taken up by four pixels in the retina version. This makes text crisper and allows for significantly more subtle detail. There are many complexities to designing for retina screens, so this is an important area to read up on."

"Pixels - A pixel (px) is the smallest unit of measurement on a screen. It represents a minuscule physical square that is part of the display. If you look very closely at a screen, you'll be able to see them (and the gaps between).

It is not possible to have a line that is smaller than "1px" in width. For example a 0.4px line can't possibly exist, instead graphics software interprets this as a fainter 1px line. This result is often considered ugly."

"Points - We use points (pt) as a resolution independent measure. A point can be represented by many pixels, normally one or two in a single dimension (high or wide). For example all iPads have the same resolution in points and all iPhones have the same width in points.

Over time you'll learn to think in points rather than pixels. But it's important to remember that each point can be made of many pixels and so there is room for extra detail."
http://taybenlor.com/2013/05/21/designing-for-ios.html

These are various things that should be kept in mind while designing for iOS. Retina screens are not in all iOS products, so users of both should be considered when designing for iOS.

Device	Retina?	Point Resolution (pt)	Pixel Resolution (px)
iPhone < 3GS		320 x 480	320 x 480
iPhone 4, 4S	eye	320 x 480	640 x 960
iPhone 5	eye	320 x 568	640 x 1136
iPad 1, 2 & Mini		768 x 1024	768 x 1024
iPad 3, 4	eye	768 x 1024	1536 x 2048

First Ideas

I initially wanted to do something with a pixel art style as I enjoy working in that medium, however I could not think of any story ideas to go with it.
I have also thought about a fantasy world idea, so I could make a story based off of Alice in Wonderland or the Wizard of Oz.
It could be the story of the Wizard of Oz but in a video game universe, so it could be made interactive by making the story less linear.

iPad App Project - Brief

For this project, we are creating an app for iPad, which involves telling a story as well as being interactive.

"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 visualize 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 visualization of your story in order to pitch and demonstrate how it will work, giving detailed examples of animated 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."