Web page Design by natthanan vatthanasangpan

Web Page Design ( Test Project ) BY NATTHANAN VATTHANASANGPAN

ที่มาในการสรางสรรค -

ผลงานชุดนี้เกี่ยวกับเรื่องราวของแสงและเงา Ideaเริ่มจากtheme สีที่เคยกลาวถึง Tone ขาว , ดํา , และแดง ทําใหเกิดเปนconcept และ Ideaเรื่อง contrast ของแสงเงา เพราะสีเหลานี้ตางมีคาน้ําหนักที่ ชัดเจนในตนเอง เมื่ออยูดวยกัน จึงทําใหรูสึกถึงการขับคาน้ําหนัก ของสีแตละสี ที่ตางกันชัดเจนมากยิ่งขึ้น ดิฉันเลยนําconceptนี้ มาใชในการสรางสรรคและใสeffectแสงและเงาบนวัตถุตางๆที่อยู ในชิ้นงาน ไมวาจะเปนตัวละครcharacter ที่ไดสรางสรรคใหเปน เสมือนตัวละครไกด ที่นําไปสูเมนูตางๆที่พาไปสูขอมูลในlink ตางๆ ตอไป รวมไปถึง logo , background , และ วัตถุตางๆภายในผลงาน และเพื่อการคลอบคลุมtoneสีภายในงาน เพื่อใหไมโดดเดนมากกวา สวนขอมูลในlinkตางๆ มากเกินไป

รูปแบบในการสรางสรรค จากconceptและIdea ที่อธิบายมาเบื้องตน ดิฉันจึงสรางสรรค ผลงานหลักออกมาทั้งหมด 3 รูปแบบ ซึ่งแตละรูปแบบไดสรางสรรค หนาweb page ยอยประกอบอยูดวย กลาวคือ ดิฉันไดนึกถึงขณะเวลาที่ เขาสูหนาweb page หลักแลวclick เลือกไปสูmenuหัวขอยอยตางๆ ภายในweb หนาwebก็จะเปลี่ยนไปสูรูปแบบใหม ซึ่งสวนประกอบยอย สวนนี้จะชี้แจงรายละเอียดของแตละชิ้นงานตอในหัวขอถัดไป • นอกจากนี้ ตัวละครcharacter design ที่ออกแบบมา ไดมีความคิดใน เรื่องของ motion graphicใสเพิ่มเติมในตัวละครในผลงาน เสมือนเปน ไกดเวลาจะไปสูmenuยอยตางๆ เปนตัวละครที่สามารถเคลื่อนไหวได เพื่อเพิ่มความเพลิดเพลินในการชมมากขึ้น

•

รูปแบบที่ 1

MAIN PAGE ( P.1 )

CONTENT PAGE ( P.2 )

SUBSTANCE PAGE ( P.3 )

ปุม enter clickสําหรับ เขาสูหนาถัดไป

Main Page เปนหนาเริ่มตนเพื่อเขาสูหนา หัวขอยอยตางๆตอไป โดยทําการclickที่รูปLogo

Content Page เปนหนาที่ประกอบดวยหัวขอยอย menuตางๆ เพื่อclickเขาไปสูรายละเอียดขอมูลตางๆของบริษัทตอไป

TEXT Substance Page เมื่อclickเขาสูห ัวขอยอยใด ดานบนจะปรากฎcharacterตัวละคร และชื่อของหัวขอนั้น และขอมูลภายในของหัวขอก็จะปรากฎตรงกลางของแสงไฟspotlight

รูปแบบที่ 2

MAIN PAGE ( P.1 )

CONTENT PAGE ( P.2 )

SUBSTANCE PAGE ( P.3 )

ปุม e nter เขาส clickส ูหนา ําหรับ ถัดไ ป

ตัวละคร motion graphic

Content Page เปนหนาที่ประกอบดวยหัวขอยอย menuตางๆ จะปรากฎเปนmotion graphic ของตัวละครเคลื่อนไหว ลักษณะวิ่งขึ้นบันได เมื่อclickเลือกหัวขอใด ก็จะหยุดที่หัวขอนั้น

TEXT

Substance Page หลังจากclickเขาสูแตละหัวขอยอย หนาpage ก็จะเปลี่ยนแปลง โดยสัดสวนรูปบันไดและชื่อหัวขอจะยอสวนลงมาอยูดานขวามือ และตัวละครจะเปลี่ยนมาอยูในทาทางมาอยูลักษณะหันลําตัวมาดานหนา แตมองไปที่ดานขางซายมือตรงตําแหนงรายละเอียดขอมูลหัวขอยอย

รูปแบบที่ 3

MAIN PAGE ( P.1 )

CONTENT PAGE ( P.2 )

SUBSTANCE PAGE ( P.3 )

Main Page เปนหนาเริ่มตน เมือ่ เวลา click ที่ปุมที่มี รูปLogo เพื่อเขาสูหนาถัดไป จะเปลี่ยนเปนลักษณะไฟสีฟาสวาง

Content Page ลักษณะกอนclickเขาไปสูหัวขอยอย ตางๆ

Content Page เมื่อลูกศรmouseไปโดนหัวขอที่ตองการเลือก โดยจะปรากฎเปนeffect ลักษณะไปสีฟาสวางขึ้นมา และปรากฎ คําอธิบายสั้นๆดานขางเกี่ยวกับลักษณะขอมูลภายในหัวขอยอยนั้น

Substance Page เมื่อclickเขาสูห ัวขอยอย จะเกิด motion graphic ของวงกลมใหญเคลื่อนไหวลักษณะพลิกกลับสู ดานบนลงดานลางเปนวงกลมใหมทมี่ ีลกั ษณะไฟสีฟาสวางลอมรอบอยู และแสงไฟสีฟาก็ปรากฎที่วงกลมรอบชื่อหัวขอยอยนั้นดวยเชนกัน

THANKS FOR YOUR ATTENTION

NATTHANAN VATTHANASANGPAN CONTACT : ser_art_music@hotmail.com 089-771-1994