What: my website will look at how people hide their true identities with physical barriers which allows them to create another flawless character.  I’m also going to use the phrase “a person’s eyes are the windows to their soul” to further explore identity.

How: I’m going to use a photo album layout with interactive images.  The photo album is meant to represent the surface value of identity and how it is composed (i.e. everything looks perfect).  On each page, I’m going to put an image of a person wearing a masquerade mask (this relates back to the above phrase).  As the mask will be surrounding the person’s eyes, this will be the central part of the image.  This image will be clickable and when followed through, the viewer will be taken to a full screen page.  This page will show pieces that make up the true identity of the person and it will be in a scrapbook/collage style.  This setup is meant to reflect the reality of  identity in that the evolution and creation of it is not perfect.  I also want to show that, as much as we try to make unique identities, they aren’t because some pieces for one person’s identity can be the same for another’s.

Below are mockups of the album page and scrapbook page:

I know i mentioned before that I wanted to use a non-linear navigation, but now, with the new concept, I’m going to have to stick with a linear styles.  However, I’ll see if there’s a way that I can make it slightly non-linear, because then the navigation itself could fall into the ‘imperfect identity’ part of the concept.

The idea of a masquerade theme meets the identity concept because it can be viewed from two different perspectives.  First of all, there’s the obvious one of the person’s identity disappearing behind this small mask.  From this, I’d be looking at how much or how little you’d have to hide a person to lose their visual identity.

Then there’s the other side of this where the mask provides the person with a barrier that they can hide behind and become someone else.  From this angle, I’d be looking at the creation of a temporary identity and how the individual comes up with this identity.  This would be developed from the individual’s actual identity leading to the new identity being an extension of what the individual would normally allow people to see.

2. How did you come about your ideas for this?

For the second concept, I searched people in masquerade masks and noticed how their eyes became the focal point for the viewer.  This reminded me of the saying “the eye’s are the windows to a persons soul” and I thought that I could use idea this to create my website.

3. Realisation visually – how will you express the theme visually? Give examples either from your screen sample (prototype or first concept) and/or another site?

Visually, I’m thinking of expressing my theme focusing on just the eye area of the person.  I want to edit my images so it looks like the people are wearing the masks and this would be the only area with colour.  For the rest of the image, I want to black it out, but with a gradient so that it fades into the colour from the bottom up and then fades back to black from the top of the eye section to the top of the screen.  I would then put words or phrases relating to my concept and use these to link the pages.

I’ve started playing around with this idea in Photoshop, but because I can’t work Photoshop to save my life, it’s really, really, rough.  When I have something that is a bit more presentable and less cringe-worthy, I’ll post them up.

As of yet, I haven’t found any websites that reflect what I want do for my concept, but I’m still looking.  Again, I’ll post these when I find them.

4. Discuss your interface or the navigation style. Will it be mostly: a. linear? b. organic? c. a combination of these? d. some other style

Ideally, I’d prefer the navigation to be organic.  This way they viewer would be able to choose how they navigate through the website and the next page would be something unexpected.  I was thinking about using words relating to identity as the links.  I’ve had a look at some poems about identity and some of the lines were interesting so I thought I could uses these or I could make something up myself.  This idea could also tie into my concept of the mask wearer showing more of their identity with the current image being the “mask” and the next visual image being the revelation.

5. Did you chose storyboarding OR a flow chart? Why? Explain it…

Seeing as I’ve chosen an organic form for the navigation I think a flow chart would be better suited for me.  I’d be able to show how one page leads to multiple pages easier and it would also provide me with a better idea of how the pages would relate, flow and intertwine.

There were some lines that I really liked and I thought they showed the more playful side of my concept.  At the same time they also tie in with last post where I talked about the person showing more of their identity because they feel like they have a barrier that hides them.  Here are some of the lines that I liked:

‘Paper faces on parade’

‘Every face a different shade’

‘True is false, who is who?’

‘Burning glances, turning heads’

‘Run and hide, but a face will still pursue you’

I was thinking that I could incorporate some of these lines into the website or try to express them visually but also tie them in with my concept.

Still a bit unclear about how I’m going to put the website together and what elements I’m going to use throughout.  However, I’ve also started looking at the other side of the coin.  An individual wearing a mask can show more of their identity because they feel like they have a barrier between them and everyone else.  It’s like social networking.  Some people feel like they can be more of themselves and more open online because of the barrier provided by the computer.  Going back to my theme, even something as small as an eye mask can allow a person to show more of who they are.  I could show this idea simply by focusing on the facial expressions of people when they wear masks.  In particular, I could focus on the eyes as they often give away more about the individual (going on the “the eyes are the windows to a persons soul” saying).  Just a thought…

This was what I had started with…

And then this was the after…

Upon hitting ‘enter’ the viewer is moved into a space similar to the first page.  I say that it is similar because the same subdued colour scheme is carried through and the layout is still centralised, and this uniformity helps to tie the two pages together so the viewer knows that they are from the same website.  At this point, another soft colour is introduced to the scheme to give the viewer the idea that it is the main panel.

In addition to this, music is automatically loaded for the viewer to listen to while the rest of the webpage loads.  This engages another of the viewer’s senses other than sight, which also helps to prevent the viewer from sitting there bored or looking at another website while they wait.

I also liked the little animated loading diagram at the beginning that is used to show the viewer the progress of the website.  It is basically the company logo that starts loading from the bottom.  To me this suggests a reinforcement on the company name, particularly the ‘organic’ part.

When the webpage has finished loading, the same vector scrolls that are used to surround the logo emerge in an organic way on the main panel.  This is then followed by another smaller panel that appears on top of but to the left of the main one.  This smaller panel is the one where the navigation for the website appears and makes its entrance in a subtle bouncy way.  The same critter from the first page also appears here, but this time it is animated, and so it comes crawling out.  Already, there are many things happening to engage and capture the viewer’s attention and the Organic Design Studio has done this with success.

In addition to what I have described above, the site already has a distinct and easily recognisable purpose.  The high quality appearance of the website and the attention to detail lets the viewer know that this is a design company, and the labels of the navigation links – company, services, portfolio, contact and links to us – indicated that this website is being used a means of showing potential clients what the company can do and how to contact them is they want some work done by the Organic Design Studio.  This purpose is also constantly reinforced throughout the site no matter what link the viewer clicks.

As mentioned in my previous blog, the website for the Organic Design Studio is more subdued to some of the work it has done for other companies.  However, the Studio’s designers use a clean looking layout for their projects, and this shows that company uses a particular design style for itself as well as its clients.  The Studio also focuses on aesthetics for their projects as a means of achieving branding and corporate identity, and again this is something that they use for themselves as well as their clients.  The visuals on each of the websites, however, are to not the extent of being artistic and this could be viewed from a business perspective.  Each of the websites that are produced by the Organic Design Studio (including their own) are meant to focus on the company and what they have to offer.  If the Studio approached each of their projects from an artistic angle, the main purpose behind the website could be lost.

The Organic Design Studio Website reflects only in style to my final project.  In particular, the wavy vector lines that surround the logo relate to the masquerade ball theme that I have because they look like the intricate designs that can be found on some masquerade masks.  I also like how the website designers have used this particular section of the logo in the background of the main panel and this has given me the idea to use some of the mask designs as background material.

I’ve also given the first page to this theme more thought than the other.  To me, the first page needs to captivate the viewer, drawing them in and making them want to continue through the website.  So, for my first page, I was thinking of making it the invitation to the ball.  I’m envisioning a parchment scroll with a wax seal, that when clicked, opens up and the writing appears as if it is being written in front of the viewers’ eyes.  The writing would be in a really elegant font, calligraphic looking.  This part (the text being written by itself) is something that I have had a look into and seems really easy now that I know how to do it.  I’ve been putting it into practice and so far the only difficulty I’ve found is editing the line where, if someone was acutally writing it, would retrace over itself.  I don’t even know if that made sense but think of cursive writing.  The pen doesn’t leave the paper during a word so the writer has to retrace part of the letter to write the next one… that sounds a bit more clear.  Anyway, going back to my inital problem of recreating this writing in Flash… I think i just need to be really careful about how I do it and have A LOT of patience while doing it.  Practice, practice, practice!

The following two invites that I found on the web have some chracteristics that I would want to employ in my own design, just to give you an idea.

The above example is more about the font and I’m really liking the tail bits on the letters (probably a more elaborate serif style).  I wouldn’t quite go for this style as my font but I would try to aim for the old-world charm look.

The above example demonstrates the parchment scoll that I was talking about before.  If I could, I would want to create something a bit more detailed than this.  Not quite sure how though…