บทที่ 7 เลือกใช้สีสำหรับเว็บไซต์
เลือกใช้สีสำหรับเว็บไซต์ ( Designing Web Colors)
สีสันในหน้าเว็บเพจ เป็นสิ่งที่มีความสำคัญมากในการดึงดูดความสนใจของผู้ใช้ เนื่องจากสิ่งแรกที่พวกเขามองเห็นจากเว็บเพจก็คือ สี ซึ่งเป็นสิ่งกำหนดบรรยากาศและความรู้สึกโดยรวมของเว็บไซต์
ความรู้เบื้องต้นเกี่ยวกับสี
แม่สี ( primary color ) ประกอบด้วย สีแดง,เหลือง และน้ำเงิน ว่าเป็นแม่สีหลัก ก็เพราะว่าสีทั้งสามเป็นสีที่ไม่สามารถเกิดขึ้นจากการผสมของสีอื่นๆ
แสดงตัวอย่างสีขั้นต่างๆ
การผสมสีแบบบวก (Additive Mixing)
การผสมสีแบบบวกนี้ เป็นสิ่งที่ค่อนข้างยากในการทำความเข้าใจ เพราะมีหลักการที่ลบล้างสิ่งที่คุณถูกสอนมาในสมัยก่อน เรากำลังจะพูดถึงรูปแบบการผสมของแสง ไม่ใช่การผสมของวัตถุมีสีบนกระดาษ เนื่องจากแสงสีขาวประกอบด้วยลำแสงที่มีสีต่างๆตามความยาวคลื่นแสง ความยาวคลื่นแสงพื้นฐานได้แก่สีแดง เขียว และน้ำเงิน ไม่ใช่สีแดง เหลืองและน้ำเงินอย่างที่เราเข้าใจมาก่อน เมื่อคลื่นแสงเหล่านี้มีการซ้อนทับกันก็จะก่อให้เกิดการบวกและรวมตัวกันของความยาวคลื่นแสง จึงเป็นที่มาของชื่อ “สีแบบบวก”
การผสมสีแบบลบ (Subtractive Color Mixing)
การผสมสีแบบลบไม่ได้มีความเกี่ยวข้องกับเรื่องของลำแสงแต่อย่างใด ๆ แต่เกี่ยวเนื่องกับการดูดกลืนและสะท้อนแสงของวัตถุต่างๆ เมื่อแสงสีขาวส่องมายังวัตถุหนึ่งๆวัตถุนั้น จะดูดกลืนแสงที่ความยาวคลื่นบางระดับไว้และสะท้อนแสงที่เหลือออกมาให้เราเห็น สีขั้นต้นในรูปแบบนี้ประกอบด้วย สีแดงแกมม่วง (magenta) สีน้ำเงินแกมเขียว (cyan) และสีเหลือง ซึ่งไม่ใช่สีแดง เหลือง และน้ำเงินอย่างธรรมดาอย่างที่หลายๆคนเข้าใจ เมื่อมีการผสมของรงควัตถุหรือวัตถุมีสี จะเกิดการรวมกันของสีที่จะถูกดูดกลืนไว้ ทำให้ปริมาณแสงที่จะสะท้อนออกมาลดลง จึงเป็นที่มาของชื่อ “ สีแบบลบ ”
วงล้อสีแบบลบ ( Subtractive Color Wheel )
วงล้อสีแบบบวก(Additive ColorWheel )
บทที่ 8 การออกแบบกราฟิกสำหรับเว็บไซต์
ระบบการวัดขนาดของรูปภาพ
เมื่อจอมอนิเตอร์ทำการแสดงผลรูปภาพในเว็บเพจ พิกเซลในรูปภาพจะจับคู่กันแบบหนึ่งต่อหนึ่งกับพิกเซลตามความละเอียดของหน้าจอ ทำให้หน่วยการวัดรูปภาพในเว็บจึงเป็นพิกเซล ไม่ใช่นิ้วหรือเซ็นติเมตรแต่อย่างใด ดังนั้นในกระบวนการ ออกแบบกราฟิกและรูปภาพต่างๆ คุณจึงความลดขนาดเป็นพิกเซลไว้เสมอ ซึ่งจะมีประโยชน์ในการเปรียบเทียบขนาดกราฟิกกับองค์ประกอบอื่นๆ ในหน้าเว็บ รวามถึงขนาดวินโดว์ของบราวเซอร์อีกด้วย ระบบการวัดความละเอียดของรูปภาพ
ความละเอียดของรูปภาพ
โดยปรกติแล้ว รูปภาพทุกรูปในเว็บไซท์ควรจะมีความละเอียดแค่ 72 ppi ก็ เพียงพอแล้ว เรื่องจากจอมอนิเตอร์องผู้ใช้ส่วนใหญ่มีความละเอียดต่ำ (72 ppi) ดังนั้นแม้ว่ารูปภาพจะมีความละเอียดสูงกว่านี้เราก็ไม่อาจมองเห็นความแตกต่างได้
เมื่อเปรียบเทียบความละเอียดของรูปภาพในเว็บกับในสิ่งพิมพ์ คุณจะเห็นความแตกต่างกันว่ารูปภาพในเว็บมีคุณภาพที่ต่ำกว่า เนื่องจากมีข้อมูลและรายละเอียดของรูปภาพที่น้อยกว่าทำให้รูปที่ได้มองดูมีลักษณะเป็นจุดเล็กๆ ซึ่งถือเป็นธรรมชาติของรูปภาพในเว็บ
ปัญหาเกี่ยวกับขนาดไฟล์ของกราฟิก
แม้ว่ากราฟิกและรูปภาพต่างๆ จะช่วยสึความหมายและสร่างประโยชน์อีกหลายอย่าง เราควรรู้ถึงข้อเสียของกราฟิกเหล่านี้ไว้บ้าง โดยปรกติ แล้วข้อมูลในเว็บไซท์ประกอบด้วยไฟล์ HTML ที่เป็นตัวอักษร และกราฟิกหรือรูปภาพเป็นสิ่งสำคัญ กราฟิกใช้เวลาในการดาวน์โหลดมาก กว่าตัวอักษรหลายเท่า ดังนั้นกราฟิกขนาดใหญ่อาจใช้เวลาในการสแดงผลนานมาก เมื่อผู้ใช้ระบบการเชื่อต่อกับอินเตอร์เน็ทที่ค่อนข้างช้า
บทที่ 9 การจัดรูปแบบตัวอักษรสำหรับเว็บไซต์
ส่วนประกอบของตัวอักษร
ในแต่ละตัวอักษรประกอบด้วยส่วนต่าง ๆ ที่เราน่าจะรู้จักไว้ เพื่อที่จะใช้ประโยชน์เมื่อต้องการเปรียบเทียบลักษณะของตัวอักษณแต่ละชนิดได้ ส่วนประกอบหลัก ๆ ที่ควรรู้จัก มีดังนี้
- Ascender ส่วนบนของตัวอักษรพิมพ์เล็ก ที่สูงกว่าความสูง x-height ของตัวอักษร
- Descender ส่วนล่างของตัวอักษรพิมพ์เล็กที่ต่ำกว่าเส้น baseline ของตัวอักษร
- Baseline เส้นสมมุติที่ตัวอักษรส่วนใหญ่ตั้งอยู่
- Cap height ความสูงจากเส้น baseline ไปถึงส่วนบนสุดของตัวอักษรพิมพ์ใหญ่
- x-height หมายถึง ความสูงของตัวอักษร x ในแบบพิมพ์เล็ก ซึ่งมักจะใช้อ้างถึงความสูงของตัวอักษรที่ไม่รวมส่วนบนและส่วนล่าง
ขนาดของตัวอักษร
ขนาดของตัวอักษรมีผลต่อคุณสมบัติและลักษณะของเนื้อหาหลายประการ การเข้าถึงบทบาทและความสำคัญของขนาดตัวอักษร จะช่วยให้คุณออกแบบเว็บเพจที่สามารถดึงความสนใจของผู้อ่านไปยังข้อมูลที่ต้องการ และมีผลในการนำทางให้ผู้ใช้คลิกไปยังส่วนต่างๆ ได้ แนวทางต่อไปนี้จะช่วยให้คุณใช้ประโยชน์จากขนาดของตัวอักษรได้อย่างมีประสิทธิภาพ
การใช้สีกับตัวอักษร
สีเป็นองค์ประกอบที่มีประสิทธิภาพสูงในการนำเสนอบนเว็บ โดยจะช่วยตกแต่งโครงสร้างและรูปแบบของตัวอักษรให้ดูดียิ่งขึ้น
กำหนดสีหลักสำหรับเว็บ
เว็บไซท์ที่ดีอาจไม่จำเป็นต้องใช้สีจำนวนมากอย่างที่คิด โดยทั่วไปแล้วเว็บไซท์ต้องการสีหลักจำนวน ถึง 7 สีที่จะใช้ประจำสำหรับองค์ประกอบต่างๆ ในเว็บเพจ
ใช้สีของตัวอักษรอย่างมีความหมายและสม่ำเสมอ
ใช้สีของตัวอักษรอย่างมีความหมายและสม่ำเสมอ
เนื่องจากผู้ใช้จะมองเป็นความแตกต่างของสีได้อย่างรวดเร็ว การใช้สีของตัวอักษรที่ต่างกันตามลักษณะเนื้อหาเช่น หัวข้อ รายละเอียด และลิงค์อย่างสม่ำเสมอ จะทำให้ผู้ใช้คุ้นเคยและท่องไปในเว็บไซท์ได้อย่างสะดวกตลอดไซท์
ใช้สีที่แตกต่างกันในแต่ละส่วนข้อมูล
ลิงค์ไปยังข้อมูลหลายๆส่วน คุณอาจทดลองใช้สีที่ต่างกันในแต่ละย่อหน้า ช่วยให้ผู้อ่านได้รับข้อมูลที่เร็วขึ้นและถ้าเราใช้สีเหล่านี้อย่างสม่ำเสมอผู้อ่านก็จะคุ้นเคยและเข้าถึงข้อมูลได้สะดวกขึ้น ที่สำคัญคือคุณต้องแน่ใจว่าสีที่นำมาใช้เข้ากันได้กับสีขององค์ประกอบอื่นๆ
กำหนดสีของลิงค์ให้เหมาะสม
ในขั้นตอนการออกแบบลิงค์ คุณสามารถระบุสีให้กับสภาวะทั้งสามอย่างของลิงค์ ซึ่งได้แก่ ลิงค์ที่ยังไม่ได้คลิก ลิงค์ขณะที่คลิก และลิงค์ที่ได้ผ่านการลิกไปแล้ว ทั้งนี้การเลือกสีที่ใช้ความคำนึงถึงหน้าที่ของแต่ละสภาวะ
สีกับการพิมพ์เว็บเพจ
พิมพ์ข้อมูลจากเว็บแล้วควรจะออกแบบให้มีลํกษณะพิเศษที่เหมาะสมกับการพิมพ์ เช่นการใช้ตัวอักษรสีเย้มบนพื้นหลังสีอ่อนมีผู้ออกแบบจำนวนมากที่ใช้พื้นหลังเป็นสีเข้มกับตัวอักษรสีขาว โดยอาจลืมคิดไปว่า ปกติแล้วสีพื้นหลังจะไม่ถูกพิมพ์ออกมาด้วยคือกลายเป็นสีขาวไป ทำให้ไม่สามารถพิมพ์ตัวอักษรสีขาวบนพื้นขาวได้ หรือถ้ามีการกำหนดให้พิมพ์สีพื้นหลังออกมาด้วยก็จะเป็นการสิ้นเปลื้องหนึกพิมพ์อย่างไม่สมควรนัก