เลือกใช้สีสำหรับเว็บไซต์ Designing Web Colors
เลือกใช้สีสำหรับเว็บไซต์
- สีสันในเว็บเป็นสิ่งที่สำคัญมากในการดึงดูดความสนใจของผู้ใช้ เนื่องจากสิ่งแรกที่ผู้ใช้มองเห็น จากเว็บก็คือสี ซึ่งเป็นสิ่งกำหนดบรรยากาศและความรู้สึกของเว็บไซต์
- เราสามารถใช้สีกับทุกองค์ประกอบของเว็บเพจ ตั้งแต่รูปภาพ ตัวอักษร สีพื้นหลัง การใช้สีที่เหมาะสมจะช่วยในการสื่อความหมายของเนื้อหา
- การใช้สีพื้นใกล้เคียงกับสีตัวอักษร บางครั้งอาจสร้างความลำบากในการอ่าน
- การใช้สีที่มากเกินความจำเป็นอาจสร้างความสับสนให้กับผู้อ่าน
- การใช้สีที่กลมกลืนกันช่วยให้เว็บไซต์น่าดูชมมากยิ่งขึ้น
ประโยชน์ของสีในเว็บไซต์
- สามารถชักนำสายตาผู้อ่านให้ไปยังทุกบริเวณในหน้าเว็บเพจที่เราต้องการได้ เช่น ข้อมูลใหม่ หรือ
โปรโมชั่นพิเศษ
- สีช่วยเชื่อมโยงบริเวณที่ได้รับการออกแบบเข้าด้วยกัน
- สีสามารถนำไปใช้ในการแบ่งบริเวณต่าง ๆ ออกจากกัน
- สีสามารถใช้ในการดึงดูดความสามารถของผู้อ่าน
- สีสามารถสร้างอารมณ์โดยรวมของเว็บเพจ
- ช่วยสร้างระเบียบให้กับข้อความต่าง ๆ เช่น ใช้สีแยกระหว่างหัวเรื่องกับเนื้อเรื่อง
- สามารถส่งเสริมเอกลักษณ์ขององค์กรหรือหน่วยงานนั้น ๆ
การผสมสี (Color Mixing) มี 2 แบบ
1. การผสมแบบบวก (Additive mixing) จะเป็นรูปแบบการผสมของแสง ไม่ใช่การผสมของวัตถุที่มีสีบนกระดาษ สามารถนำไปใช้ในสื่อใด ๆ ที่ใช้แสงส่องออกมา เช่น จอโปรเจคเตอร์ ทีวี
2. การผสมแบบลบ (Subtractive mixing) การผสมสีแบบนี้ไม่เกี่ยวข้องกับแสง แต่เกี่ยวเนื่องกับการดูดกลืนและสะท้อนแสงของวัตถุต่าง ๆ สามารถนำไปใช้ในสื่อที่เกี่ยวข้องกับการใช้วัตถุมีสี เช่น ภาพวาดของศิลปิน รูปปั้น หรือ สิ่งพิมพ์ต่าง ๆ
ความกลมกลืนของสี
- ความเป็นระเบียบของสี ที่ทำให้ผู้ชมรู้สึกถึงความสมดุล และความสวยงามในเวลาเดียวกัน
*การใช้สีที่จืดชืดเกินไป จะทำให้เกิดความรู้สึกที่น่าเบื่อ และไม่สามารถดึงดูดความสนใจจาก ผู้ชมได้
* การใช้สีที่มากเกินไป ก็จะดูวุ่นวาย ขาดระเบียบ และอาจสร้างความสับสนให้กับผู้ชม
- เป้าหมายในเรื่องสี คือการนำเสนอเว็บไซต์โดยใช้ชุดสีในรูปแบบที่เข้าใจได้ง่าย น่าสนใจ
และสื่อความหมายได้อย่างเหมาะสม
และสื่อความหมายได้อย่างเหมาะสม
รูปแบบชุดสีพื้นฐาน (Simple Color Schemes)
1. ชุดสีร้อน (Warm Color Scheme) ประกอบด้วยสีม่วง , น้ำเงิน , น้ำเงินอ่อน , ฟ้า , ฟ้าเงินแกมเขียว และสีเขียว โดยจะให้ความรู้สึกเย็นสบาย องค์ประกอบที่ใช้สีเย็นจะดูสุภาพ เรียบร้อย
2. ชุดสีแบบเดียว (Monochromatic Color Scheme) เป็นรูปแบบชุดสีที่ง่ายที่สุด คือมีค่าของสีบริสุทธิ์เพียงสีเดียว แต่เพิ่มความหลากหลายโดยการเพิ่มความเข้ม อ่อนในระดับต่าง ๆ และชุดสีแบบนี้ค่อนข้างจะมีความกลมกลืนเป็นหนึ่งเดียว แต่ในบางครั้งอาจทำให้ดูไม่มีชีวิตชีวา เพราะขาดความหลากหลายของสี
3. ชุดสีที่คล้ายคลึงกัน (Analogous Color Scheme) ประกอบด้วยสี 2 หรือ 3 สีที่ติดอยู่กันในวงล้อ สามารถเพิ่มเป็น 4 หรือ 5 สีได้ แต่อาจส่งผลให้ขอบเขตของสีกว้างไป
4. ชุดสีตรงข้ามข้างเคียง (Split Complementary Color Scheme) เป็นชุดสีที่เปลี่ยนแปลงมาจากชุดสีตรงข้าม และชุดสีแบบนี้มีความหลากหลายเพิ่มขึ้น แต่จะมีผลให้ความสดใส ความสะดุดตา และความเข้ากันของสีลดลงด้วย
5. ชุดสีตรงข้ามข้างเคียงทั้ง 2 ด้าน (Double Split Complementary Color Scheme) ดัดแปลงมาจากชุดสีตรงข้ามเช่นกัน แต่สีตรงข้ามทั้ง 2 สีถูกแบ่งแยกเป็นสีด้านข้างทั้ง 2 ด้าน และชุดสีแบบนี้มีความหลากหลายของสีที่มากขึ้น แต่จะมีความสดใสและกลมกลืนของสีที่ลดลง
6. ชุดสีเย็น (Cool Color Scheme) เว็บเพจที่ใช้โทนสีเย็น ให้บรรยากาศคล้ายทะเล รู้สึกเย็นสบาย
7. ชุดสีแบบสามเส้า (Triadic Color Scheme) เป็นชุดสีที่อยู่ที่มุมของสามเหลี่ยมด้านเท่าทั้งสาม ซึ่งเป็นสีที่มีระยะห่างในวงล้อสีเท่ากัน จึงมีความเข้ากันอย่างลงตัว
8. ชุดสีตรงข้าม (Complementary Color Scheme) คือสีที่อยู่ตรงข้ามกันในวงล้อสี เมื่อนำสีทั้งสองมาใช้คู่กัน จะทำให้สีทั้งสองมีความสว่างและสดใสมากขึ้น
การออกแบบเว็บไซต์ให้เหมาะกับสิ่งแวดล้อม Design for a variety of Web Environments
ปัจจัยหลักที่เกี่ยวข้องกับการท่องเว็บไซต์
เบราเซอร์ที่ใช้
เบราเซอร์ที่ใช้
ระบบปฏิบัติการของคอมพิวเตอร์
ความละเอียดของหน้าจอ
จำนวนสีที่จอผู้ใช้สามารถแสดงได้
ชนิดของตัวอักษรที่มีอยู่ในเครื่องของผู้ใช้
ความเร็วในการเชื่อมต่ออินเตอร์เน็ต
ขนาดหน้าต่างเบราเซอร์
ความสว่างและค่าความต่างของโทนสี
บราเซอร์ที่ใช้
เบราเซอร์คือโปรแกรมที่ใช้เรียกดูเว็บเพจโดยสามารถแสดงผลได้ทั้งรูปแบบตัวอักษร,รูปภาพและภาพเคลื่อนไหวมีเบราเซอร์หลายชนิดที่ได้รับความนิยมเช่น
=> Internet Explorer
=> Netscape Navigator
=> The World
=> Opera
=> Mozilla
=> Firefox
การออกแบบเว็บไซต์ตามคุณสมบัติของเบราเซอร์
=> เว็บไซต์สำหรับเบราเซอร์ทุกชนิด
=> เว็บไซต์สำหรับเบราเซอร์รุ่นล่าสุด
=> เว็บไซต์ตามความสามรถของเบราเซอร์
ð เว็บไซต์ที่มีหลายรูปแบบ
ระบบปฏิบัติการ(Opreating System)
ระบบปฏิบัติการเป็นปัจจัยที่มีผลการทำงานต่อเบราเซอร์มากโดยแต่ระบบปฏิบัติการจะมีความแตกต่างกันในเรื่องของชนิดและรุ่นของเบราเซอร์ที่ใช้ได้,ระดับความละเอียดของหน้าจอ, ชุดสีของระบบและชนิดของตัวอักษรที่มาพร้อมกับระบบ เป็นต้น
=> การแสดงผลของ Windows จะมีขนาดใหญ่กว่า Mac เล็กน้อย
=> ความสว่างของหน้าจอบน Mac จะมากกว่า Windows และ Linux
ความละเอียดของหน้าจอ
สรุป
กรณีที่ 1 ผู้ใช้สว่นใหญ่จะได้เห็นหน้าเว็บที่สมบูรณ์
กรณีที่ 2 ผู้ใช้ทุกคนจะได้เห็นเนื้อหาทั้งหมดในหน้าจอ
กรณีที่ 3 ผู้ใช้จำนวนน้อยที่สามารถดูเนื้อหาได้อย่างเหมาะสม
การออกแบบควรใช้ความละเอียด800 x 600
ชนิดของตัวอักษรที่มีอยู่ในเครื่องของผู้ใช้
Ms Sans Serif VS Microsoft Sans Serif
Ms Sans Serif เป็นพ้อนต์ที่บิตแมท ที่ออกแบบจากจุดพิกเซล โดยมีการออกแบบขนาดที่แน่นอน
MicrosoftSans Serifเป็นพ้อนต์ที่มีโครงสร้างของอักขระเป็นแบบเวคเตอร์หรือลายเส้นโดยมีการออกแบบเอ้าไลน์ไว้แบบเดียวแต่ปรับขนาดได้ไม่จำกัด
ความเร็วในการเชื่อมต่ออินเตอร์เน็ต
ผู้ออกแบบเว็บไซต์ต้องออกแบบให้เว็บมีความสวยงาม น่าสนใจ และดาวน์โหลดได้เร็ว โดยทำให้ไฟล์มีขนาดเล็กที่สุด
การออกแบบให้เว็บเพจมีขนาดคงที่ (Fixed Design)
รูปแบบนี้เหมาะสมกับผู้ที่ต้องการควบคุมโครงสร้างของหน้าเว็บไซต์ให้คงที่เสมอ
ข้อดี
เว็บเพจจะประกฎต่อสายตาผู้ใช้เป็นรูปแบบเดียวกันเสมอ
สามารถดูความยาวของตัวอักษรในบรรทัดได้ดี ตัวอักษรไม่ยาวเกินไป
ข้อเสีย
ต้องอาศัย Scroll Bar ในการเลื่อนดูข้อมูล
ออกแบบกราฟิกสำหรับเว็บไซต์ Designing Web Graphics
ระบบการวัดขนาดของรูปภาพ
เมื่อจอมอนิเตอร์ทำการแสดงผลรูปภาพในเว็บเพจ พิกเซลในรูปภาพจะจับคู่กันแบบหนึ่งต่อหนึ่งกับ
พิกเซลตามความละเอียดของหน้าจอ ทำให้หน่วยการวัดรูปภาพในเว็บจึงเป็นพิกเซล ไม่ใช่นิ้วหรือเซ็นติเมตรแต่อย่างใด ดังนั้นในกระบวนการ ออกแบบกราฟิกและรูปภาพต่างๆ คุณจึงความลดขนาดเป็นพิกเซลไว้เสมอ ซึ่งจะมีประโยชน์ในการเปรียบเทียบขนาดกราฟิกกับองค์ประกอบอื่นๆ ในหน้าเว็บ รวามถึงขนาดวินโดว์ของบราวเซอร์อีกด้วย
เนื่องจากรูปภาพในเว็บโดยส่วนใหญ่จะถูกสแดงผ่านหน้าจอมอนิเตอร์ ในทางเทคนิคที่ถูกต้องแล้ว ระบบการวัดความละเอียดของรูปภาพจึงต้องเป็น “Pixels per inch” (ppi) แต่ก็มีระบบการวัดอีกแบบหนึ่งคือ “Dot per inch (dpi) ที่ใช้ความละเอียดของรูปถาพที่พิมพ์ออกมา ซึ่งความละเอียดที่ได้จะขึ้นอยู่กับประสิทธิภาพของเครื่องพิมพ์แต่ละเครื่องในทางปฏิบัติ หน่วย ppi กับ dpi อาจใช้แทนกันได้ ทำให้เป็นที่ยอมรับว่าความละเอียดของรูปภาพในหน้าจอมีหน่วยเป็น dpi แทนท่จะเป็น ppi ที่ถูกต้อง
ความละเอียดของรูปภาพ
เมื่อเปรียบเทียบความละเอียดของรูปภาพในเว็บกับในสิ่งพิมพ์ คุณจะเห็นความแตกต่างกันว่ารูปภาพในเว็บมีคุณภาพที่ต่ำกว่า เนื่องจากมีข้อมูลและรายละเอียดของรูปภาพที่น้อยกว่าทำให้รูปที่ได้มองดูมีลักษณะเป็นจุดเล็กๆ ซึ่งถือเป็นธรรมชาติของรูปภาพในเว็บ
