jianiluProj3

=**Final website can be viewed here:** Website=

__Moodboard__: **Fragile**
I decided to gather lots of images that I felt could relate to my word, Fragile. I looked at the colours that may be suitable and different connotative definitions. I really liked the pastel, toned-out sort of pallets that are displayed in the collection of photographs, since it really seemed to reflect the reserved, innocent or vulnerable definition of the word. Images here carry from the physical fragmentation of fragile objects such as glass. As well as the sort of delicate and elegant relation the word has to items such as feathers, flowers, and nature. To a more human definition relation to the emotional and psychologically fragile mind. As well as the innocence and purity of youth and childhood that can be seen as a kind of fragility as well.

__Brainstorm and Sketches__
Here I was making web charts thinking of **words** that relate to Fragile, as well as **colours** and specific **Items**. My original idea had been to have an interactive website that features a sort of 3D navigational system. I had planned on having a glass cube fall from the top of the page to the bottom, resulting in it's shattered pieces flying across the page (this would have been done by photographing the class cube and photoshop-ing in the scattered pieces). These shattered pieces would be suspended in space and scattered across the page which the viewer would be able to rotate in a 360 degree view. Allowing them to roll over each piece and navigate them as they would regular links. The user would need to fish out which one of the glass shards was actually a link and which ones were not. Once found, clicking the shard would open up an image or processing file visually defining the word, fragile. The concept was that there was that interactive experience where they could "pick up" the pieces. This however, proved impossible with the time limitation and resources, I had originally found a jquery code that allows you to rotate an item through a scrollbar, but done so by pre-photographing/photoshop-ing each angle frame by frame. Instead, I decided to go for a 2D approach analyzed below. Here I've decided to incorporate that entire "3D rotate-able" website onto a 2D plane. Rather than having the shattered pieces suspended in a 360 navigational system, I decided to simplify and have them incorporated on a flat, solid and geometric system. I liked the idea of breaking the page up into an eggshell or broken glass sort of look with angular triangles and shapes, and having certain camouflaged triangles operate as links. I then decided why not spell out my word using these triangles as well to further implement this look. I wanted the entire website to be highly revolved around this main page and therefore decided to have additional information such as processing sketch instructions and definitions of the word entirely on a rollover over the links. The rollover also acts as an indicator that you've found a link in the scattered mess.



Here is my processing brainstorming, I wanted to create simple, but also visually coherent sketches that would flow with the rest of my website. I had wanted to try sketches having irregular triangles piece together a quote or the word, fragile, in processing, and as you move the mouse in between these shapes, have them break apart and move away from where the mouse moves. I found the coding may be a little bit out of my reach and instead decided to pre-draw this concept with pieces breaking and flying off frame by frame and incorporating it into processing then (Below).

View Online: Processing Sketch #1 Download Sketch: Here View Online: Processing Sketch #2 Download Sketch : Here