page 2

during the design of the lady bug page, i realised the subtlety of death in my design. despite this negative i wanted to pursue another page that could link indirectly with the first page..
hence i began research on images of death and found these three that i will use for second page. :

Review of web design

This term I have thoroughly enjoyed each class  and have learnt a range of techniques in using Macromedia and Adobe programs. There are many things I believe I could have improved on my website:

*introducing audio- this would have made a stronger connection with the viewers

*discovering more techniques in flash- with the time restrictions and work load   from other subjects (I know its not an excuse gianni but still.. :) ), I had not been able to fully explore this program thoroughly. But by knowing the basics i believe this course has given me the startup. 

*plan my time better 

*explore photoshop more as well- this would be great for my presentation on core study units as well

THANKS GIANNI!!!!

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

something i found on lynda.com about the structure of a flash site.

week 8 notes

stop frame animation: single movement of animated object

tweeny speeds up process of animation

scrabbing =  dragging the black dot in timebar above the STAGE

subselection tool = selects parts of the object

free transform tool =  reshape, rotate etc

gradient =  crate gradient lines

pen tool =  drawing any shape you  like (linear lines onley, flash= vector program)

 button symbol =  down mouse

frame  =  twelth/fourteen frame 

fla = photoshop file 

swf =  exported movie

action scripting

week 6- concept and group discussion

Concept

space: virtual checker board

my interpretation of SPACE: space can come in any form, it is like an environment that is composed of different elements. I chose a chess board, because it consists of simple components (the board and chess pieces) and the space can be manipulated freely.

creation method: 

model chess board in maya or other 3D modelling program( this may be to hard, i am still deciding what other ways i can develop it). save an ground perspective image of my modeled chess board and import it into photoshop for further editing. i plan either use the black and white squares on the board or the pawns as navigation bars, then allowing an internal window open once they are clicked on.

i formerlly planned to have my favourite holiday locations to be placed on the chess board, and utilise flash to make the black and white boxes flicker to the image once the cursor is placed over it. i still might hold on to this idea, but will decide later on. 

i also plan to have flash input on my final site

group discussion:

interesting idea, however may take a while to create, so group members have suggested to come up with a simple 2D image drawn or scanned into the computer inorder to reduce the work load.

one of my group member had a very interesting site, where images of different spaces were created to become alive. flash and perhaps photopshop was used in the creation process. it is simple, interactive and delivers its purpose to its viewers. these are the things i should keep in mind.

www.andyfoulds.co.uk/flash_design.html

show casin his website, adveritse, vector flash, , combine gaphic elemtn with text, 

lynda.com- good tutorial flash site 

interactive sites

http://www.10mg.nl/
very interactive

http://www.kubikfoto.de/refashion/
technique: flash

http://www.cwd.dk/

http://www.littledeviant.com/
multimedia

lesson 4 - student webart selection + comments

www.prefer.com.tw

hand-drawing, collage, design into a set strucutre, loading page is interesting environment wif images. in  contact with site. captivates the audience. structure: regular page. 

entering into a space

shockwave VS Flash

shockwave= older version of the flash

www.donniedarkofilm.com

fustrating yet interactive, 

www.crisvector.com

personal site, with interaction with his community, author sells his art work online, user friendly navigation

www.tolarnogalleries.com

links to text, horizontal presentation

clear identity, not so arty, more about design, minimal clean contemporary site, digital access

www.stardust.tv

animation attracts attention, less text more art, 

design has a purpose while art doesn't.

www.alfafusion.com

a bit hard to find navigation bars, a robotics technology, what is visual meaning doing?

Personal website

www.yannus.com

Development of the Internet

- Technique: flash

- The site contributes to the development of the Internet through using flash.

- Upon entering the site a line expands into a rectangular frame, that contains slide shows of the subject of the site as well as italic menu bars and the title of the website. The expansion of the line is like the ‘motif ‘of this site, as it repeats when clicking on any of the menus.

- Copyright laws of the site is located below the page, but very faintly inscribed.

Identifying possibilities for contemporary art/design practice.

Colour/ texture: black, grey, dark blue – reflects masculinity, modern, makes the author seem cool yet mysterious,

- Page is positioned at center to engage the reader.

- The presentation of the information on the site is divided into three segments- pictures, material, main menu links and the author’s name (located above the menu links). The scroll bar in the center eliminates the need to use the side scroll beyond the site. This technique is widely used in contemporary art/design practice engages the reader and reiterates the subject of the web site.

- When the cursor moves over the links, the text changes colour, to show that the item is selected

- Contemporary art/design practice can be also identified in the gallery page where the author uses a slide show of thumbnail images of himself across the frame instead of the conventional way in which thumbnails are placed in square frames. When the cursor is placed over the slide show, the slide show moves slowly to the left, and it stops once cursor is removed.

- Another form of contemporary design is the background of the material section, light strokes of light brushes across the letters from the author’s name.

- The only downturn of the site is that it is somewhat over darkened so sometimes the material can be hard to read. I.e. the ‘extra’ section

sydney dance company site analysis

Sydney Dance Company .com


Technique: flash + html


Presentation:

Elements that reflect a sense of ‘performance’/ theater
Logo remains at the top left corner, and the word DANCE is creatively arranged in an up and down sequence to suggest movement of creativity and flair.

The site is confined in the rectangular shape that is centered to the left of the page for better view and easy access of information. This eliminates the need to scroll through the page using the side.

Initial darker shade of grey covers the main home page like a curtain wall. Upon clicking Enter, the grey shade withdraws from the center revealing the site’s background of a dancer. Another darker grey shade drops down within the site presenting menu bars, as upcoming touring shows and links on how to subscribe to the news about the company appears at the bottom of the page.

As you can see the menu bars expands related materials (or sub-menus) when the cursor is placed over it and they contract when the cursor is removed. In clicking on the submenus, we are redirected to respective pages, but the form of the page is lost. This is one of the downside of the site. There are 3 segments that display the information in the submenu- photo, name, and explanation. This sequential organization of the page provides feasibility in reading and understanding the data. As you can see the title constantly remains in its original location

footer links remains at the bottom of the page through surfing this site.