wtchang_Project_3


 * Here's my final site:[| TRANSIENCE]**

Here's my prototype site: [|TA-DAH!] There are problems with the scrolling, and the links currently go to wikipedia pages :P

For my project, I decided on using the word **transient/transience.**

__According to the Oxford American Dictionary:__ transient |ˈtran sh ənt; - zh ənt; -zēənt| adjective • staying or working in a place for only a short time : the transient nature of the labor force in catering. noun 1 a person who is staying or working in a place for only a short time. 2 **a momentary variation in current, voltage, or frequency.** DERIVATIVES transience noun transiency noun transiently adverb ORIGIN late 16th cent.: from Latin transient- ‘going across,’ from the verb transire, from trans- ‘across’ + ire ‘go.’
 * lasting only for a short time; impermanent** : a transient cold spell. See note at temporary.

From these definitions, I decided to work on building a site that worked on depicting the passage of time; a nostalgic experience for the user. I wanted it to be evocative of the kind of feeling similar to this Japanese concept of [|mono no aware.]

I wanted to express my word from a first-person perspective, signifying how the transience of life reminds us all to continue searching for what exists beyond tangible form. For this reason, I decided to make the site entirely with my own photos to make it more personal and representative of my experiences.

Here are my moodboards:





Here are some of my sketches:









Here are some of my photos:



These are some of my ideation wireframes:





After critique



After critique, I decided to focus more on exploring the use of css z-index and what it was capable of. As a result, I drew inspiration from [|Nike's Better World] website. I found a tutorial online which I modified for my project [|here] which I used to help get the different speeds and layered effect.

Here's a screenshot of how I modified my previous idea with regards to my new approach:













Processing sketch 1 - Rose

Processing sketch 2 - Light







Processing sketch 3 - Pipe

The idea behind the main interaction within the site is that as the user scrolls down, he or she watches as various objects pass through their hands. When you click on that object, it opens up a place to interact which continues the visual theme by using the object as a motif. This further enforces the idea that things are not permanent, and alludes to the idea of reminiscing about a past memory which is linked to a material object.

In the process of exploring the jquery code, I found that you could modify the rate at which a certain layer scrolled both upwards and downwards. As a result, I modified the speed so that the background moves really fast as you scroll upwards. I found that in doing so, it was reminiscent of how different people leave the world at different times and have their lives flash before their eyes. Also, it alludes to our inability to just go back in the past to correct our mistakes. This is what creates a feeling of regret, having lost an instance in time.

At the bottom of the website, the user is asked the question, "So what is left?" Next to this query, the user sees how their hands are empty. Over time, things break and images fade. Memories become less distinct, and some may disappear altogether. As a result, I wanted the user to reflect on their own lives, and learn to grasp the moment and appreciate what they have been given.

After an online critique by Tresa, I decided to slightly reduce the opacity of the hands to better match the aesthetic of the site. Since the human body itself is ephemeral as well, I thought that it matched well with the meaning my site is trying to convey.