Sam Scaife - Digital Media Design BA

Just a quick post to show the wireframes which I've drawn up from my sketch book. I will print these off then annotate them properly in my sketch book.
In order they are, Title Screen, Setting menu, Chapter/page menu, and a major scene. I will also have a minor scene but as I will have several variations of them I will just show it drawn in my sketchbook (the story screens in the previous story boards where all minor scenes).

I've been working on my story boards and this is how far I though I current am with them (in presentation format).
note this is just the artwork and text I have not placed any of my ui on them yet.

Currently I think that the 4th silde is lacking quite a lot so I will rebuild that one.

I've spent the morning sketching and trying out a few different styles to develop.

I'm going to story board for a style very much like the final image. It feels a little lacking in detail but because the elements are so basic I will be able to build up from this as a base.

One of the main features of my app is the visuals. I want to give me app a visual usp and I think that the Jekyll/Hyde character has inspired me to use either 2 styles to represent each. this would work by having the whole look change depending on which character the section of the story involved. Another way this could be done is by using inverting the colours e.g. black on white for jekyll and white on black for hyde.

I have already posted links to 2 videos which has inspired these where Una pieza más - Marian Ruzzi y Sr. Amable and The Thomas Beale Cipher. Below are other things which have been inspiring my thoughts on the visual style.



the lines in this piece are fantastic they have a really fragile feel. I also really like the 3D room scenes mixed with animation of just characters this is similar to what I am going to try and do with my major and minor scenes (I've not yet explained this on my blog but I will). Black and white with a spot colour works really nicely as well the spot colour really brings things out of the frame



The really simplified constructionist characters which are in this piece have a really powerful look. the weather look of the style is something that I am keep to transfer over to my final piece.



this animation makes great use of black and white. There are some really good scenes where things are drawn to explain a journy and not just show a single scene. I also really like how the animation transitions between locations playing with scale and angle I think this is something which would work really nicely on the I pad and enhance the simple act of turning a page.



I really like the potential there is to use collage in this project and think that some of the techniques used here could be transferd to my story to give scenes another level of depth by carefully selecting what images/videos to display with the collage. this technique is also used in the Thomas beale cipher.



I really like the finish and character design in Eran Hilleli's work. the simple look is something which I might be able to used to allow me to create strong characters which would be esaily animated and would compress well to save disk space on the ipad. It would lose some of its strength but it could be changed to 2D characters and positioned in a pseudo 3D environment.

As I stated in this post an application definition statement will allow me to stay focused on the core of what it is I am going to produce and not be distracted by other ideas. Here is the statement I've written.

Jekyll & Hyde is a visually stunning and immersive retelling of The Strange case of Dr Jekyll and Mr Hyde by Robert Louis Stevenson. Aimed at adults who appreciate creative films and animation.

you'll notice that I have called the app 'Jekyll & Hyde' this is a working title based on the 14 character limit of titles to not be shrunk under the applications icons.

Here is an interesting video where designers talk about why they believe games are special.


I have been reading around this subject and I'll write up at a later date on my blog some of the academic thinking around video game narrative.

I just watched this video and it has inspired me of another potential visual style I could use. It has also allowed me to think of more ways which I could adapt literature into interactive narrative. This would be by showing key scenes with a large amount of motioning in them but still have it as a stationary image (as if you where seeing something in freeze frame). The image can then transition turn into a basic illustration with minor animation while more of the story is narrated.

I'm currently testing out story ideas for Jekyll & Hyde but am getting a bit stuck on ways to implement them. One of the thoughts I had was that I can adapt the novel into a combination of comic and animation. Earlier in the project Kerry Turner from Little Loud came in to talk to us about designing and developing for IPad, she talked us through some of the recent project which she has worked on and one of them is an enhanced comic for channel 4 called The Thrill Electric.

I'm going to play through this comic and see if there is anything I can pick up to help me convert Jekyll & Hyde into a usable story.

This has an interesting story line which as I played through the game I became more and more interested in the characters. I think the media of comic really requires a prolonged exposure to the characters in order for you to develop an emotional relationship to them this could be an issue with my app if I choose not to have an over arching narrative which connects all the different parts.

key features are that they pull the comic out into a 3D environment to make it a little more visually interesting. Extra information and interactions are shown to be present by the sound of a tram bell being pulled, you can then click on a box to find out more information.

After deciding not to go with horror as a genera I wrote down several potential directions and events that could happen which I released could be applied to one of my earlier idea of designing a story based around the character Dr Jekyll and his alter ego Mr Hyde.

I think this would be a really interesting character to develop and has the potential to work with a non linear narrative. There are many different stylistic ideas I can think of to represent this characters but I need to get the story in place first.

Resist the temptation to add features that are not directly related to the main task. Instead, explore ways to allow people to see more and interact more.

This is another warning against function creep. The second line in this presents an interesting way of looking at adding more immersive features to an interactive story.

Closely associate visual transitions with the content that’s changing. Instead of swapping in a whole new screen when some embedded information changes, try to update only the areas of the UI that need it. As a general rule, transition individual views and objects, not the screen. In most cases, flipping the entire screen is not recommended.

This is something I should consider while wire framing, there will be a load of different ways I can present each of the elements which need to be on screen and considering the consistency between them will bring more of a linear unity to the story.

you also want to prevent people from feeling that they must visit many different screens to find what they want.

This line is from a section which is talking about not over doing the amount of information on each screen. It highlights an issue which could be encounter when designing a story with none linear narratives or functionality.

Like how I need to be aware of the user always being able to stop at any times I need to consider that they may not want to use the app with there sound on or they might want to turn certain elements of it down. This potential loses a very important part of the tools I have available to tell my story. There are solutions to this but I need to think very carefully about them before I make any decisions.

As I stated before there are other lessons which I can learn from this document once I am further along with my design, so I will revisit it later in the project.

A really helpful tool in to help me design this app is the iOS Human Interface Guidelines. This documents "describes the guidelines and principles that help you design a superlative user interface and user experience for your iOS app.". 

This project is all about combining multiple elements to create a single piece so before I have my story sorted I have decided to have a quick run through of the guidelines and see if there are any key areas that I need be aware of during this stage of the development. There are areas covered in the document such as screen resolution which I will need to come back to once I start designing the interactions.

Create an application definition statement 

An application definition statement is a concise, concrete declaration of an app’s main purpose and its intended audience.
Create an application definition statement early in your development effort to help you turn an idea and a list of features into a coherent product that people want to own. Throughout development, use the definition statement to decide if potential features and behaviors make sense. Take the following steps to create a solid application definition statement.

I have head this strategies talked about in reference to several different areas and it is a really useful to practice this. Once I have decided on exactly what my story will contain will I will write one of these. This will help me to prevent issues such as function creep as I can refer back to the statement like it suggests and described how relevant potential art styles, interaction, etc. are to the overall goal of the app.

The following section is not very relevant to the stage I'm currently at but I think it will be really important to remember this as I develop the design of my app.

Be internally consistent. The more custom your UI is, the more important it is for the appearance and behavior of your custom elements to be consistent within your app. If users take the time to learn how to use the unfamiliar controls you create, they expect to be able to rely on that knowledge throughout your app.

The following guideline is quite interesting to consider when thinking about wheather to have a linear or non linear experience

Give People a Logical Path to Follow
Make the path through the information you present logical and easy for users to predict. In addition, be sure to provide markers, such as back buttons, that users can use to find out where they are and how to retrace their steps.
In most cases, give users only one path to a screen. If a screen needs to be accessible in different circumstances, consider using a modal view that can appear in different contexts.

This could be one way of empowering an interactive story with the same feeling of a narrative story. Andrew Cameron talks about this difference between interactivity and narrative as being concerned with perspective

The shift from narrative representation to interactive representation entails an aspectual shift like that from perfective to imperfective, from outside to inside the time of the situation being described.  

If I develop my idea considering this it will help me keep my story as that and not a game, alongside having a straight path through the piece it will help maintain the familiarities of narrative.

I had not really though about the implications of the users Always Be [able] to Stop. Thinking quickly about this I believe that you can avoid the initial problem by making the story really immersive. However if I have animated sequences or key bits of interactivity I need to allow my users to be able to go back in case they where unable to pay attention to that time or closed the program during one of those sections.

I've been thinking up more ideas in my sketch book as I believe there to be several limitations with the idea of horror which I do not want to have to address in such a short project. The idea is still there I've just being doing some thinking to try and push through my issues or generate potential new ideas.

One of my issues with the horror is having to source or write a storie which will be able to support the interaction. If i'm doing something which would have a basic plot I can avoid some of these problems by layering a universe over a it.

I've been talking about subverting archetypal stories with various methods, and I wanted to put a list up here of some of the archetypes. this list I found on isegoria shows the basic areas I was thinking about

1. Cinderella – Unrecognised virtue at last recognised. It’s the same story as the Tortoise and the Hare. Cinderella doesn’t have to be a girl, nor does it even have to be a love story. What is essential is that the good is despised, but is recognised in the end, something that we all want to believe.


2. Achilles – The Fatal Flaw, that is the groundwork for practically all classical tragedy, although it can be made comedy too, as in the old standard Aldwych farce. Lennox Robinson’s The Whiteheaded Boy is the Fatal Flaw In reverse.


3. Faust- The Debt that Must be Paid, the fate that catches up with all of us sooner or later. This is found in all its purity as the chase in O’Neill’s The Emperor Jones. And in a completely different mood, what else is the Cherry Orchard?


4. Tristan – that standard triangular plot of two women and one man, or two men and one woman. The Constant Nymph, or almost any French farce.


5. Circe – The Spider and the Fly. Othello. The Barretts of Wimpole Street, if you want to change the sex. And if you don’t believe me about Othello (the real plot of which is not the triangle and only incidentally jealousy) try casting it with a good Desdemona but a poor Iago.


6. Romeo and Juliet – Boy meets Girl, Boy loses Girl, Boy either finds or does not find Girl: it doesn’t matter which.


7. Orpheus – The Gift taken Away. This may take two forms: either the tragedy of the loss itself, as in Juno and the Paycock, or it may be about the search that follows the loss, as in Jason and the Golden Fleece.


8. The Hero Who Cannot Be Kept Down. The best example of this is that splendid play Harvey, made into a film with James Stewart.

I have not linked any images or pictures so far for this project so I thought I would start with just a quick post of a potential style idea that I have been really inspired by.
The Thomas Beale Cipher
This has an incredible style with all its textures and interesting uses of positive and negative space. It is also semi interactive having 16 hidden messages in the piece.

If you look at the brief which I posted in this post you can see that having analysis and academic theory within our blogs is an important part of the project. I am going to start adding in more of this style of post alongside ones discussing visual research and project development.

In order to be able to start doing this I have picked up several books on a variety of topics which I think will help me in this project. Here are the books I've gotten out.

• Dalwood, Dexter et al. (2009) Storytime
• Hartas, Leo (2005) The art of game characters
• Jenisch, Josh (2008) The art of the video game
• Krugs, Steve (2006) Don't make me think: a common sense approach to web usability. 2nd edition.
• McQuillan, Martin (2000) The narrative readerO'Neill, Shaleph (2008) Interactive media: the semiotics of embodied interaction

This is just a starting point covering the points which I think will come up in this project; narative, video game design, and interaction. My hope is to find conmen trends in these book and identify potential areas of interest for design.

The Steve Krugs book is in the reading list for this brief along with several web links which I will make sure to look at.

As I mentioned in the last post I've had this brief for 1 week now so I've started coming up with ideas for what I could potential create.

The main idea I currently have is to create a horror piece. I think this genre is really suited to interactivity and the immersion provided by the ipad. while jotting down idea I realised that something similar to what I had in mind had already been created, Hotel 626.

I am yet to play Hotel 626 as currently I have no internet access and the game is restricted by the time of day. but I intend to play through it and see how it creates its story and what features could be used on the ipad. this description from cyberentries sums up the project; 

In honor of Doritos bringing back two intense flavors from the dead, we created an intensely scary website. You're trapped in a hotel and have to complete challenges--like singing a demon baby to sleep--to get out. Hotel 626 uses several groundbreaking techniques to dial up the experience. Your webcam sneaks a picture of you and shows it to you later--inside the lair of a madman. Your one salvation is a phone call on your actual cell phone with directions on how to get out. To make it scarier, you have to play in the dark. Hotel 626 is only open from 6pm to 6am.

Using the camera without the user knowing and restricting time are two very powerful story telling tools which help to build an atmosphere around the game. I was thinking about how it would be possible to play with time before I came across this as I believe that by taking real world variables and integrating them into the story you will get greater immersion and the boundary between the real and virtual will become blurred.

One issue which I have noticed from writing up my notes is that I have overlook a section of the brief where it states Take an existing short story. It was explained to us that this is in the brief so we do not get too distracted with character and story design and focus on user experience and user interface design. However I think that a large part of the UX will be from the story, if you want to create a story for an older target audience you will need to carefully integrate the interactive elements with the narrative.

I wrote down a really boiled down version of what I think this project is all about in my sketch book, I'm going to put it here as well so that I can refer back to it.
It's all about brining together multiple elements

Our second project was set to us last week though I have been in the process of moving house and have not been able to do much research into the project.

Brief

Design an interactive story for the ipad. Take an existing short story 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, or you could choose to use a digital method to 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. You need to consider why your chosen story will benefit from being interactive; this should be researched and referenced. You will need to consider the usability and user experience involved in designing for ipad, producing samples of user testing handouts/questionnaires, and, you will also need to evidence research into the technical options and constraints that development of such an app might encounter.  

I have highlighted the key points in bold and reviewing these it makes me think that I need more of an academic approach to my design process by providing evidence for my design decisions.

We only have 4 weeks to work on this project. We do not have to code anything which cuts out alot of time but we still have a very fast turn around for this project & many of the things we need to do will require preliminary work.

Here is the final piece I submitted for Aquapax.

You can also view this video on youtube here http://www.youtube.com/watch?v=LO3t_Rf8kfE