W3b Art n D3s1gn Blog

I was doing some image research for the major project and came across these lyrics from The Phantom of the Opera masquerade scene:

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.

Found this pic on Flickr and thought it tied in nicely with my masquerade theme…

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…

Today’s exercise was aimed at us starting to put our concepts into visual form using Photoshop (which I currently suck at).  We spent about half an hour putting something together and then someone else put their own touches on it in the next session.

This was what I had started with…

And then this was the after…

To me, the Organic Design Studio’s website falls more into the category of design because it appears that every placement has a purpose.  From first glance the simplicity of the design drew me in.  I also think this may have been enhanced by the wavy vector scrolls that surround the company logo.  To my eye, they seem to lead into the logo rather than away from it and works really well with regards to trying and get the viewer’s attention to the centre.  The next thing I noticed was the way that little critter sitting on the top of the logo appears to be pointing downwards.  This is further emphasised by the central red banner with its edges also pointing in the same direction.  From these few visual leads, the viewer is drawn to looking downwards where they find the ‘enter’ link that allows them to continue through to the main body of the website.

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’m liking this idea more than the other one because I really think that I can use the idea of something small hidding a true identity and getting lost in the world of another.  Not physically lost, but losing oneself and taking on another persona.  I’m still not 100% sure how i’d do this, but I have some blurry visions to work with for now.

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…

I thought i’d share these sites that I found while browsing.  They’re both designed by the same company, but are two very different results (that probably has something to do with the fact that they are two very different products).  Common feature between them: bouncing navigation.

http://www.satoshinyc.com/

http://www.pinknoise.com/flash.html - Warning!  This one is a little bit of an eye sore at first.

This is an idea that came to me only recently.  When I heard the term ‘identity’ I constantly thought of it with regards to people.  But then after looking at the definition that I had put up in the ‘What is identity?’ post, I started to think a little outside the box.  Identity can also relate to objects.  Things have characteristics which we identify them by, and the most earliest form of this recognition starts when we’re toddlers beginning to learn about the world.  Kids use associations and chracteristics to identify things when they are learning or they create their own. 

If I were to use this idea for the final project, I would find objects that toddlers/pre-schoolers start off their learning with and create pages that use only the associations that the kids would give them.

When I first heard the description for the final project, my mind jumped to hidden identity and then from there to a masqurade ball.  I think the main reason for this was that at a masqurade ball, guests wear masks, and whether its a full face mask or just one to adorn the eyes, the individual’s true identity disappears and is taken over by something that resembles high class, old fashion and elegance. 

I haven’t really gotten much further than this though…

What is ‘Identity’?

The major assignment requires us to explore and interpret the concept of identity and display this visually through a website.  So what is “identity”?  To begin my research, as any Gen-Y-er does, I plugged the word into Google.  And as per usual, Prof. Google returned a whole bunch of hits, the first of which was a movie titled ‘Identity’.  The second (Wikipedia) seemed more appealing for my purposes so I decided to see what it had to say.  Upon this navigation, I instantly discovered that identity relates to more than what I initially thought.  Music, literature, social science, philosophy and maths (ugh) were just a few listed.  However, I think the most common association these days is with computing, more specifically online identity.  Through this form every individual who has access to the Internet can become whoever they want to be.  By a definition, identity is ‘the collective aspect of the set of characteristics by which a thing is definitively recognizable or known’.  So going by this, online identity would logically be part of this definition because the person behind it would be creating characteristics to make their online identity unique.  But it is not real.  Or is it?  This is what we don’t know. 

How about identity in the real world?  Physical characteristics that other people see help them create an identity for that person or object.  Is this a real identity?  Is it false?  Maybe.  Again, one can’t really and completely know.  Does the individual (or object) even know their own identity?  Do they know every little detail, every characteristic that makes them who they are?  And is it ever certain because identity can change.  Identity can be changed.  Given time, identity will evolve, but a past identity can also contribute to a present one.  If this is the case, then what makes an identity?

http://www.oil-images.com/

This is an online image library that has been created by the Organic Design Studio.  It has interesting little visuals that, despite their size, still get noticed.  This would be due to the limited colour palette used and the visuals that move are a different colour, making them stand out more.  I would consider this website to be on the border of art and design because as visually appealing as it is, everything has a function and purpose, hence the design aspect.  My favourite thing about this website is when you navigate onto the products page, the way to select a category is very different to what I’m used to.  Instead of clicking the category, there’s a pair of red cherries that the user has to place over the category they want to view.  So cute and totally clever!