บทที่ 8 เลือกใช้สีสำหรับเว็บไซต์
- สีสันในเว็บเพจเป็นสิ่งที่สำคัญมากในการดึงดูดความสนใจของผู้ใช้
เนื่องจากสิ่งแรกที่ผู้ใช้มองเห็นจากเว็บก็คือสี ซึ่งเป็นสิ่งกำหนดบรรยากาศ
และความรู้สึกโดยรวมของเว็บไซต์
- การใช้สีพื้นใกล้เคียงกับสีตัวอักษร บางครั้งอาจสร้างความลำบากในการอ่าน
- การใช้สีที่มากเกินความจำเป็นอาจสร้างความสับสนให้กับผู้อ่านได้
- การใช้สีที่กลมกลืนกันช่วยให้เว็บไซต์น่าดูชมมากยิ่งขึ้น
ประโยชน์ของสีในเว็บไซต์
- สามารถชักนำสายตาผู้อ่านให้ไปยังทุกบริเวณในหน้าเว็บเพจ
ที่ต้องการได้ เช่น ข้อมูลใหม่ หรือโปรโมชั่นพิเศษ
- สีช่วยเชื่องโยงบริเวณที่ได้รับการออกแบบเข้าด้วยกัน
- สีสามารถนำไปใช้ในการแบ่งบริเวณต่างๆออกจากกัน
- สีสามารถใช้ในการดึงดูดความสนใจของผู้อ่าน
- สีสามารถสร้างอารมณ์โดยรวมของเว็บเพจ
- ช่วยสร้างระเบียบให้กับข้อความต่างๆ เช่น ใช้สีแยกระหว่างหัวเรื่องกับเนื้อเรื่อง
- สามารถส่งเสริมเอกลักษณ์ขององค์กรหรือหน่วยงานนั้นๆ
ความรู้เบื้อต้นเกี่ยวกับสี
- มีสีขั้นต้น ( Primary color )
* สีแดง
* สีเหลือง
* สีน้ำเงิน
- สีขั้นที่ 2
- สีขั้นที่ 3
- สีขั้นที่ 4
ชุดสีร้อน ( Warm Color Scheme )
ชุดสีร้อนประกอบด้วยสีม่วงแกมแดง , แดงแกมม่วง , แดง , ส้ม , เหลือง และเขียวอมเหลือง สีเหล่านี้สร้างความรู้สึกอบอุ่น สบาย และความรู้สึกต้อนรับแก่ผู้ชม ช่วยดึงดูดความสนใจได้ง่าย ในทางจิตวิทยาสีร้อนมีความสัมพันธ์กับความสุข สะดวก สบาย สีต่างๆในชุดสีร้อนมีความกลมกลืนอยู่ในตัวเอง ขณะที่อาจจะดูไม่น่าสนใจบ้าง เพราะขาดสีประกอบที่ตัดกันอย่างชัดเจน
ชุดสีเย็น ( Cool Color Scheme )
ชุดสีเย็นประกอบด้วยสีม่วง , น้ำเงิน , น้ำเงินอ่อน , ฟ้า , น้ำเงินแกมเขียว และสีเขียว ตรงกันข้ามกับชุดสีร้อน ชุดสีเย็นให้ความรู้สึกเย็นสบาย องค์ประกอ บที่ใช้สีเย็นเหล่านี้จะดูสุภาพเรียบร้อย และมีความชำนาญ แต่ในทางจิตวิทยา สีเย็นเหล่านี้กลับมีความสัมพันธ์กับความซึมเศร้าหดหู่และเสียใจ นอกจากนั้น ชุดสีเย็นมีความกลมกลืนกันโดยธรรมชาติ แต่อาจจะดูไม่น่าสนใจในบางครั้ง เพราะขาดความแตกต่างของสีที่เด่นชัด
ชุดสีแบบสีเดียว (Monochromatic Color Scheme)
รูปแบบของชุดสีที่ง่ายที่สุดคือชุดแบบสีเดียวที่มีค่าของสีบริสุทธิ์เพียงสีเดียว ความหากหวายของสีชุดนี้เกิดจากการเพิ่มสีเดียว ความหลากหลายของสีชุดนี้เกิดจากการเพิ่มความเข้มหรือความเข้มหรือความอ่อนในระดับต่างๆ ให้กับสีตั้งต้น ดังนั้น ชุดสีแบบเดียวของสีแดงอาจประกอบด้วยสีแดงล้วน สีแดงอิฐ(สีเข้ม ของสีแดง) สีสตรอเบอรี่(สีอ่อนปานกลางของสีแดง) ละชมพู(สีอ่อนมากของสีชมพู)
ชุดสีแบบสามเส้า (Triadic Color Scheme)
ชุดสีแบบสามเส้ามีข้อได้เปรีบยตรงที่มีเสถียรภาพสูง เพราะแต่ละสีมีความสมดุลอย่างสมบูรณ์แบบกับอีกสองสีที่เหลือ และรูปแบบนี้ยังมีลักษณะของความเคลื่อนไหว เนื่องจากแต่ละสีมีการชักนำไปสู่กันและกัน ตามกระบวนการธรรมชาติ ทำให้มีลักษณะเด่นในด้านความีชีวิตชีวา ซึ่งเป็นประโยชน์ในการนำเสนอข้อมูลในรูปแบบที่ชัดเจน แน่นอน แต่บางครั้งความสดใสดังกล่วงอาจมีลักษณะที่ฉูดฉาดเกินไปจนไปรบกวนการสื่อสารความหมายที่แท้จริงได้
ชุดสีที่คล้ายคลึงกัน (Analogous Color Scheme)
สีที่มีรูปแบบอย่างง่ายอีกแบบหนึ่ง ก็คือชุดสีที่คล้ายคลึงกัน ซึ่งจะประกอบด้วยสี 2 หรือ 3 สีที่อยู่ติดกันในวงล้อสี เช่นสีแดงแกมม่วง สีแดง และสีส้ม เนื่องจากชุดสีที่อยู่ในรูปแบบนี้มีจำนวนมากมายทำให้เราสามารถเลือกชุดสีแบบนี้มาใช้งานได้อย่างง่ายสะดวก และแม้ว่าเราสามารถเพิ่มจำนวนสีในชุดให้มากขึ้นเป็น 4 หรือ 5 สีได้ แต่กลับจะมีผลให้ขอบเขตของสีที่มีความกว้างเกินไป ทำให้สีอยู่ตรงปลายทั้งสองของชุดไม่มีความสัมพันธ์กัน เป็นสาเหตุให้ลักษณะการที่อยู่ตรงปลายทั้งสองชุดไม่มีความสัมพันธ์ เป็นสาเหตุให้ลักษณะการที่มีสีคล้ายคลึงกันลดลง
ชุดสีตรงข้าม (Complementary Color Scheme)
สีตรงข้ามในที่นี้ หมายถึง สีที่อยู่ตรงกันข้ามกันในวงล้อสี เช่น สีแดงกับฟ้า หรือสีน้ำเงินอ่อนกับส้มน่าสนใจที่ว่าเมื่อนำสีทั้งสองนี้มาผสมกัน จะได้ผลลัพธ์เป็นสีขาวสำหรับวงล้อสีแบบบวก หรือได้เป็นสีดำสำหรับวงล้อสีแบบลบ ที่เป็นเช่นนี้ก็เนื่องจากว่าสีแต่ละสีที่อยู่ตรงข้ามกัน จะมีอัตราส่วนของสีขั้นต้นที่ผกผันกัน ตัวอย่างเช่น สีแดงในวงล้อสีแบบบวกมีสีที่ตรงข้ามเป็นสีน้ำเงินแกมเขียว ซึ่งเป็นส่วนผสมจากสีน้ำเงินและเขียว จึงทำให้สีทั้งสองรวมกันยังได้เป็นสีขาวอีกเช่นเดิม จากคุณสมบัตินี้เราอาจเรียกสีคู่นี้ว่าเป็น “สีเติมเต็ม” ก็ได้
ชุดสีตรงข้ามข้างเคียง (Split Complementary Color Scheme)
ชุดสีตรงข้ามข้างเคียงมีรูปแบบที่เปลี่ยนแปลงมาจากชุดสีตรงข้าม แต่ละความแตกต่างกันที่สีใดสีหนึ่งที่อยู่ตรงข้ามกันถูกแทนที่ด้วยสีที่อยูด้านข้างทั้งสอง เช่น สีฟ้าซึ่งมีสีด้านข้างเป็นสีน้ำเงินอ่อนกับสีน้ำเงินแกมเขียว ฉะนั้นชุดสีตรงข้ามข้างเคียงที่ได้จึงประกอบด้วย สีแดง สีน้ำเงินอ่อน และสีน้ำเงินแกมเขียว
ชุดสีตรงข้ามข้างเคียงทั้ง 2 ด้าน (Double Split Complementary Color Scheme)
ชุดสีแบบนี้ถูกดัดแปลงมาจากชุดสีตรงข้าม เช่นกัน แต่คราวนี้สีตรงกันข้ามทั้งสองถูกแบ่งแยกเป็นสีด้านข้างทั้ง 2 ด้าน จึงได้เป็นชุดสี 4 สี ดังเช่นสีแดงแกมม่วงกับน้ำเงินแกมเขียว และน้ำเงินอ่อนกับส้ม ข้อได้เปรียบที่เห็นได้ชัดคือ ความหลากหลายที่เพิ่มขึ้นจากชุดสีตรงข้ามแบบแบ่งแยก ส่วนข้อเสียเปรียบก็ยังมีลักษณะเช่นเดิมที่ความสดใสและความกลมกลืนของสีลดลง
******************************************************
บทที่ 9 การออกแบบกราฟิกสำหรับเว็บไซต์
ระบบการวัดขนาดของรูปภาพ
เมื่อจอมอนิเตอร์ทำการแสดงผลรูปภาพในเว็บเพจ พิกเซลในรูปภาพจะจับคู่กันแบบหนึ่งต่อหนึ่งกับพิกเซลตามความละเอียดของหน้าจอ ทำให้หน่วยการวัดรูปภาพในเว็บจึงเป็นพิกเซล ไม่ใช่นิ้วหรือเซ็นติเมตรแต่อย่างใด ดังนั้นในกระบวนการ ออกแบบกราฟิกและรูปภาพต่างๆ คุณจึงความลดขนาดเป็นพิกเซลไว้เสมอ ซึ่งจะมีประโยชน์ในการเปรียบเทียบขนาดกราฟิกกับองค์ประกอบอื่นๆ ในหน้าเว็บ รวามถึงขนาดวินโดว์ของบราวเซอร์อีกด้วย
ความละเอียดของรูปภาพ
โดยปรกติแล้ว รูปภาพทุกรูปในเว็บไซท์ควรจะมีความละเอียดแค่ 72 ppi ก็ เพียงพอแล้ว เรื่องจากจอมอนิเตอร์องผู้ใช้ส่วนใหญ่มีความละเอียดต่ำ (72 ppi) ดังนั้นแม้ว่ารูปภาพจะมีความละเอียดสูงกว่านี้เราก็ไม่อาจมองเห็นความแตกต่างได้
ปัญหาเกี่ยวกับขนาดไฟล์ของกราฟิก
แม้ว่ากราฟิกและรูปภาพต่างๆ จะช่วยสึความหมายและสร่างประโยชน์อีกหลายอย่าง เราควรรู้ถึงข้อเสียของกราฟิกเหล่านี้ไว้บ้าง โดยปรกติ แล้วข้อมูลในเว็บไซท์ประกอบด้วยไฟล์ HTML ที่เป็นตัวอักษร และกราฟิกหรือรูปภาพเป็นสิ่งสำคัญ กราฟิกใช้เวลาในการดาวน์โหลดมาก กว่าตัวอักษรหลายเท่า ดังนั้นกราฟิกขนาดใหญ่อาจใช้เวลาในการสแดงผลนานมาก เมื่อผู้ใช้ระบบการเชื่อต่อกับอินเตอร์เน็ทที่ค่อนข้างช้า
ลดขนาดไฟล์กราฟิกสำหรับเว็บ (Optimizing Web Graphic)
ปัญหาความเชื่องช้าของอินเตอร์เน็ททำให้ผู้ออกแบบเว็บไซท์ต้องระมัดระวังในเรื่องของเวลาที่ใช้ในการดาวน์โหลดเป็นอย่างมาก แนวทางง่ายๆ สำหรับผู้มีหน้าที่ออกแบบกราฟิกำหรับเว็บก็คือพยายามทำให้กราฟิกมีขนาดเล็กมากที่สุดเท่าที่จะเป็นไปได้
ใดๆ เลยย่อมไม่น่าสนใจ เพราะกราฟิกมีบทบาทสำคัญในการแนะนำ และสร้างความบันเทิงต่อผู้ชม ดังนนั้นแนวทางที่ดีที่สุดคือการสร้างเว็บที่มีประสิทธิภาพ โดยใช้กราฟิกที่แสดงผลได้อย่างรวดเร็ว ทั้งนี้ผู้ออกแบบต้องรู้จักที่จะสร้างความสมดุลระหว่างความสวยงามกับความเร็วในการแสดงผลเรื่องจากการสร้างเว็บโดยไม่มีรูปภาพกราฟิก
******************************************************
บทที่ 10 การจัดรูปแบบตัวอักษรสำหรับเว็บไซต์
ส่วนประกอบของตัวอักษร
ในแต่ละตัวอักษรประกอบด้วยส่วนต่าง ๆ ที่เราน่าจะรู้จักไว้ เพื่อที่จะใช้ประโยชน์เมื่อต้องการเปรียบเทียบ
ลักษณะของตัวอักษณแต่ละชนิดได้ ส่วนประกอบหลัก ๆ ที่ควรรู้จัก มีดังนี้
- Ascender ส่วนบนของตัวอักษรพิมพ์เล็ก ที่สูงกว่าความสูง x-height ของตัวอักษร
- Descender ส่วนล่างของตัวอักษรพิมพ์เล็กที่ต่ำกว่าเส้น baseline ของตัวอักษร
- Baseline เส้นสมมุติที่ตัวอักษรส่วนใหญ่ตั้งอยู่
- Cap height ความสูงจากเส้น baseline ไปถึงส่วนบนสุดของตัวอักษรพิมพ์ใหญ่
- x-height หมายถึง ความสูงของตัวอักษร x ในแบบพิมพ์เล็ก ซึ่งมักจะใช้อ้างถึง
ความสูงของตัวอักษรที่ไม่รวมส่วนบนและส่วนล่าง
- point size ระยะความสูงทั้งหมดวัดจากส่วนบนสุดถึงส่วนล่างสุดของตัวอักษร
การจัดตำแหน่ง (Alignment)
การจำตำแหน่งของตัวอักษรในแต่ละส่วนมีผลต่อความรู้สึกของเอกสารโดยที่การจัดตำแหน่งแต่ละแบบจะให้ความรู้สึกที่ต่างกัน ตัวอักษรที่ถูกจัดให้ชิดขอบด้านซ้ายโดยที่ปล่อยให้ด้านขวามีลักษณะไม่สม่ำเสมอ จะให้ความรู้สึกไม่เป็นทางการ และจะอ่านได้ง่ายกว่าการจัดชิดขอบขวา โดยทั่วไปแล้วพยายามหลีกเลี่ยงการจัดชิดขวายกเว้นเมื่อมีความเหมาะสมกับรูปแบบจริงๆ ส่วนตัวอักษรที่มีการปรับระยะให้ชิดขอบทั้งซ้ายและขวา (Justify) เป็นที่นิยมใช้ในหนังสือพิมพ์และจุลสาร พร้อมกับให้คามรู้สึกที่เป็นทางการอีกด้วย
ความสะดวกในการอ่าน
1. หลีกเลี่ยงตัวอักษรที่เป็นตัวพิมพ์ใหญ่ทั้งหมด
2. การใช้ตัวอักษรพิมพ์เล็กทั้งหมดในประโยค สร้างความรู้สึกไม่เป็นทางการและแสดงถึงความสมบูรณ์ของเนื้อหา
2. การใช้ตัวอักษรพิมพ์เล็กทั้งหมดในประโยค สร้างความรู้สึกไม่เป็นทางการและแสดงถึงความสมบูรณ์ของเนื้อหา
3. การจัดข้อความในหน้าเว็บ
4. การจัดตำแหน่ง Alignment
5. การจัดข้อความในหน้าเว็บ
6. จัดแบบ justifyทำให้ช่องว่างในแต่ละคำแตกต่างไปในแต่ละบรรทัด ซึ่งอาจทำให้เกิดช่องว่างที่ไม่สวยได้
7. ความยาวของหน้าเว็บควรจัดเป็นแบบพารากราฟหรือตัดแบ่งเป็นหลายๆหน้า
8. ขนาดของตัวอักษร ใช้ตัวอักษรให้หลายขนาดเพื่อสร้าง ลำดับความสำคัญของข้อมูล
9. เน้นข้อความให้เด่นชัดเพื่อสร้างจุดดึงดูดสายตาของผู้เข้าชม
