บทที่
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 การออกแบบเว็บไซต์ให้เหมาะกับสิ่งแวดล้อม เบราเซอร์ที่ใช้- เบราเซอร์ คือ โปรแกรที่ใช้เรียกดูเว็บ
สามารถแสดงได้ทั้งตัวอักษร รูปภาพ และภาพเคลื่อนไหว เบราเซอร์ที่ได้ความนิยม
เช่น Google Chrome ,
IE, Opera มาตรฐานกลางของเบราเซอร์ คือ W3C
- เป็นองค์กรที่กำหนดคุณสมบัติของเบราเซอร์
เราควรออกแบบตามคุณสมบัติดังนี้
1.
สามารถใช้ได้กลับเบราเซอร์ได้ทุกรุ่น
2.
เว็บไซต์สำหรับเบราเซอร์รุ่นล่าสุด
3.
เว็บไซต์ตามความสามารถของเบราเซอร์
4.
เว็บไซต์ที่มีหลายรูปแบบ
ระบบปฏิบัติการของคอมพิวเตอร์- เป็นระบบที่เป็นปัจจัยหลักต่อ
มีผลต่อการทำง่านของเบราเซอร์มาก
โดยแต่ละระบบปฏิบัติการจะมีความแตกต่างกันในเรื่องของชนิดและรุ่น ของ เบราเซอร์ที่ใช้ได้ ระดับความละเอียดของหน้าจอ ชุดสีของระบบ
และชนิดของตัวอักษรที่มาพร้อมกับระบบ
ความละเอียดของหน้าจอ- ความละเอียดของหน้าจอ (monitor resolution)มีหน่วยเป้น
pixel ความละเอียดของหน้าจอไม่ขึ้นกับขนาดของมอนิเตอร์ที่ใช้ แต่ จะขึ้นกับประสิทธิภาพของการ์ดแสดงผลว่าสามารถทำได้ได้ละเอีวดแค่ไหน
การออกแบบหน้าจอผู้ใช้ส่วนใหญ่จะชอบหน้าเว็บที่เปิดมาแล้วสมบูรณ์
จำนวนสีที่จอของผู้ใช้สามารถแสดงได้- มอนิเตอร์ มีความสามารถใหการแสดงสีแตกต่างกน
ขึ้นอยู่กับประสิทธิภาพของการ์ดจอ จำนวนหน่วยความจำในการ์ดจอมากขึ้นจะทำให้สามารถแสดงสีได้มากขึ้น จำนวน สีที่การ์ดจอสามารถแสดงได้นั้น
ขึ้นอยู่กับค่าความละเอียดของสีที่เรียกว่า bit depth and color depth
ซึ่งก็คือจำนวนบิตที่ใช้ในการเก็บข้อมูลแค่ละพิกเซล
- ขุดสีสำหรับเว็บ (Web palette) หมายถึว
ชุดสีจำนวน 216 สีที่มีอยู่เหมือนกันในระบบปฏิบัติการ Windows
and Mac
ชนิดของตัวอักษรที่มีอยู่ในเครื่อง
ชนิดของตัวอักษรมี 2 แบบ
- MS Sans Serif VS Microsoft Sans Serif
- MS Sans Serif เป็นฟอนต์แบบชิตแมท
ซึ่งออกแบบขึ้นจากจุดของพิกเซล
โดยมีการออกแบบแต่ละตัวอักษรไว้เป็นขนาดที่แน่นอน Microsoft Sans
Serif เป็นฟอนด์ที่มีโครงสร้างของอักขระเป็นแบบเวคเตอร์หรือลายเส้น
โอยมีกรออกแบบเอาท์ไลน์ไว้เพียงแบบเดียวแต่สามารถปรับขนาดได้อย่างไม่จำกัดตัวอักษรแบบกราฟิก
(Graphic Text)
ความเร็วในการเชื่อมต่ออินเตอร์เน็ต ความสว่างและค่าความต่างของโทนสี บทที่ 8 เลือกใช้สีสำหรับเว็บไซต์
- การเลือกสีพื้นใกล้เคียงกับสีตัวอักษร
บางครั้งอาจสร้างความลำบากในการอ่าน
- การใช้สีที่มากเกินความจำเป็นอาจสร้างความสับสนให้กับผู้อ่านได้
- การใช้สีที่กลมกลืนกันช่วยให้เว็บไซต์น่าดูชมมากยิ่งขึ้น
ประโยชน์ของสีในเว็บไซต์- สามารถชักนำสายตาของผู้อ่าน
- สร้างอารมณ์โดยรวมของเว็บเพจ
- ช่วยสร้างระเบียบให้กับข้อความ
การผสมสี (Color Mixing)
มี 2 แบบ
1. การผสมแบบบวก (Additive mixing)
1. การผสมแบบบวก (Additive mixing)
เป็นรูปแบบการผสมของแสง
ไม่ใช่การผสมของวัตถุที่มีสีบนกระดาษ จะนำไปใช้ในสื่อใดๆที่ใช้แสงส่องออกมา เช่น จอ โปรเจคเตอร์
2. การผสมสีแบบลบ (Subtractive mixing)
2. การผสมสีแบบลบ (Subtractive mixing)
ไม่เกี่ยวกับแสง
แต่เกี่ยวเนื่องกับการดูดกลืนและสะท้อนแสงของวัตถุต่างๆ ใช้กับวัตถุมีสี เช่น
ภาพวาดของศิลปิน
รูปแบบชุดสีพื้นฐาน (Simple Color Schemes)
- ชุดสีร้อน เช่น สีแดง,ส้ม,เหลือง
เกิดความรู้สึกน่าสนใจ
- ชุดสีเย็น เช่น
สีม่วง,น้ำเงิน,ฟ้า
เกิดความรู้สึกเย็นสบาย
- ชุดสีแบบเดียว
เป็นรูปแบบชุดสีที่ง่ายที่สุด
- ชุดสีแบบสามเส้า
ใช้ทั้ง 3 แม่สี ทำให้หน้าเว็บโดดเด่น มีชีวิตชีวา
- ชุดสีที่คล้ายคลึงกัน
ประกอบด้วยสี 2 หรือ 3 สีที่อยู่ติดกันในวงล้อ เกิดความรู้สึกอบอุ่น
- ชุดสีตรงข้าม
สีคู่ที่อยู่ตรงข้ามกันในวงล้อสี เกิดความรู้สึกสะดุดตา
- ชุดสีตรงข้ามข้างเคียง
เปลี่ยนแปลงจากชุดสีตรงข้าม มีความหลากหลายที่เพิ่มขึ้น
- ชุดสีตรงข้ามข้างเคียงทั้ง 2 ด้าน มีความสดใสและความกลมกลืนของสีลดลง