บทที่6 ออกแบบหน้าเว็บ

หลักสำคัญในการออกแบบหน้าเว็บ

- คือ การใช้รูปภาพและองค์ประกอบต่างๆร่วมกันเพื่อสื่อความหมายเกี่ยวกับเนื้อหาหรือลักษณะสำคัญของเว็บให้น่าสนใจ บนพื้นฐานของความเรียบง่ายและสะดวกของผู้ใช้

หลักการออกแบบหน้าเว็บ

1. สร้างลำดับชั้นความสำคัญขององค์ประกอบ ( Visual Hierarchy )
2. สร้างรูปแบบ บุคลิกและสไตล์
3. สร้างความสม่ำเสมอตลอดทั่วทั้งไซต์
4. จัดวางองค์ประกอบที่สำคัญไว้ในส่วนบนของหน้าจอเสมอ
5. สร้างจุดสนใจด้วยความแตกต่าง
6. จัดแต่งหน้าเว็บให้เป็นระเบียบและเรียบง่าย
7. ใช้กราฟิกอย่างเหมาะสม

รูปแบบโครงสร้างของหน้าเว็บ

โครงสร้างหน้าเว็บที่พบบ่อยๆ แบ่งเป็น 4 รูปแบบดังนี้

1.โครงสร้างหน้าเว็บในแนวตั้ง

โครงสร้างหน้าเว็บในแนวตั้งถือเป็นรูปแบบพื้นฐานที่ได้รับความนิยมมากสุดเพราะมีรูปแบบที่ง่ายในการพัฒนาและมีข้อจำกัดน้อยสุดเมื่อเทียบกับรูปแบบอื่นเมื่อใดที่หน้าเว็บมีความยาวมากกว่าพื้นที่หน้าจอ

บราวเซอร์ก็จะแสดงสกรอบาร์ขึ้นที่ขอบด้านขวาของหน้าต่างตัวอย่างเช่นเว็บ www.amwayshopping.com

2.โครงสร้างหน้าเว็บในแนวนอน

โครงสร้างหน้าเว็บในแนวนอนต้องอาศัยความคิดสร้างสรรค์และความพยายามมากกว่าปกติเนื่องจากมีข้อจำกัดและสิ่งที่ต้องระวังค่อนข้างมากเป็นการใช้ประโยชน์ของพื้นที่ในแนวนอนอย่างเต็มที่ ตัวอย่างเช่นเว็บ www.louisvuitton.com , www.sk-ii.com

3.โครงสร้างหน้าเว็บที่พอดีกับหน้าจอ

โครงสร้างรูปแบบนี้ใช้พื้นที่หน้าจอน้อยกว่าเว็บทั่วไปและมักจะอยู่ตรงกึ่งกลางของหน้าจอซึ่งจะออกแบบให้มีขนาดพอดีกับหน้าจอโดยไม่มี Scroll bar ปรากฏเหมาะที่จะใช้ในการนำเสนอข้อมูลที่มีปริมาณไม่มากนัก
ข้อดี ของรูปแบบนี้คือการนำเสนอที่ไม่ซับซ้อนและสะดวกต่อการใช้งานเพราะผู้ใช้จะมองเห็นข้อมูลทุกส่วนของหน้าได้พร้อมกันตลอดเวลา

4. โครงสร้างหน้าเว็บแบบสร้างสรรค์

รูปแบบสร้างสรรค์นี้อยู่นอกเหนือกฏเกณฑ์ใดๆ มักมีรูปแบบและการจัดวางองค์ประกอบเฉพาะตัวที่คาดไม่ถึงเป็นเว็บของศิลปิน นักออกแบบ บริษัทโฆษณา เนื่องจากเป็นเว็บที่สื่อถึงการแสดงฝีมือและความสามารถในการออกแบบอย่างสร้างสรรึ์ได้เต็มที่

ส่วนประกอบของหน้าเว็บ

เราอาจแบ่งหน้าเว็บออกเป็นส่วนประกอบหลัก 3 ส่วน

1.ส่วนหัว ( Page Header )

บริเวณส่วนหัวของเว็บเป็นบริเวณที่สำคัญที่สุดในหน้าโดยปกติแล้วส่วนหัวของหน้ามักประกอบด้วย ชื่อเว็บ ระบบเนวิเกชัน และ หัวข้อหลักหรือชื่อของเนื้อหา

2. ส่วนของเนื้อหา ( Page Body )

ส่วนของเนื้อหาบนเว็บควรจะมีความกะทัดรัดและจัดอย่างเป็นระเบียบเพื่อให้มองหาข้อมูลได้อย่างรวดเร็วโดยแสดงความสำคัญไว้ในส่วนต้นๆของหน้า
มีการจัดรูปแบบตัวอักษรอย่างเหมาะสมเพื่อทำให้เนื้อหาดูน่าสนใจอ่านได้อย่างสะดวกและช่วยสร้างความเชื่อมั่นต่อเนื้อหามากยิ่งขึ้น เนื่องจากผู้ใช้ทุกคนต้องการแหล่งข้อมูลที่ชัดเจน เป็นระเบียบ และน่าเชื่อถือ

3.ส่วนท้ายของเนื้อหา ( Page Footer )

เป็นบริเวณที่จะให้ข้อมูลเพิ่มเติมเเกี่ยวกับเนื้อหาและเว็บโดยอาจเป็นระบบเนวิเกชันแบบโกลบอลที่เป็นตัวอักษรหรืออาจเป็นที่รวมของลิงค์ที่เกี่ยวกับนโยบายทางกฏหมาย ลิขสิทธิ์ ความเป็นส่วนตัว และวิธีการติดต่อกับผู้ดูแลเว็บ
ซึ่งส่วนท้ายนี้จำเป็นต้องคงความสม่ำเสมอในทุก ๆ หน้าเช่นเดียวกับส่วนหัว
ออกแบบหน้าโฮมเพจ ( Home Page )

 หน้าโฮมเพจเปรียบเสมือนหน้าปกของนิตยสาร ต้องออกแบบให้น่าสนใจและมีการแน่ะนำถึงเนื้อหาสำคัญภายในเล่ม โฮมเพจที่ดีควรมีลักษณะ ดังนี้

1. แสดงถึงภาพรวมและสิ่งที่เป็นประโยชน์ในเว็บ
2. ดูน่าสนใจและมีลักษณะที่สัมพันธ์กับเนื้อหา
3. มีลิงค์ที่สามารถเชื่อมโยงไปสู่ส่วนหลักๆของเว็บ
4. แสดงผลได้อย่างรวดเร็ว โดยใช้รูปกราฟิกอย่างจำกัด
5. แสดงถึงเอกลักษณ์ของเว็บด้วยการแสดงชื่อเว็บ
6. แสดงถึงสิ่งที่ปรับเปลี่ยนใหม่ เพื่อให้ผู้ใช้เข้าใจว่ามีการเปลี่ยนแปลงของเนื้อหาภายใน
7. แสดงวันที่ปัจจุบัน
8. เปลี่ยนแปลงรูปกราฟิกเป็นประจำทุกวัน สัปดาห์ หรือเดือน
9. แสดงข่าวหรือข้อมูลความเคลื่อนไหวใหม่ๆ ให้ผู้ใช้ได้รับรู้ในหน้าแรก
10. สร้างส่วนของเนื้อหาที่แสดงถึงสิ่งใหม่ๆในเว็บ

หน้าก่อนโฮมเพจ

การสร้างหน้าก่อนโฮมเพจจริง ที่เรียกว่า "Splash page" ทำหน้าที่แน่ะนำหรือสื่อข้อความบางอย่างของเว็บเพื่อสรา้งความประทับใจต่อผู้ใช้โดยปกติแล้วหน้านี้จะต้องแสดงผลได้อย่างเร็วเร็วและดูน่าสนใจด้วยการใช้กราฟิกหรือเทคนิคพิเศษเหมาะสมสำหรับเว็บที่ต้องการนำเสนอข้อมูลพิเศษบางอย่าง

แต่สำหรับเว็บโดยทั่วไปหน้าก่อนโฮมเพจนี้อาจไม่จำเป็นและรบกวนเวลาของผู้ใช้

ข้อแน่ะนำในการออกแบบโฮมเพจ

1. ออกแบบโครงสร้างของหน้าโดยใช้โปรแกรมกราฟิก
2. กำหนดชื่อของเว็บให้สื่อความหมาย
3. สรา้งความแตกต่างของสิ่งที่แตกต่างให้เห็นอย่างชัดเจน เช่น สีของลิงค์ต้องกับสีตัวอักษร
4. เลือกใช้พื้นหลังที่เหมาะสม
5. หลีกเลี่ยงการใช้เทคโนโลยีขั้นสูง
6. อย่าใช้ภาพเคลื่อนไหวมากจนเกินไป

ย้อนกลับ