Web Design 2 - Tutorials

Tutorials for HTML & Codings.

-http://htmldog.com/

-http://www.htmlcodetutorial.com/

-http://www.w3schools.com/html/

-http://www.tizag.com/htmlT/htmlcode.php

Design Tutorials

How to create a web-layout for Italian restaurant

-http://www.adobetutorialz.com/articles/2510/1/Web-Layout-for-Italian-Restaurant

How to create a pure CSS polaroid photo gallery

-http://line25.com/tutorials/how-to-create-a-pure-css-polaroid-photo-gallery

Design a creative design studion layout

-http://www.grafpedia.com/tutorials/design-creative-design-studio-layout

Making your own portfolio web layout page

-http://www.adobetutorialz.com/articles/2967/1/Making-your-own-portfolio-web-page

*from: http://www.noupe.com/tutorial/the-ultimate-collection-of-brilliant-web-design-tutorials.html

Web Design 2 -Beautiful website

Claptaps

http://claptaps.jp/

Cute and awesome interactive website where you can move a character to navigate around the website. Nice art and graphic although there is not much color.Typeface is nice. Interesting way of dragging the navigation button downward like pulling a string.

Puma

http://www.puma.co.kr/goosedown/2010/index.jsp

Street style design very suit. Attract a lot of attention by using a target mouse cursor. Pages slide left and right instead of up and down. Typeface is suitable. Nice website.

Atlantis Fair

http://lostworldsfairs.com/atlantis/

Interesting way of using scrolling effect. Simple graphic but nice. Colors are very catchy and unique way of giving information. Typeface used is suitable.

Owl Concept

http://owlconcept.com/#!/news

Simple and nice. Gives off a mysterious feeling just like the owl. Interface is suitable and typeface used is good. Color used is contrast and overall looks good.

Web Design 2 - Competitors

Bed

http://www.bed.com.my/#

Nice introduction. This website use a lot of vector graphic. Layout design very special and looks very stylish.Overall has a sleek feeling in the website. Information still not there yet as it is under development. However i like the design on the navigation bar using vector graphic.

Luna

http://www.luna.my/

This website has a very modern and stylish feeling. Feel more higher class and very nice design.It has a unique navigation bar on the left which I never seen before. Nice concept of having a back button on the navigation. Clear information and easy to understand while keeping its high class feeling there.

Sky Bar

http://www.skybar.com.my/

This website really brings out the sky feeling just like its name. Nice and unique concept of using the 5 elements of sight,hearing,smell,touch and taste.

The index page is interesting as it attracts me to click of the women 5 senses. Easy to navigate and clear information.

Ecoba restaurant and bar

http://www.ecoba.com.my/#/home

This website is simple using paper as its element. Easy to navigate around the website as it has lesser information. Interesting rollover effect on the graphic. Maybe cause this website support environment friendly, that is why it has 'this' environmental friendly feeling when i see this website.

*2 more extra website page below

http://brotzeit.co/aboutUs.php

http://www.opusbistro.my/

Web Design 2 - Frangipani

Frangipani is a high class restaurant and bar. The website consist of

earthly colors and it is named after a flower. A very different type of

concept compared to other restaurant/bar which have a more stylish

and modern website look.

What I like about the website:
-Photo of the cakes~ XD *yum yum*

*thats all i think...haha

What I dislike about the website:
- A lot of text in some pages.
- Title doesn't stand out very much.

-Navigation bar = boring.
-Doesn't have an interesting hierarchy. Photos and text are place

where it looks quite messy.

link : http://www.frangipani.com.my/index.html

Web Design 2 - Sitemap & Gantt chart

Photoshop tutorial-Web Design

Tutorial that would help me to do my web design project =)

-the treatment for the text

-the texture on the background

link= http://psd.tutsplus.com/tutorials/interface-tutorials/design-a-cartoon-grunge-website-layout/

Design Method 2 ( Campaign)

"Clima Bicycle Lock"

Advertising Agency: Leo Burnett, Bangkok, Thailand
Executive Creative Directors / Creative Directors: Sompat Trisadikun
Copywriter: Noranit Yasopa
Art Directors: Sompat Trisadikun
Photographers: Chub Nokkaew, Chubchevit
Account Supervisor: Akaphong Phongsphanij
Advertiser's Supervisor: Kachaporn Nathapatr
Agency Producer: Sarawut Lertkittipaporn

----------------------------------------------------------------------------------------------------------------

Ogawa Ventilating Fan - "Cook" , " Incense", "smoke"

Lowe,Bangkok has created a print campaign promoting the benefit of installing an Ogawa ventilation Fan.

Agency: Lowe, Bangkok, Thailand
Executive Creative Director: Supon Khaothong, Kittinan Sawasdee, Piya Churarakpong
Art Director: Porakit Tanwattana, Rotrob Ramakomut
Copywriter: wattana, Rotrob Ramakomut
Photographer: Anuchai Secharunputong
Post Production: Remix Studio

----------------------------------------------------------------------------------------------------------------

The Human Hourglass | Sidaction by YforYerom

Sidaction, French association fighting against Aids :"The Human Hourglass"

"Every 10 seconds, someone dies of Aids in the world."

Agency: Leo Burnett
Director: Dimitri Daniloff
Production Company: Marcassin

-----------------------------------------------------------------------------------------------------------------

http://www.riodevelopment.com/blog/mr-w/

"Power of Wind"

Agency: Nordpol Hamburg
Production Company: Paranoid Projects
Advertiser: Epuron/BMU

-----------------------------------------------------------------------------------------------------------------

FedEx Kinko's: "Pack n' Ship"

To announce the opening of FedEx Kinko’s locations in fairly remote markets around the country, BBDO New York took more than two dozen objects found on the street and made them look as if they’ve just been shipped, copied, or packed by FedEx Kinko’s.

"Some items were boxed up and filled with packing peanuts, some were bubble wrapped, and for others, we placed color copies next to the original item," said art director Chuck Tso.

Refine How to"..."

How to " look like an artist (fashion)"

Who am I : fashion artist

who are u : person who looks dull/normal/plain

1st task : learn to style your hair

2nd task :learn to dress up

3rd : learn to pose for the camera

outcome : look fashionable and confident

showcase : gallery

Mood Board

Site map

Web Design "How to ..."

1 : How to " turn 360° inside out"

who am I = fashion artist

who is he/she = a person who dress very plain/dull

1st task = find nice unique/weird shirts,pants,accessories,etc ...

2nd task = wear it on, see which suit which

3rd task = learn to act (stand, walking, sitting, etc...)

outcome = become a more confident and attractive person

showcase = gallery

2 : How to "defense yourself from perverts"

who am I = anti-pervert expert

who r u = victim

1st task = How to identify perverts

2nd task = How to defense yourself

3rd task = How to act during unexpected time of harrasment

outcome = chase perverts away

showcase = gallery

3 : How to " make Flaming Lamborghini" *grin*

who am I = bartender

who r u = customer

1st task = prepare ingredients

2nd task = steps to make

3rd task = how to drink

outcome = enjoy and have fun drinking with friends

showcase = gallery

Photoshop / Illustrator tutorial website

http://www.gomediazine.com/tutorials/drawing-skulls-with-a-wacom-tablet

from

http://www.gomediazine.com/

http://www.smashingmagazine.com/2008/02/13/drunken-monkey-photoshop-tutorial

from

http://www.smashingmagazine.com/

http://www.wade.pwp.blueyonder.co.uk/concepttutorial1.html

from

http://www.wade.pwp.blueyonder.co.uk/

http://www.photoshoplady.com/tutorial/the-making-of-a-robotic-frog/271

from

http://www.photoshoplady.com/

http://vector.tutsplus.com/tutorials/illustration/tips-for-working-with-the-gradient-mesh-tool-in-illustrator/

from

http://www.instantshift.com/

http://www.blog.spoongraphics.co.uk/tutorials/how-to-create-a-stylish-skull-based-vector-illustration

from

http://www.blog.spoongraphics.co.uk/

http://10steps.sg/tutorials/photoshop/create-a-face-shattering-effect/

from

http://10steps.sg/

Website Design 1

Blog 4 beatiful websites *check it out! =D

website 1

http://cville.ownyourc.com

This website is about making CHOICE

It is very interactive and attractive which make

me wan to stay longer to find out more.

The art and design a

re very interesting.

some printshot~

website 2

http://www.gotmilk.com

Milk? milk? anyone got milk??

MOOOOOOOoooooo~~!!

haha, different style of design compare to the one above...also very interesting and nice~

there are interactive and games too~

there are information about milk,products and also some recipe to make from milk~ XD

printshot...

website 3

http://www.starbuckscoffeeathome.com/

nice interface - chalk and board

color and the illustration *thumbs up*

attracts ppl to know more about the coffee and to try them~ ^^v

........eventhough the website is very nice, no $ to buy them(coffee) =P

printshot...

website 4

http://www.thisisgrow.com/archive/happyingreenville/

A website that helps to strengthen St. Francis' positioning as an approachable,

friendly, and integral part of the community for the patients.

It'a a creative hand drawn style with nice colors and a welcoming them

e.

Nice introduction~

printshot~

More from http://www.spoonfeddesign.com/50-stunningly-creative-interactive-flash-websites