Issuu on Google+

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ส ูหนา ําหรับ ถัดไ ป

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


ตัวละคร 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


Web page Design