Final Project

And then I was finally finished with my major project. I’ve made a final structural model for the navigation on the website (see picture below). The whole concept behind this site (just to repeat myself), is a person who is tired of her identity, of how she must pretend to be somebody she is not. The real her is someone inside a role-playing game, were she can feel free to be herself, and not being judged or left out of any kind. Therefore, I have represented this person in black & white photos, to show the user how she feels and what her role in this website really is. All the features from the game (in this case I’ve used World of Warcraft as a starting point, because I used to play it myself) is colored, to show the “happiness” that exists in the other world, just waiting for the user to enter.

The user will have to navigate through the black and white photos from the main site (assuming the user will naturally start at the top), and can navigate either via these photos into the fantasy world, or enter each B&W photo separatly. To enter the fantasyworld, the user must enter the bottom button/site first, to then click their way through. The reason the user must go through all of these sites, is to create a narrative or a story, so the user will get the whole point before they enter the fantasyworld. Each of the B&W photos on the main site can be read separatly, because the user can understand what the point is without seeing all of these sites. From all the sites, the user may exit back to the main site, by clicking the small cross in the top right corner.

The frames I have used for the different sites is actually made from a map in World of Warcraft, just to get the whole theme fit together. I’m attaching a few examples from the site below.

The structural model, how to navigate (bad quality, click on the picture to enlarge)

The main site with B&W photos as links

Example of a site when you click on the B&W icons from the main site

After you have entered the fantasy world

Updated website structure

Now that I have worked out what I want for my website, I’ve also made a temporarily structure, so I know how the user can navigate through the site. The final pages haven’t been made yet, so that can be changed later on. Here we go.

This is a form of  an interactive narrative structure, were the user needs to perform an action to navigate and move forward. By “interactive” in this case, I mean that the user communicates with the system, in form pressing different links and watching the “actions” made in Flash. I know that a lot of writers has different definitions of this term (among others Lev Manovich), and that nobody really agrees on one particular definition. Therefore, I make my own definition according to what theme I’m talking about.

Working in flash

After making two animations in flash, I really need to come up with an idea of how I’m going to navigate through my site, and come up with a design which interests me. For now, I’ve made one animation were one picture is broken up into small squares, and then putted back together. My thought here was to be able to use some of these squares as links.

My second animation is just a tryout for my main page, were a light is shining at the beginning, and then a portal will be revealed. Then the whole background is getting bigger and bigger, so that the user is getting a feeling of entering the portal. If I’m going to use this for later, I’ll see.

I just came over this web site, which had two things I liked about it: The fact that the drawings and real pictures are mixed together, and that the navigation happens only on ONE background, were the focus is just moving around on the background. Something I could use maybe? http://www.juandavidperafan.com/Main.html

Working in Photoshop

While I’m thinking about how I will develop my site, I’ve been working in photoshop, to maybe get some inspirations. Here’s what I came up with:

Entering our world

A person who is adding a fictive character to his identity, while he’s loosing parts of himself in this character

Two face

Some inspirational photos

I just wanted to share some photos I came across which can inspire me during my work. I really liked one of the pictures, which is splitted up into minor squares, with all of the components still intact in each square. I could use this as a starting point for my major project, to have one picture as a basis, and then add components from either the real world or the fictive world.

Most of the photos I just added for fun because they were somehow artistic, to maybe expand my project to get new inspirations.

A good idea?

Illustration

“Walking into the fantasy world”

Inspiration

I’ve found a few web sites that’s quite nice, and is a good inspiration for wanting to create something new and artistic. Here are a few examples:

http://www.infinitcolours.com/

http://www.scottsigurdson.com/portfolio.html

http://www.skinsinteractive.com/

I like the way they uses flash as a basis for these web sites, were you get more smoother effects and several things happening at one time. A more entertaining way to present a site, maybe. So here’s the question: Do I use flash for my main project, or do I use CSS or tables, were I only have a basic knowledge?

Here’s a helpful tutorial site which teaches you the basics of CSS and html: www.w3schools.com

Inspiration

After a while searching the internet, I’ve found several inspirations for my work. The concept behind this picture I made, is an example of a person who’s getting bullied in their real life, and is  therefore driven to start a new life somewhere else, in this case, in a online computergame. Inside the game, the person can feel more safe from the surroundings.

This picture is just inspiration for my main project, because I must have a starting point to develop my project in the right direction.

Visual concept

So, I have a little idea of how I want my web site to look. Here I’ve added a simple suggestion for my main page. As I mentioned earlier, I wanted to split my page in two, were I get to show both the game character and the person who plays the game.

I might want to remove the real person from the main page, were I use different ways to reveal the human who is playing in real life. If one page leads in the direction of the game-character, the web site will stick to that character for some sites, were I later on will reveal some reflection of the real person. When the real person is revealed, I will move the sites back to the game character. In the end there will be some confusion of who’s real and who’s not. In that way, I get to combine the characters together, and mix up two different Identities (even though only one person is controlling both of the identities).

Another way of doing it, is to keep both of the character on the main page, were the characters will blend into each other throughout the site in the same way I described above.

Enjoy!

Were I am now, developing my project, I’m thinking about making all my pages similar to this style, were I’m making the “fantasy” world of games. The box in the middle will be changed to a different colour and design.

Inspiration for main page: http://webartndesign.wordpress.com/ <— another students’ website, main link “box” surrounded by masks (were I would like to use the box in the middle to enter my main site).

Here is updated type of structure I’m thinking for my final project:

This structure moves back and forth from the real person to the fictive character. The user can choose which one to follow, but eventually they will be lead in to path which I can control.

Concept

I’ve been thinking about how I want the navigation to work on my web site. For the time being, I’ve thought about splitting the site up in two, somehow were the user gets to identify themselves with:

1 – The character in the role playing game

2 – The person who are playing the game

Now I need to work on my layout. I want a main page, were the user gets an impression of what to expect when they navigate through the site. Then I want the user to explore the sites, and get the feeling of being a character in the role playing game. Then I would somehow like the person that is really playing the game to appear, but I haven’t yet figured out how. First of all, I’m thinking about making my site map in a hierarchical way, were either the user ends up with seeing the person who plays the game from the computers point of view (the box in the bottom of the picture), or I’m going to include the player in all or some of the sites. Here’s a simple site map example of what I’m thinking about:

I still have a lot to work out visually, but I will come up with something to look at shortly:)