Lecture

บทที่ 6 การออกแบบหน้าเว็บ (Page Design)

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

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

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

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

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

- เรียนรู้จากเว็บไซต์ต่างๆ

- ประยุกต์รูปแบบจากสิ่งพิมพ์

- ใช้แบบจำลองเปรียบเทียบ

- ออกแบบอย่างสร้างสรรค์

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

1. สร้างลำดับชั้นความสำคัญขององค์ประกอบ

2. สร้างรูปแบบ บุคลิกและสไตล์

3. สร้างความสม่ำเสมอทั่วทั้งไซต์

4. จัดวางองค์ประกอบที่สำคัญไว้ในส่วนบนของหน้าเสมอ

5. สร้างจุดเด่นด้วยความแตกต่าง

6. จัดแต่งหน้าเว็บให้เป็นระเบียบละเรียบง่าย

7. ใช้กราฟิกอย่างเหมาะสม

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

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

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

                ถือเป็นรูปแบบพื้นฐานที่ได้รับความนิยมมากที่สุด

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

                เป็นการใช้ประโยชน์ของพื้นที่ในแนวนอนอย่างเต็มที่

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

                ใช้พื้นที่หน้าจอน้อยกว่าเว็บทั่วไปและมักจะจัดอยู่ตรงกึ่งกลาง ไม่ซับซ้อนและสะดวกต่อการใช้งาน

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

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

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

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

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

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

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

1. ส่วนหัว (Page Header) บริเวณมุมด้านซ้ายบนของหน้าเว็บเป็นส่วนที่มีความสำคัญมากเป็นพิเศษ เป็นบริเวณที่ผู้ใช้จะ               เริ่มต้นให้ความสนใจ

2. ส่วนเนื้อหา (Page Body) เนื้อหาบนเว็บควรมีความกระทันรัดและจัดรูปแบบตัวอักษรอย่างเหมาะสม

3. ส่วนท้าย (Page Footer)จำเป็นต้องมีความสม่ำเสมอในทุๆหน้าเช่นเดียวกับส่วนหัว

บทที่ 7 การออกแบบเว็บไซต์ให้เหมาะสมกับสิ่งแวดล้อม

1. เบราเซอร์ที่ใช้

                ช่วยให้ผู้เข้าชมเว็บสามารถดูข้อมูลเว็บไซต์ได้

2. ระบบปฏิบัติการของคอมพิวเตอร์

                ระบบปฏิบัติการเป็นปัจจัยที่มีผลต่อการทำงานของบราวเซอร์มาก โดยแต่ละระบบปฏิบัติการจะมีความแตกต่างกัน

3. ความละเอียดของหน้าจอ

                ความละเอียดของหน้าจอจะไม่ขึ้นกับขนาดมอนิเตอร์ที่ใช้ แต่จะขึ้นอยู่กับประสิทธิภาพของการ์ดแสดงผลว่าสามารถทำได้ละเอียดแค่ไหน ปัจจุบันความละเอียดของหน้าจอที่ 1366*768 px

4. จำนวนสีที่หน้าจอของผู้ใช้สามารถแสดงได้

                ขึ้นอยู่กับประสิทธิภาพของการ์ดจอ ยิ่งมาก ยิ่งแสดงสีได้มากขึ้น

5. ชนิดตัวอักษรที่มีอยู่ในเครื่องของผู้ใช้

                เบราเซอร์จะแสดงฟอนต์ที่กำหนดไว้ในเว็บเพจได้ก็ต่อเมื่อ คอมพิวเตอร์เครื่องนั้นมีฟอนต์เหล่านั้นติดตั้งอยู่ในเครื่อง

6. ความเร็วในการเชื่อมต่ออินเตอร์เน็ต

                มีผลต่อเวลาที่ใช้ในการแสดงผลของเว็บ ต้องออกแบบเว็บให้น่าสนใจ สวยงาม และดาวน์โหลดได้เร็ว โดยทำให้ไฟล์มีขนาดเล็กที่สุด

7. ขนาดหน้าต่างเบราเซอร์

                มีโอกาสถูกปรับเปลี่ยนเป็นขนาดเท่าไหร่ก็ได้ตามความประสงค์ของผู้ใช้

8. ความสว่างและค่าความต่างของโทนสี

                ผู้ออกแบบเว็บเพจต้องระวังไม่ให้หน้าเว็บมีโทนสีเหลืองหรือสว่างจนเกินไป และควรเลือกใช้โทนสีที่ต่างกันพอสมควร

บทที่ 8 เลือกใช้สีสำหรับเว็บไซต์   

สีสันในเว็บเพจเป็นสิ่งสำคัญมากในการดึงดูดความสนใจ เนื่องจากสิ่งแรกที่ผู้ใช้มองเห็นจากเว็บคือ "สี"

- การเลือกสีพื้นใกล้เคียงกับสีตัวอักษร บางครั้งอาจสร้างความลำบากในการอ่าน
- การใช้สีที่มากเกินความจำเป็นอาจสร้างความสับสนให้กับผู้อ่านได้
- การใช้สีที่กลมกลืนกันช่วยให้เว็บไซต์น่าดูชมมากยิ่งขึ้น

ประโยชน์ของสีในเว็บไซต์

- สามารถชักนำสายตาของผู้อ่าน
- สร้างอารมณ์โดยรวมของเว็บเพจ
- ช่วยสร้างระเบียบให้กับข้อความ

การผสมสี (Color Mixing)

 มี 2 แบบ
1. การผสมแบบบวก (Additive mixing)

              เป็นรูปแบบการผสมของแสง ไม่ใช่การผสมของวัตถุที่มีสีบนกระดาษ จะนำไปใช้ในสื่อใดๆที่ใช้แสงส่องออกมา เช่น จอโปรเจคเตอร์
2. การผสมสีแบบลบ (Subtractive mixing)

              ไม่เกี่ยวกับแสง แต่เกี่ยวเนื่องกับการดูดกลืนและสะท้อนแสงของวัตถุต่างๆ ใช้กับวัตถุมีสี เช่น ภาพวาดของศิลปิน

รูปแบบชุดสีพื้นฐาน (Simple Color Schemes)

- ชุดสีร้อน เช่น สีแดง,ส้ม,เหลือง เกิดความรู้สึกน่าสนใจ

- ชุดสีเย็น เช่น สีม่วง,น้ำเงิน,ฟ้า เกิดความรู้สึกเย็นสบาย

- ชุดสีแบบเดียว เป็นรูปแบบชุดสีที่ง่ายที่สุด

- ชุดสีแบบสามเส้า ใช้ทั้ง 3 แม่สี ทำให้หน้าเว็บโดดเด่น มีชีวิตชีวา

- ชุดสีที่คล้ายคลึงกัน ประกอบด้วยสี 2 หรือ 3 สีที่อยู่ติดกันในวงล้อ เกิดความรู้สึกอบอุ่น

- ชุดสีตรงข้าม สีคู่ที่อยู่ตรงข้ามกันในวงล้อสี เกิดความรู้สึกสะดุดตา

- ชุดสีตรงข้ามข้างเคียง เปลี่ยนแปลงจากชุดสีตรงข้าม มีความหลากหลายที่เพิ่มขึ้น

- ชุดสีตรงข้ามข้างเคียงทั้ง 2 ด้าน มีความสดใสและความกลมกลืนของสีลดลง