Web interface research

Arrg.. just finish flash actioscript then now html coding.. wuwuwu...

toa damn good.. provided right brain and left brain training = ="

end up like drop alot of hairs... T_T

well... when i open back my ai files.. ahha.. monday is the presantation..>"<

everything like very rush.. and everyday edi full with assignment..

sat n sun is lasts 2 days to working on.. =.= then sunday still need to do for typography... hell...

web become intresting when we can apply swf~ hor! a new challage.. and i wonder how far i can go.~ i wanted to make my web more playful since it was a toys website for teenager so i start to research on how actually ppl work on flash button.

i research on game website so that the button is more funky n more related to my halloween theme.

http://entertainment.upperdeck.com/shaman/en/interface.aspxa
card game website. it having a section which is interactive demo n tutorial who to play the cards. intresting layout as well o.o. but less content ler..the buttion is like rollover will come out a shuriken. 1.ROLLOVER EFFECT <>

http://ms.nintendo-europe.com/ffcc/enGB/

http://www.nintendo-europe.com/microsite/zeldaminishcap/

both are tutorial website as well. it give the tutorial on the gameplay. very details.

a GBA game. FF! and also Zelda. famous game. the interface is base on GBA graphic but it still look intresting while the graphic not so nice. very well in arrange for the content. make user can easily understand the massage of tr tutorial. Learn learn~~

Halloween Toys

How to change your daily item into halloween toys will be my theme in this project.
hahah i found a nice halloween meal XD
seem like very nice :P

anyway i m not working on cooking stuff = =

http://www.benjerry.com/halloween/

another cute halloween website ~

i study the element that they use and try to apply in my web design.. >"<

How to make a..

Hoho.. the assignment never end .. >"<

http://dollmaker.nunodoll.com/
this is the 1st website that i reseach on. It teach how to make a doll step by step. but what bad abt this website was it is without design. It just text and images.

http://dimdima.com/khazana/activities/show_activity.asp?q_title=Toy+Helicopter
This is another site which teaching people how to make toys. and it more to like paper toys. Well, the instruction is just given buy text and few images.. hmm.. can as the ref for how to plan the content but not the overall design.

http://www.pumpkinpatchesandmore.org/index.htm this is the site is main on haloween. it teach how to carve an elaborate pumpkin designit and it also teach how to cook pumpkin ( many recipe). Teaching step by step n with a lot of images. very details n clear instruction.

http://www.enchantedlearning.com/crafts/halloween/
all about halloween items can how to do it.

Sharing: Free Web Hosting

In order to make your web online, you need to upload your website to any server which available. You can choose either using the free hosting or paid.

Here is a link which have a list of free hosting. You can try out .
Different provider have different limitation.
Ermm, if you ask me how to make decisison, my 1st prorioty was no Ads on web.
For this moment,i think basic bandwith and disc space is enough for us .
http://www.free-webhosts.com/webhosting-01.php

Here is an example,http://www.zendurl.com/
My link: http://www.zendurl.com/ywei/contact.html

But it having google adsence and also a link.. its quie annoying so.. try not to choose this kind of server provider =v=" (why i choose ler? kena tipu lar... its write ads free.. but after upload.. ishh)

After you get the free web hosting, you need to upload you files to the server.
Some of the provider provided FTP / Upload through broswer.
If u been given FTP, then u need to use software to load it.

here is the software that u recommended
http://filezilla-project.org/
This software is quite friendly.

login page..

screenshot when i uploading my files.

for those who intrested to buy a personal web hosting,
i suggest this one http://www.exabytes.com.my/

Please feel free to check out or ask any question.
Mayb what i shared got mistake,

so please let me know if there is any.

(and don cruse me =v= for sharing wrong info)

:) have a nice day~

Visual for Web A1> Edited

Please feel free to give any comments.
Your suggestion can help me improve on my design.
Thanks!

Visual for Web A1

Sharing

http://webseon.nacan.net/alone2007/

this is a very nice search that i found during doing the research.

very good art directcion as well as concept.

but very heavy in file size as it load kinda long...

BUT its worth! +nice bg music.

so please feel free to visit if u r free~ :)

http://cmc.msc.com.my/event_detail.php?ID=195
http://mayang.com/textures/Manmade/html/Paper/index.html

References

https://www.spris.com/starshot/model.asp
https://www.spris.com/starshot/flydaddy/flydaddy9.asp
a site that introduce their model which is quite related to my concept that showing my relationship.

http://www.dauxlab.com/

the character design and also the stats analysis pai chart.

URLs used during sharing session

www.bmxmasters.com
www.brainfood.com
www.durexdickorations.com
www.harajukulovers.com
www.kutztown.com
www.jrvelasco.com
www.natashabedingfield.com
www.runlondon.com
www.nathanlove.com
www.t3rzer.com/principal_eng.html
www.bupla.comwww.gmillustration.com
www.jasondoherty.com
www.erinhurleyonline.com
www.juxtinteractive.com/up2d8/up2d8.html

Research: Website 6

6.Communicator World
http://www.communicatorworld.com/home.aspx

This is a flash website and done by a designer studio. This consider an extra one but i found it was so intresting so i share it here also. It is different with the website that i research just now. This website is using the meta mine method as user need to explore then only know there is a button to click or get futhure information. I really donno how to draft out the grid system of this website ><".. I found out this kind of website is instresting also. It just like a game and feel free to explore. But the way i think this kind of website cannot serve for certain purpose as the information was not instance . We need time to found out 1 by 1.

More screenshot

Research: Website 5

5. Lycos Website
http://www.lycos.com/



Well, this is the screenshot for Lycos website.
As i said just now (research 4) , i feel like want to compare between yahoo! and lycos. Both of them use very simple grid system.

                   LYCOS                        YAHOO!

Both are almost the same just the place they put navigations are differents. And i found out that both of the site use List of Link a lot. I thinks this is the best solution for a lot of contents like news. Compare to Yahoo! i prefer Yahoo! more then Lycos. From the interface, the size of the image that Lycos use almost the same size and i feel like no focus point. ( like which one is more import / hot news) The icon of wheather as large as the artist award picture. While Yahoo! have various size. But both of the really arrange nicely and tidy.

Research: Website 4

4. Yahoo, Website

http://www.yahoo.com/

This is the screenshot for the website.

Yahoo! is a popular website and its always full with a lot of contents such as latest news, horoscope, games, emails,... etc. What i am so suprise is after i analysis the website, actually they just use a very simple grid system.

What i can feel is like the front page of yahoo! just like our newspaper. It full words and as my Typography lecture said, most content you have, more harder is. So newspaper always with nice typographic. O.o .. actually i wonder why. Ha, but untill now hvt found out yet. Same with yahoo!. I really not dare to comment more about it as if u ask me how to make it nicer or make it more tidy... i will said like ermmm... ^^" I think maybe i shoud compare more like yahoo! with Google-ig, Lycos..etc and learn more then only i can manage this kind of "quantity" contents.

Research: Website 3

3. Orange.com Website
http://www.orange.com/english/home.php



This is the screenshot for the website.
This is a website for a Communication and Entertainment company. As usual, after i do analysis i draft out the grid system for the website.




This website was well plan for their sub navigations.
Refer to the screenshot below. They use another way to present the buttons.




This website use spacing smartly as their layout reserve a big space for contents and also background. So that user would not feel not comfortable and very pack of words. As the graphic is in swf format it will slightly animate and make the website looks lively. The website was well plan for the typography use stick to the major colour orange which related to their company. They try to tone down the orange for the graphic in order to make those contents look more contrast. Imagine if the orange is too sharp, the images will become the focos point but not the info. From here i aware of use of the colour and image is very important as we need to know which is the main thing should be focos and which is the things that just use to enchant the main things.

As there are communication and entertaiment company, i think their website should have a very soft / nice background music, cause they play with a lot of spacing. Although the spacing make overall looks nice but i still feel like miss something there and i think if there is a soft bg music it will be nicer.

Research: Website 2

2. Web Sango Website
http://www.web3go.com.tw/index.asp3go.com.tw/index.asp

This is the thumbnail of the website. Its is a website for webgame so the contents of the website is full of game data, information, picture as well as tutorial. So it was a challage to arrange so many different kind of info together in a page.
Same as above, after analysis i was draft out a grid system for this website.

Same a the 1st website, i found that for a look nice website they always prepare a big space for their contents and i feel like contents part always become a part that i will not aware of. As usual, the navigation is on the top as well as left side of the web and i think this is the way they make it user friendly. There are consistency for every single page i like they use those game elements become their navigations/buttons. It was so intresting. This website didt have the weakness for the 1st page. The image for the title will changed after few sec and they will be a highlight will keep shinning on the logo. So it wont looks like all is dead.

For this website, what i feel like not very good is it navigation. At the same row of navigation,2 of it will open pop out window. I personally feel it was not consistent enough because when i surf on 1st and 2nd its wont pop out but when click on 3rd it will pop out. I am able to edit on it, i will seperate the pop out links to another part which wont put together with those link that would not pop out.

Research: Website 1

There are some website that I feel there are good enough to be my references.
And now I am going to share with you guys.

1. Microsoft Corporation Website
http://www.microsoft.com/en/us/default.aspx


This thumnails is the screenshot of the website.
Overall its looks tidy, comfortable as well as trendy.
After i do analysis the website, i draft out then gridline for the web.




The layout of this website is nice as well as it have the consistency for every pages. They leave quite a big space for contents so it wont looks untidy although when there are plenty of words. I really appreciate the way that they doing the layout. It was a comfortable in a view while it was user friendly. There was a hierachy there so I wont feel I was lost when i surfing this site. The navigations was clear enough and the font they use is san-serif type font, Arial. There is also a consistency in the colour mode which is all in blue tone and it blend everthing well together .

I know they must be their own reason for doing the website to be like this. Maybe they try to make the site lighter file size as the user was using slow connection still be able to view their site.
Errmm, I try to think at their side and also mine.. If i am going to edit smtg to the site, i will add some little animation there. Examples, the image design there were many lines, i will make them like slighty move, change the curves... So overall for the web interface wont feel like everything is dead, no motion at all.