Period 11 - Minor Interactive Narration

I chose to do the minor Interactive Narration because I am interested in implementing interactivity in my own animations. Also the combination of working together with other Illustrators, Graphic Artists is something I ever wanted to do. This interdisciplinair experience is also very useful after my study. Later I want to work together with different people who have their own expertise in the field of design.

End result book trailer 'Alles wat er was'

Summary of the book

In 'Alles wat er was' from Hanna Bervoets eight people get together for a shooting of a science project at a school on a Sunday morning. But the film shooting will never be recorded. Because suddenly there is a loud bang. By order of the authorities the windows, doors and curtains have to be closed. And they remain close. Days, weeks go by. Through the eyes of TV editor Merel we see how the group is trying to survive in their new world. A new world of darkness and isolation. Eating ten grains of rice per day and sleeping on a flat gym matting. As food supplies dwindle further, the tension between the school residents rises. If all that was is gone, what is the value of love, loyalty and friendship?

After dividing the class in smaller groups and receiving the title and author of the book from our teachers (our fictitious clients during the project) we made a brainstorm. We broke down the story and characters from the book. After one week of sketching and brainstorming our group decided to divide our group into two teams. Me and Iris have the same interests in design and storytelling so this was a great opportunity to work together.

This is the link of a blog with the process we kept on during the period (in Dutch): http://alleswaterwas.tumblr.com

After that we made a new brainstorm about what we are searching for to show and tell with our book trailer. These are the main subjects:
- Shadow puppets
- Different rooms
- Curiosity
- To watch and to be watched
- Involve the viewer with the story
- Interaction had to be useful
- Imagination must speak for itself
- Claustrofobia; spaces become smaller
- Playing with time and space

We started up a Pinterest page and made moodboards and drawings: http://www.pinterest.com/raymonwittenber/alles-wat-er-was/

Moodboards

These are a few images of the moodboard we made to find the mood we wanted to convey to the viewer.

Drawings

And some of our drawings

Iris

Me

Storyboard 1.0

Moving storyboard 2.0

The images and storyline in our first storyboard were a bit simple. The idea of going to the next room in combination with the goal of the viewer weren't clear. That's why we simplified the design of the rooms and

Analog material test

Cut-out word test

Moving storyboard 3.0

We liked the analog feeling by using stop motion technique, but we couldn't realise it in time so we chose to make it in digital cut-out.
Moving storyboarrd 2.0 was still not what we were searching for in our story. There was no immersion. So the viewer would be bored after a few seconds. We decided to overview and rethink our storyline and made a new moving storyboard. We used sentences from the book. When you go further in time everything is getting weirder and darker. That is what we wanted to show in the trailer. We liked the idea of using the impact of the room on the viewer, but we missed a presence in the space. So we thought of using a character in all the rooms. Iris drawed our imagination of the main character Merel and made her look more thin every time the story evolves and the viewer goes further in the (interactive) trailer.

The only thing we were not satisfied about was the typographic style and the positions of Merel in every room. So Iris made some more illustrations of poses and styles while I made some animation  tests.

Iris drawings of typography and characters

Room 1: "We still have enough food for 9 weeks"

 Room 2: "There is a chance the radiator is going to fail"

Room 3: "Do I look weird if I am going to sleep in a classroom by myself?"

 Room 4: "Perhaps we are already been found by that time"

Room 5

Animation tests

Room shrinking test

Rough animation room 1 and 2

 Interactivity

We wanted to make a limited but simple and effective web browser version of our book trailer. Iris made this overview of the possible use of interactivity in our design. This was a first attempt.

After some research we found an interesting interactive page http://matthew.wagerfield.com/parallax/
We used this 3D parallax scrolling website as an inspiration to put some interactivity in our trailer.

A demonstration of our simplified explanation of using interactivity in our book trailer.

Since Iris and I are noobs in making scripted pages in HTML I asked a very talented friend of mine Rodey Seijkens if he could help us out. And so he did. We are very thankful for his expertise!

Our interactive book trailer: http://prototype.rodey.nl/alleswaterwas