presentation web site

this is the link to my webpage:

http://people.arch.usyd.edu.au/~awan0850/index.html

enjoy!

Space Brief

Anything that is designed can form a space, with my design I wanted to link three visually different spaces to one idea: the casualty of space.  Space here is seen as the elements that effect us in which we become a casualty of. They include nature, families, war, etc.  I did not want to make my site seem all too melancholy, but instead an alternate transition from one to another. 

On the introduction page, I applied soft dark textures on the still-to-be blossomed flowers (using photoshop) to introduce the viewers my  intention of developing this site. Despite the dominated dark colours on this page, there is a subtle notion of life around with the flower attempting to reach the higher ends of the page. The light strokes of grey charcoal represents the natural forces (wind rain, storm) in which the flower confronts, just as it does in its real life. The text is placed on the far left side to develope the visual progression (from text to image) understanding of the relationship between the text and image. Each flower links to a new page which continues to develop the idea of the casualty space.

On the first page(top flower), I wanted to bring users to an interactive space but still keep  a linkage between the two sites. Hence I developed the 'life of a bug' page, where a few lady bugs roam around a leaf (notice connection with flower) as if trying to avoid being 'hit' by the viewer. On this page, when the viewer clicks on any of the lady bug it becomes flat with eyes popping out, while the bug's dark spots turns green when the mouse is over them. This makes the page more interactive and transports viewers to a more brighter space, but still relating to the idea of the the casualty of space.

As mentioned before I wanted to create the idea of space alternately, hence on the second page, the space becomes more dark and serious with photoshopped images of a lonely boy, a lost little girl and a child who wonders beyond. The connection here with the casualty of space is more stronger than the previous page. While the lonely boy is a casualty of the war , one girl is a casualty of being an orphan, as the other finds herself lost in the world she lives in. I used flash (alpha channels) to connect these three children together and applied thin strokes of diagonal lines that flashes across the page to represent the barrier between them and the good life we live in. I also wanted to confront viewers of the reality of the 'space' we share in this world, and how we lucky we are to not have been that casualty.

On the third page,  I again wanted to develop a brighter atmosphere, and I did this through using colour, layering of stairs and having thin lines (used in page 2) to push the man down the stairs. It is rather childish and even perhaps incomprehensible to some viewers, but the intension is again to create a brighter space with subtle reference to the idea of being a casualty.

Overall, I hope my idea of Space have been communicated through the viewer. I think it is not only about creating a space with the same elements throughout, because as shown with my design even completely different visual representations can have the same objective.

website progress

after several attempts to make my lady bugs 'bob', i decided to make them shiver a few times while moving across the page. i wanted to introduce some interactive feature to communicate with the user. hence i converted the lady bug into a button and applied two different layers - over and down. when the mouse moves over the bug, its pattern will turn green, while when the mouse hits down, the bug will will squished. i made these in photoshop.

over

hit:

text bobbing

http://exit261.com/dreadgrove

this is part of the design direction i am aiming at. Making the text 'bob' will (hopefully) make the space seem more alive.

i think it is also a good idea to place flash movie of my studio design for this semester in the background. it would  fully reflect the personal side of the site and make the site seem more interesting.

******folder structure: assets, pages*******

further ideas

i would also like to make the words seem floating on the page, and i can do this by using flash.

http://www.henrikknudsen.com/

this site is quite inspirational, its a personal of henrikk nudsen, showing his collection of work. the mouse roll over is interesting but kind of hard to follow, since the roll over fades slowly.

Concept 2

Concept 2:

HIERARCHY + TRANSPARENCY => PERSONAL space reflecting my inspirations from various architects through out time since starting the architecture course. it would be a personal space, with hidden links directing the buildings the architects have designed.



I uses colours to represent hiearchy, that is the time of the architect in chronological order:

the acient world
Renaissance
19th Century
20th century
21st century

i overlap the words to represent transparency.

some possible javascripts to use (I use to use this site for javascripting my own web page YEARRRSS ago when i enjoyed designing websites i still do and its all coming back to me now :D) :


Title: Expanding Text Images
Contributor: Indraswara (indraswara@yahoo.com)
Contributor URL: http://askindra.cjb.net
Details: 3.83 KB * Uploaded January 29 2003
Description: This script creates a message using expanding text images. It's as simple as creating your own text images to say whatever you need.

Title: Fading Dynamic Content
Contributor: Premshree Pillai (premshree@hotmail.com)
Contributor URL: http://www.qiksearch.com
Details: 3.04 KB * Uploaded May 2 2002
Description: This JavaScript creates a slide-show effect displaying different content dynamically. The content fades in while being displayed. Works in MSIE.

Title: JSWaveText
Contributor: Advanced Effect Maker
Contributor URL: http://www.effectmaker.com
Details: 0.60 KB * Uploaded April 22 2004
Description: This script will make your text string form a wave and then scroll within the defined area.

http://javascript.internet.com/text-effects/in-marquee-links.html

some notes from class..

some notes from class..

Jpeg : lossy compession for non vector / rasterised files/ will compress files/ problem: lossy compression – everytime soyu save file, it loses pixels = change to psd then convert back to jpeg

Gif : flat non complex colour files / vectors / logos / simple vector cartooning / can support a transparent b’ground/ flat colors (2 -3 colors)/ can’t do much with them hence conver to RGB file

Png : newer format that can deal with photos or graphics/ fireworks/ graphic + web

Psd : native photoshop layered file format – for working images – not the web

Tiff : a print image format/ print work only

Eps : format generally that best supports and keeps vector graphics. Save Cad file to eps to make it interesting.

www.banksy.com

documen size relat dto print work only,

work with pixel!

Photoshop tutorial:

Click ‘F’ key to change file with grey background, click f again for black background.

Shift+Tab

Save as HTML and images

Webiste + image

Dreamweaver:

Open html file with dreamweaver, page will loead and the sliced selecion can be changed into a wbepage hence allows you to ad links.

Modify convert tables to layers, page will faint lines that was sliced in photoshop. Images can be laced very easily and accurately/ iwht more control.

Layer similar to div tags

Delete the slices/ white spaces to allow easy movement of the other slices