Lect07 Page Design

ออกแบบหน้�าเว็�บออกแบบหน้�าเว็�บPage DesignPage Design

หลั�กสำ�าคั�ญใน้การออกแบบหน้�าเว็�บ คั�อ การใช้�ภาพแลัะองคั�ประกอบต่�างๆ ร�ว็มก�น้ เพ�!อสำ�!อคัว็ามหมาย

เก#!ยว็ก�บหน้�าหาหร�อลั�กษณะสำ�าคั�ญของเว็�บไซต่�บน้พ�)น้ฐาน้ของคัว็ามเร#ยบง�ายแลัะสำะดว็กของผู้-�ใช้�

แนวคิ�ดในการออกแบบหน�าเว�บแนวคิ�ดในการออกแบบหน�าเว�บ

- เร�ยนร��จากเว�บไซต์�ต์�างๆ ทำ�าให�เก/ด Idea ใน้การออกแบบ เทำคัน้/คั เว็�บคั-�แข�ง น้�าลั�กษณะทำ#ด#มาประย0กต่�

- ประย�กต์�ร�ปแบบจากสิ่� งพิ�มพิ� ประย0กต่�จากการออกแบบ แผู้�น้พ�บ โปสำเต่อร� หน้�งสำ�อ ห�ว็จดหมาย เช้�น้ โทำน้สำ# กราฟิ4ก หร�อต่�ว็อ�กษร

-ออกแบบอย�างสิ่ร�างสิ่รรคิ� กลั�าทำดลัองสำร�างเว็�บร-ปแบบใหม�อย�างสำร�างสำรรคั� เช้�น้ ต่�ว็หน้�งสำ�อ โลัโก� แลัะป05มต่�างๆ อาจด-จากหน้�งสำ�อ แมกกาซ#น้ ทำ#ว็# แลัะเว็�บอ�!น้ๆ

See MAGAZINE

หลั$กการออกแบบหน�าเว�บหลั$กการออกแบบหน�าเว�บ- สำร�างลั�าด�บช้�)น้คัว็ามสำ�าคั�ญขององคั�ประกอบ

เช้�น้ ต่�าแหน้�งแลัะลั�าด�บคัว็ามสำ�าคั�ญ,สำ#แลัะแต่กต่�างของสำ#,ภาพเคัลั�!อน้ไหว็

หลั$กการออกแบบหน�าเว�บ หลั$กการออกแบบหน�าเว�บ ((ต์�อต์�อ))- สำร�างร-ปแบบ บ0คัลั/ก แลัะสำไต่ลั�

- สำร�างร-ปแบบ บ0คัลั/ก แลัะสำไต่ลั� (ต่�อ)

หลั$กการออกแบบหน�าเว�บหลั$กการออกแบบหน�าเว�บ ((ต์�อต์�อ))- สำร�างคัว็ามสำม�!าเสำมอต่ลัอดทำ�)งเว็�บ

หลั$กการออกแบบหน�าเว�บหลั$กการออกแบบหน�าเว�บ ((ต์�อต์�อ))-จ�ดว็างองคั�ประกอบสำ�าคั�ญไว็�ทำ#!สำ�ว็น้บน้ของหน้�าเสำมอ- จ�ดแต่�งหน้�าเว็�บให�เป7น้ระเบ#ยบแลัะเร#ยบง�าย-ใช้�กราฟิ4กอย�างเหมาะสำม

เทำคัน้/คั ม#การ�ต่-น้ประจ�าว็�น้ให�อ�าน้ ช้�ว็ยด8งผู้-�สำน้ใจให�เข�ามาอ�าน้

หลั$กการออกแบบหน�าเว�บหลั$กการออกแบบหน�าเว�บ ((ต์�อต์�อ))เข�าลั�กษณะการใช้�งาน้เว็�บเพจ

ออกแบบหน้�าเว็�บให�ม#คัว็ามยาว็ทำ#!เหมาะสำม 85% ของผู้-�ใช้�จะไม�อ�าน้ข�อคัว็ามจน้จบ 10% ของผู้-�ใช้�ไม�เคัยเลั�!อน้ Scroll bar เพ�!อด-สำ�ว็น้ลั�างของจอ ผู้-�ใช้�ไม�ทำน้ต่�อการรอดาว็น้�โหลัดหน้�าทำ#!น้าน้เก/น้ไป ผู้-�ใช้�ช้อบให�จ�ดหาต่�ว็เลั�อก , Navigation ทำ#!ช้�ดเจน้ แต่�ม�กจะไม�คั�อยใช้�ก�น้น้�ก

สิ่�วนประกอบของหน�าเว�บสิ่�วนประกอบของหน�าเว�บสำามารถแบ�งได� 3 สำ�ว็น้หลั�กๆ ได�แก�

1.สำ�ว็น้ห�ว็ของหน้�า (Page Header)2.สำ�ว็น้ของเน้�)อหา (Page Body)3.สำ�ว็น้ทำ�ายของหน้�า (Page Footer)

เราสำามารถจ�ดว็างกราฟิ4กแลัะต่�ว็อ�กษรทำ#!สำ�าคั�ญเช้�น้ โลัโก� ช้�!อเว็�บ ระบบเน้ว็/เกช้�น้ ห�ว็เร�!อง ลั/งคั� ลังใน้แต่�ลัะบร/เว็ณ