My Music Festival Website Assignment

Here's the link to my Music Festival Website Assignment:
http://zoancafe.host56.com/
and here's my detail:
Name: Guan yi (Antony) ZHAO
Student ID: u3016369
Email: zhao_guanyi2000@hotmail.com

Plus, here's the link to my bolg theme discussion:http://zoancafe.blogspot.com/2009/03/hi-there-my-name-is-guan-yi-zhao.html

Back to the website, please notice that the content of that website is only an assignment, not for the real Canberra International Festival advertisement. Please do NOT contact to buy any tickets or ask any inquiry. Plus, the most text contents are from http://www.cimf.org.au/ and the picture is form Google internet search engine.

Website Layout PSD Drafts

About CSS

All the texts bellow are quoted from Wikipedia:

"Cascading Style Sheets (CSS) is a style sheet language used to describe the presentation (that is, the look and formatting) of a document written in a markup language. Its most common application is to style web pages written in HTML and XHTML, but the language can be applied to any kind of XML document, including SVG and XUL.

CSS is designed primarily to enable the separation of document content (written in HTML or a similar markup language) from document presentation, including elements such as the colors, fonts, and layout. This separation can improve content accessibility, provide more flexibility and control in the specification of presentation characteristics, enable multiple pages to share formatting, and reduce complexity and repetition in the structural content (such as by allowing for tableless web design). CSS can also allow the same markup page to be presented in different styles for different rendering methods, such as on-screen, in print, by voice (when read out by a speech-based browser or screen reader) and on Braille-based, tactile devices. While the author of a document typically links that document to a CSS stylesheet, readers can use a different stylesheet, perhaps one on their own computer, to override the one the author has specified.

CSS specifies a priority scheme to determine which style rules apply if more than one rule matches against a particular element. In this so-called cascade, priorities or weights are calculated and assigned to rules, so that the results are predictable.

The CSS specifications are maintained by the World Wide Web Consortium (W3C). Internet media type (MIME type) text/css is registered for use with CSS by RFC 2318 (March 1998)."

HTML Tags

The basic html codes that I need for my website.


HTML Tags

Website Layout Hand Drafts

Layout Hand Draft 1


Layout Hand Draft 2


Layout Hand Draft 3


Final Layout Hand Draft

Design reference (Assessment 1)

Here's my detail:
Name: Guan yi (Antony) ZHAO
Student ID: u3016369
Email: zhao_guanyi2000@hotmail.com

My Five Reference Sites:
(Please be noticed that all the images could be enlarged by clicking on it.)

1. Web Designer Wall
Link:
http://www.webdesignerwall.com/trends/2008-design-trends/



2. WPZOOM
Link:
http://www.wpzoom.com/



3. Viger Advance
Link:
http://www.viget.com/advance/



4. Design Sponge
Link:
http://www.designspongeonline.com/



5. Olliekav
Link:
http://www.olliekav.com/



The Seven Characteristics (Conventions):

1. VERTICAL Scroll Bar:

Scroll bar is a very common convention. And mostly important is that scroll bar is vertical and not horizontal. Since almost all computers's mouse scrolls are vertically designed, a horizontal scorll bar is just so confusing. You wouldn't want the audience to miss something on their screen.

2. HYPERLINKED Site ID:

Site ID should be hyperlinked to the home page and right on your screen where you can see it straight away. If you had no idea where you up to or got completely lost, you could easily click on it and get back to where you started to look again.

3. CLEAR Search Bar:

People need to search something when they can't see it, and in order to search, they need to SEE the search bar of course. So that is why it's important not to make it hard or unable to find.

4. SIMPLE Navigation:

Navigations should also be easy to find and understand, just like the signs in the airport. To do that web designers have to make it neat and simple so that the audience may find their way to what they wanted easily.

5. Subscribe RSS:

RSS is optional, but better have it so web designers could simply offer the audience to subscribe the information on the site.

6. NICE Colour:

You don't want to make your audience dizzy by using too many fancy colours, do you?

7. NEAT Banner:

If all the 6 characteristics above could be located very neat within the banner area, the audience would find the web site very aesthetic and functional. That is why I refered those five sites, they all showed all the characteristics very well.

Here is the proof:











Bibliography:

KRUG, S. (2006). Don't make me think!: A common sense approach to web usability. (2nd ed). Berkeley, CA: New Riders. Chapter 6, 'Street signs and bread crumbs', 50-93.

HINCHCLIFFE, G. (2009). Designing for Web. Lecture notes distributed in the Uint 8178 Web Design and Production. University of Canberra. Online lecture on 26th Feb.

Design Thinking (Steve Krug's "Trunk Test")

Before doing my own design reference, it's good to get a clear orientation. What is a good/bad web design? About half years ago I was asked this question in the Networked Media Production class, and I had almost the same thought with Steve Krug's Trunk Test (without reading his book of course). And now, within my Web Design & Production unit, I had a chance to study his theory more carefully.

Here was my thought:

Can you find yourself where you are? Or you're just completely lost? How can a webpage be designed visually and functionally to guide or lead readers?...blah-blah...

Here's Steve Krug's thory:


(Krug, 2006)

And

The Trunk Test:

"Here's how you perform the trunk test,Step 1 Choose a page anywhere in the site at random, and print it.Step 2 Hold it at arm's length or squint so you can't really study it closely.Step 3 As quickly as possible, try to find and circle each item in the list below.(You won't find all of the items on every page.)CIRCLE:1. Site ID2. Page name3. Sections and subsections4. Local navigation5. "You are here" indicator(s)6. Search"(Krug, 2006)


(Krug, 2006)

Bibliography:

KRUG, S. (2006). Don't make me think!: A common sense approach to web usability. (2nd ed). Berkeley, CA: New Riders. Chapter 6, 'Street signs and bread crumbs', 50-93.

What skills do I have? (+ some of my own works)

I've got some basic skills of the following softwares:

Adobe Photoshop SC3



Ulead Vedio Studio



Final Cut Pro



Adobe Flash SC3



Adobe Audition 2.0



Overture 4.0



And

MIDI to MP3 Converter



Here is some of my own works:

Images:

Your love flows gentaly like a river:







I coloured the tree:







Songs:

Chinese Nocturne
(It's a cover version of Jay Chou's Chinese Porcelain)

Download Link:
http://www.fileupyours.com/view/184189/Chinese%20Nocturne.mp3

Lovin' U

Downlaod Link:
http://www.fileupyours.com/view/184189/Lovin%20U.mp3

Please be ware that all the content above is all rights reserved,
and the songs is only for listening, please do not put them in other use without permission.