Wednesday, 2 November 2011

Research on Wireframes and Storyboards.

Wireframes are used so to mark out when things like images or text will be placed with the application. They are a very simplistic guide, which only uses envelope style boxes, to indicate where images or videos will go, with no actual graphics on them, as well as being very minimalistic they also will not have much text on them, because that is what the Storyboards are for.

This is a website that we have been given to demonstrate what a wireframe will look like.
http://www.slideshare.net/mobilemags/icake-wireframes




With this wireframe, each of the buttons and images/videos are boxes with a cross through them, indicating that there is something going to be there.
This is helpful for me to understand what a wireframe should look like and what it is used for.

After doing the wireframe and then getting it signed off, you then begin to design and make your storyboards.
As stroyboard for an iPad application is not like a normal storyboard, because with an iPad app storyboard you have to design/draw every single page, as well as pages for the interactivity and added extras, so for example if you have a very short story you make have to do at leats 30 storyboards to cover the graphics, interactivity, and multiple outcomes if you had them.
We have been advised to do a flow diagram first if we do have multiple outcomes because then we will have a clear and decisive angle to come from for our storyboards.

After doing the storyboards we then do a dramatic visualisation. This is where we take our storyboard and make everything that we want interactive, and demonstrate how the application will work. There are many different ways of being able to do this, one is to make the whole thing interactive for the user by taking it into Keynote or Flash, and then using hotspots making all of the buttons work and have all of the interactive parts working. Or we can make a film/animation in After Effects, the only down side is that the user will not get to experience the app for themselves, however they will be able to visually see what all of the interactive points are and how everything will work.

http://speckyboy.com/2011/04/26/gui-stencils-wireframing-kits-and-sketching-templates-for-ipad-app-designers/


This is a video demonstrating someone having done a dramatic visualisation in Keynote, and this is how it works after exporting it. He explains also that you have put it onto an iPad to then get other people to see if they can work the app.