บทที่ 6
การออกแบบหน้าเว็บ
- หน้าเว็บหน้าแรกเป็นส่วนสำคัญมากเพราะมีหน้าที่เป็นสื่อกลางให้ผู้ใช้เข้าถึงข้อมูลและระบบงานของเว็บนั้นได้
หลักสำคัญในการออกแบบหน้าเว็บ
- การใช้รูปภาพและองค์ประกอบต่าง ๆ ร่วมกันเพื่อสื่อความหมายเกี่ยวกับเนื้อหหาหรือลักษณะ
สำคัญของเว็บให้น่าสนใจ บนพื้นฐานของความเรีบยง่ายและสะดวกของผู้ใช้
เเนวคิดในการออกเเบบหน้าเว็บ
- เรียนรู้จากเว็บไซต์ต่างๆ
- ประยุกต์รูปแบบจากสื่อพิมพ์
- ใช้เเบบจำลองเปรียบเทียบ
- ประยุกต์รูปแบบจากสื่อพิมพ์
- ใช้เเบบจำลองเปรียบเทียบ
- ออกแบบอย่างสร้างสรรค์
หลักการออกเเบบหน้าเว็บ
1. สร้างลำดับชั้นความสำคัญขององค์ประกอบ
- จัดตำเเหน่งเเละลำดับขององค์ประกอบ เเสดงลำดับความสำคัญของ ข้อมูลที่ต้องการให้ผู้ใช้ได้รับเนื่องจากภาษาส่วนใหญ่จะอ่านจากซ้ายไปขวา เเละจากบนลงล่าง จึงควรจัดวางสิ่งที่สำคัญไว้ที่ส่วนบนหรือด้านซ้ายของหน้าอยู่เสมอ
หลักการออกเเบบหน้าเว็บ
1. สร้างลำดับชั้นความสำคัญขององค์ประกอบ
- จัดตำเเหน่งเเละลำดับขององค์ประกอบ เเสดงลำดับความสำคัญของ ข้อมูลที่ต้องการให้ผู้ใช้ได้รับเนื่องจากภาษาส่วนใหญ่จะอ่านจากซ้ายไปขวา เเละจากบนลงล่าง จึงควรจัดวางสิ่งที่สำคัญไว้ที่ส่วนบนหรือด้านซ้ายของหน้าอยู่เสมอ
2.สร้างรูปแบบบุคลิก เเละสไตล์
- การเลือกรูปแบบเว็บที่เหมาะสมจะช่วยสร้างความเข้าใจของผู้ใช้ได้ดีขึ้น
บุคลิกเว็บเเต่ละประเภทอาจมีบุคลิกลักษณะแตกต่างกัน ขึ้นอยู่กับเนื้อหาเเละเป้าหมายในการนำเสนอสไตล์ คือ ลักษณะการจัดโครงสร้างของหน้า ชนิดเเละการจัดตัวอักษร ชุดสีที่ใช้ รวมถึงองค์ประกอบอื่นๆ ซึ่งไม่ควรสร้างตามใจชอบ
- การเลือกรูปแบบเว็บที่เหมาะสมจะช่วยสร้างความเข้าใจของผู้ใช้ได้ดีขึ้น
บุคลิกเว็บเเต่ละประเภทอาจมีบุคลิกลักษณะแตกต่างกัน ขึ้นอยู่กับเนื้อหาเเละเป้าหมายในการนำเสนอสไตล์ คือ ลักษณะการจัดโครงสร้างของหน้า ชนิดเเละการจัดตัวอักษร ชุดสีที่ใช้ รวมถึงองค์ประกอบอื่นๆ ซึ่งไม่ควรสร้างตามใจชอบ
3.สร้างความสม่ำเสมอตลอดทั่วทั้งไซต์
- ความสม่ำเสมอของโครงสร้างเว็บเเละระบบเนวิเกชั่น ทำให้รู้สึกคุ้นเคยเเละสามารถคาดการณ์ลักษณะของเว็บได้ล่วงหน้า ทางด้านเทคนิดสามารถใช้ css กำหนดได้เพื่อให้เป็นมารตฐานเดียวกัน
- ความสม่ำเสมอของโครงสร้างเว็บเเละระบบเนวิเกชั่น ทำให้รู้สึกคุ้นเคยเเละสามารถคาดการณ์ลักษณะของเว็บได้ล่วงหน้า ทางด้านเทคนิดสามารถใช้ css กำหนดได้เพื่อให้เป็นมารตฐานเดียวกัน
4.จัดวางองค์ประกอบที่สำคัญไว้ในส่วนบนของหน้าเว็บเสมอประกอบด้วย
1.) ชื่อของเว็บ เพื่อให้ผู้ใช้ได้รู้ทันทีว่ากำลังอยู่ในเว็บอะไร
2.) ชื่อหัวเรื่อง
3.) สิ่งสำคัญที่เราต้องการโปรโมตเว็บ
4.) ระบบเนวิเกชั่น
5.สร้างจุดสนใจด้วยความแตกต่าง
- การจัดองค์ประกอบให้ภาพรวมของหน้าที่มีความแตกต่าง เป็นสิ่งที่สำคัญที่จะนำสายตาผู้อ่านไปยังบริเวณต่างๆโดยการใช้สีที่ต่างกัน
- การจัดองค์ประกอบให้ภาพรวมของหน้าที่มีความแตกต่าง เป็นสิ่งที่สำคัญที่จะนำสายตาผู้อ่านไปยังบริเวณต่างๆโดยการใช้สีที่ต่างกัน
6.จัดเเต่งหน้าเว็บให้เป็นระเบียบ
- เนื้อหาในหน้าเว็บจำเป็นต้องอยู่ในรูปแบบที่ดูง่าย เเยกเป็นสัดส่วน เเละดูไม่เเน่นจนเกินไป
- เนื้อหาในหน้าเว็บจำเป็นต้องอยู่ในรูปแบบที่ดูง่าย เเยกเป็นสัดส่วน เเละดูไม่เเน่นจนเกินไป
7.ใช้กราฟฟิกอย่างเหมาะสม
- ควรใช้กราฟิกที่เป็นไอคอน ปุ่ม ลายเส้น เเละสิ่งอื่นๆ ตามความเหมาะสมเเละไม่มากเกินไป เพื่อหลีกเลี่ยงโครงสร้างที่หยุ่งเหยิงเเละไม่เป็นระเบียบ
- ควรใช้กราฟิกที่เป็นไอคอน ปุ่ม ลายเส้น เเละสิ่งอื่นๆ ตามความเหมาะสมเเละไม่มากเกินไป เพื่อหลีกเลี่ยงโครงสร้างที่หยุ่งเหยิงเเละไม่เป็นระเบียบ
บทที่ 8
เลือกใช้สีสำหรับเว็บไซต์
- สีสันในเว็บเพจเป็นสิ่งที่สำคัญมากในการดึงดูดความสนใจของผู้ใช้
เนื่องจากสิ่งแรกที่ผู้ใช้มองเห็นจากเว็บก็คือสี ซึ่งเป็นสิ่งกำหนดบรรยากาศและความรู้สึกโดยของของเว็บไซต์
- เราสามารถใช้สีได้กับทุกองค์ประกอบของเว็บเพจ ตั้งแต่ รูปภาพ ตัวอักษร สีพื้นหลัง การใช้สีที่เหมาะสมจะช่วยในการสื่อความหมายของเนื้อหา
- การใช้สีพื้นใกล้เคียงกับสีตัวอักษร บางครั้งอาจสร้างความลำบากใจในการอ่าน
- การใช้สีที่มากเกินความจำเป็นอาจสร้างความสับสนให้กับผู้อ่านได้
ประโยชน์ของสีในเว็บไซต์
- สามารถชักสายตาผู้อ่านให้ไปยังทุกบริเวณในหน้าเว็บเพจ
ที่เราต้องการได้ เช่น ข้อมูลใหม่ หรือโปรโมชั่น
ที่เราต้องการได้ เช่น ข้อมูลใหม่ หรือโปรโมชั่น
- สีช่วยเชื่อมโยงบริกเวณที่ได้รับการออกแบบเข้าด้วยกัน
- สีสามารถนำไปใช้ในการแบ่งบริเวณต่าง ๆ ออกจากัน
- สีสามารถใช้ในการดึงดูดความสนใจของผู้อ่าน
- สีสามารถสร้างอารมณ์โดยรวมของเว็บเพจ
- ช่วยสร้างระเบียบให้กับข้อความต่างๆ เช่น ใช้สีแยกระหว่างหัวเรื่องกับเนื้อเรื่องสามารถส่งเสริมเอกลักษณ์ขององค์กรหรือหน่วยงานนั้นๆ
แม่สีขั้นที่ 2
แม่สีขั้นที่ 3
แม่สีขั้นที่ 4
การผสมสี (Color Mixing)มี 2 แบบ
- การผสมแบบบวก (Additive mixing)จะเป็นรูปแบบการผสม
ของแสง ไม่ใช่การผสมของวัตถุที่มีสีบนกระดาษ จะนำไปใช้ใน
สื่อใดๆที่ใช้แสงส่องออกมา เช่น จอโปรเจคเตอร์ ทีวี
ของแสง ไม่ใช่การผสมของวัตถุที่มีสีบนกระดาษ จะนำไปใช้ใน
สื่อใดๆที่ใช้แสงส่องออกมา เช่น จอโปรเจคเตอร์ ทีวี
- การผสมแบบลบ (Subtractive mixing)
การผสมสีแบบนี้ไม่เกี่ยวข้องกับแสง แต่เกียวเนื่องกับการดูด
กลืนและสะท้อนแสงของวัตถุ จะนำไปใช้วัตถุมีสี เช่น ภาพวาด
ของศิลปิน รูปปั้น หรือ สิ่งพิมพ์ต่างๆ
เป็นรูปแบบหนึ่งในการจัดเรียงสีทั้งหมดไว้ในวงกลม และ
เป็นการจัดลำดับเฉดสีอย่างมีเหตุผลและง่ายต่อการนำไปใช้
- วงล้อสีแบบลบ
- วงล้อสีแบบบวก
ความรู้เบื้องต้นเกี่ยวกับสี
แม่สีขั้นต้น (Primary color)
- สีแดง
- สีเหลือง
- สีน้ำเงิน
จัดรูปแบบตัวอักษรสำหรับเว็บไซต์
- ตัวอักษรมีความสำคัญในการสื่อข้อความถึงผู้ใช้ตัวอักษรมี
หลายชนิด แต่ละชนิดจะให้อารมณ์และความรู้สึกที่แตกต่างกัน ควรเลือกใช้ตัวอักษรให้
เหมาะสมกับเนื้อหาและข้อมูลที่ต้องการสื่อ
ส่วนประกอบของตัวอักษร
Ascender : ส่วนบนของตัวอักษรพิมพ์เล็กที่สูงกว่าความสูง x-height ของตัวอักษร
Descender : ส่วนล่างของตัวอักษรพิมพ์เล็กที่ต่ำกว่าเส้น baseline
Baseline : เส้นสมมติที่ตัวอักษรส่วนใหญ่ตั้งอยู่
Cap height : ความสูงจากเส้น baseline ไปถึงส่วนบนสุดของตัวอักษรพิมพ์ใหญ่
Point size : ระยะความสูงทั้งหมดวัดจากส่วนบนสุดถึงส่วนล่างสุดของตัวอักษร
X-height : ความสูงของตัวอักษร x ในแบบพิมพ์เล็ก ซึ่งมักใช้อ้างถึงความสูงของตัวอักษรที่ไม่รวม ascender และ descender
ค่าความสูง x-height จะมีผลต่อภาพรวมของตัวอักษรและความยากง่ายในการอ่าน
ความสะดวกในการอ่าน (Legibility)
หลีกเลี่ยงการใช้คำที่เป็นตัวพิมพ์ใหญ่ทั้งหมด เพราะจะทำให้อ่านยาก และลดความสะดุดตาลง การใช้ตัวพิมพ์เล็กทั้งหมดในประโยค จะสร้างความรู้สึกไม่เป็นทางการ และแสดงถึงความไม่สมบูรณ์ของเนื้อหา
การจัดข้อความในหน้าเว็บช่องว่างระหว่างตัวอักษรและระหว่างคำ
- ตัวอักษรบางคู่ที่อยู่ติดกันอาจมีระยะที่ไม่เหมาะสม จำเป็นต้องมีการปรับแต่งที่เรียกว่า Kerning เพื่อที่สายตาจะได้เคลื่อนที่อย่างราบเรียบและสม่ำเสมอ การจัดตำแหน่งแบบ justify ทำให้ช่องว่างของแต่ละคำแตกต่างไปในแต่ละบรรทัด ซึ่งอาจทำให้เกิดช่องว่างที่ไม่สวยงามได้
ความยาวของหน้าเว็บ
หน้าเว็บที่ยาวมาก ๆ จะทำให้ผู้ชมรู้สึกเหนื่อยล้าที่จะอ่านควรจัดแบ่งเป็น paragraph หรือ ตัดแบ่งเป็นหลาย ๆ หน้าขนาดของตัวอักษรขนาดของตัวอักษรใช้ตัวอักษรหลายขนาดเพื่อสร้างลำดับความสำคัญของข้อมูลลำดับในการอ่านโดยทั่วไป ผู้อ่านจะอ่านจากบนลงล่าง และจากซ้ายไปขวา
การใช้สีกับตัวอักษร
- กำหนดสีหลักสำหรับเว็บ
- ใช้สีของตัวอักษรอย่างมีความหมายสม่ำเสมอ
- ใช้สีที่แตกต่างกันในแต่ละส่วนข้อมูล
- กำหนดสีของ link ให้เหมาะสม