เลือกใช้สีสำหรับเว็บไซต์
สีสันในเว็บเป็นสิ่งที่สำคัญมากในการดึงดูดความสนใจของผู้ใช้ เนื่องจากสิ่งแรกที่ผู้ใช้มองเห็น จากเว็บก็คือสี ซึ่งเป็นสิ่งกำหนดบรรยากาศและความรู้สึกของเว็บไซต์เราสามารถใช้สีกับทุกองค์ประกอบของเว็บเพจตั้งแต่รูปภาพตัวอักษรสีพื้นหลังการใช้สีที่เหมาะสมจะช่วยในการสื่อความหมายของเนื้อหา
การใช้สีพื้นใกล้เคียงกับสีตัวอักษรบางครั้งอาจสร้างความลำบากในการอ่าน การใช้สีที่มากเกินความจำเป็นอาจสร้างความสับสนให้กับผู้อ่าน การใช้สีที่กลมกลืนกันช่วยให้เว็บไซต์น่าดูชมมากยิ่งขึ้น
การผสมสี (Color Mixing) มี2แบบ
1. การผสมแบบบวก (Additive mixing)จะเป็นรูปแบบการผสมของแสงไม่ใช่การผสมของวัตถุที่มีสีบนกระดาษ สามารถนำไปใช้ในสื่อใด ๆ ที่ใช้แสงส่องออกมา เช่น จอโปรเจคเตอร์ ทีวี
2. การผสมแบบลบ (Subtractive mixing) การผสมสีแบบนี้ไม่เกี่ยวข้องกับแสง แต่เกี่ยวเนื่องกับการดูดกลืนและสะท้อนแสงของวัตถุต่าง ๆ สามารถนำไปใช้ในสื่อที่เกี่ยวข้องกับการใช้วัตถุมีสี เช่น ภาพวาดของศิลปิน รูปปั้น หรือ สิ่งพิมพ์ต่าง ๆ
ความกลมกลืนของสี
- ความเป็นระเบียบของสีที่ทำให้ผู้ชมรู้สึกถึงความสมดุลและความสวยงามในเวลาเดียวกัน
การใช้สีที่มากเกินไป ก็จะดูวุ่นวาย ขาดระเบียบและอาจสร้างความสับสนให้กับผู้ชมการใช้สีที่จืดชืดเกินไป จะทำให้เกิดความรู้สึกที่น่าเบื่อ และไม่สามารถดึงดูดความสนใจจากผู้ชมได้ -เป้าหมายในเรื่องสี คือการนำเสนอเว็บไซต์โดยใช้ชุดสีในรูปแบบที่เข้าใจได้ง่ายน่าสนใจและสื่อความหมายได้อย่างเหมาะสม
รูปแบบชุดสีพื้นฐาน (Simple Color Schemes)
รูปแบบชุดสีพื้นฐาน (Simple Color Schemes)
- ชุดสีร้อน (Warm Color Scheme) ประกอบด้วยสีม่วง , น้ำเงิน , น้ำเงินอ่อน , ฟ้า ,ฟ้าเงินแกมเขียวและสีเขียวโดยจะให้ความรู้สึกเย็นสบายองค์ประกอบที่ใช้สีเย็นจะดูสุภาพเรียบร้อย
- ชุดสีแบบเดียว (Monochromatic Color Scheme) เป็นรูปแบบชุดสีที่ง่ายที่สุด คือมีค่าของสีบริสุทธิ์เพียงสีเดียวแต่เพิ่มความหลากหลายโดยการเพิ่มความเข้มอ่อนในระดับต่าง ๆและชุดสีแบบนี้ค่อนข้างจะมีความกลมกลืนเป็นหนึ่งเดียวแต่ในบางครั้งอาจทำให้ดูไม่มีชีวิตชีวาเพราะขาดความหลากหลายของสี
- ชุดสีที่คล้ายคลึงกัน (Analogous Color Scheme) ประกอบด้วยสี 2 หรือ 3 สีที่ติดอยู่กันในวงล้อสามารถเพิ่มเป็น 4 หรือ 5 สีได้แต่อาจส่งผลให้ขอบเขตของสีกว้างไป
- ชุดสีตรงข้ามข้างเคียง (Split Complementary Color Scheme) เป็นชุดสีที่เปลี่ยนแปลงมาจากชุดสีตรงข้าม และชุดสีแบบนี้มีความหลากหลายเพิ่มขึ้น แต่จะมีผลให้ความสดใส ความสะดุดตา และความเข้ากันของสีลดลงด้วย
-ชุดสีตรงข้ามข้างเคียงทั้ง 2 ด้าน (Double Split Complementary Color Scheme) ดัดแปลงมาจากชุดสีตรงข้ามเช่นกันแต่สีตรงข้ามทั้ง 2สีถูกแบ่งแยกเป็นสีด้านข้างทั้ง 2ด้านและชุดสีแบบนี้มีความหลากหลายของสีที่มากขึ้น แต่จะมีความสดใสและกลมกลืนของสีที่ลดลง
-ชุดสีเย็น (Cool Color Scheme) เว็บเพจที่ใช้โทนสีเย็นให้บรรยากาศคล้ายทะเลรู้สึกเย็นสบาย
- ชุดสีแบบสามเส้า (Triadic Color Scheme) เป็นชุดสีที่อยู่ที่มุมของสามเหลี่ยมด้านเท่าทั้งสามซึ่งเป็นสีที่มีระยะห่างในวงล้อสีเท่ากัน จึงมีความเข้ากันอย่างลงตัว
-ชุดสีตรงข้าม (Complementary Color Scheme) คือสีที่อยู่ตรงข้ามกันในวงล้อสี เมื่อนำสีทั้งสองมาใช้คู่กัน จะทำให้สีทั้งสองมีความสว่างและสดใสมากขึ้น
ประโยชน์ของสีในเว็บไซต์
- สามารถชักนำสายตาผู้อ่านให้ไปยังทุกบริเวณในหน้าเว็บเพจที่เราต้องการได้
- สีช่วยเชื่อมโยงบริเวณที่ได้รับการออกแบบเข้าด้วยกัน
- สีสามารถนำไปใช้ในการแบ่งบริเวณต่าง ๆ ออกจากกัน
- สีสามารถใช้ในการดึงดูดความสามารถของผู้อ่าน
- สีสามารถสร้างอารมณ์โดยรวมของเว็บเพจ
- ช่วยสร้างระเบียบให้กับข้อความต่าง ๆ เช่น ใช้สีแยกระหว่างหัวเรื่องกับเนื้อเรื่อง
- สามารถส่งเสริมเอกลักษณ์ขององค์กรหรือหน่วยงานนั้น ๆ
การออกแบบเว็บไซต์ให้เหมาะกับสิ่งแวดล้อม
ปัจจัยหลักที่เกี่ยวข้องกับการท่องเว็บไซต์
1. เบราเซอร์ที่ใช้
เบราเซอร์ คือ โปรแกรที่ใช้เรียกดูเว็บ สามารถแสดงได้ทั้งตัวอักษร รูปภาพ และภาพเคลื่อนไหว เบราเซอร์ที่ได้ความนิยม เช่น Internet Explorer Netscape Navigatr Opera มาตรฐานกลางของเบราเซอร์ คือ w3c
เป็นองค์กรที่กำหนดคุณสมบัติของเบราเซอร์ เราควรออกแบบตามคุณสมบัติดังนี้
-สามารถใช้ได้กลับเบราเซอร์ได้ทุกรุ่น
-เว็บไซต์สำหรับเบราเซอร์รุ่นล่าสุด
-เว็บไซต์ตามความสามารถของเบราเซอร์
-เว็บไซต์ที่มีหลายรูปแบบ
2. ระบบปฏิบัติการของคอมพิวเตอร์
เป็นระบบที่เป็นปัจจัยหลักต่อ มีผลต่อการทำง่านของเบราเซอร์มาก โดยแต่ละระบบปฏิบัติการจะมีความแตกต่างกันในเรื่องของชนิดและรุ่นของ เบราเซอร์ที่ใช้ได้ระดับความละเอียดของหน้าจอ ชุดสีของระบบ และชนิดของตัวอักษรที่มาพร้อมกับระบบ
3. ความละเอียดของหน้าจอ
ความละเอียดของหน้าจอ (monitor resolution) มีหน่วยเป้น pixel ความละเอียดของหน้าจอไม่ขึ้นกับขนาดของมอิเตอร์ที่ใช้แต่จะขึ้นกับประสิทธิภาพของการ์ดแสดงผลว่าสามารถทำได้ได้ละเอีวดแค่ไหน การออกแบบหน้าจอผู้ใช้ส่วนใหญ่จะชอบหน้าเว็บที่เปิดมาแล้วสมบูรณ์
4.จำนวสีที่จอของผู้ใช้
สามารถแสดงได้มอนิเตอร์มีความสามารถใหการแสดงสีแตกต่างกน ขึ้นอยู่กับประสิทธิภาพของการ์ดจอ จำนวนหน่วยความจำในการ์ดจอมากขึ้นจะทำให้สามารถแสดงสีได้มากขึ้น จำนวนสีที่การ์ดจอสามารถแสดงได้นั้น ขึ้นอยู่กับค่าความละเอียดของสีที่เรียกว่า bit depth and color depthซึ่งก็คือจำนวนบิตที่ใช้ในการเก็บข้อมูลแค่ละพิกเซลขุดสีสำหรับเว็บ (Web palette) หมายถึว ชุดสีจำนวน 216 สีที่มีอยู่เหมือนกันในระบบปฏิบัติการ Windows and Mac ปัจจุบัน Web palette มีความสำคัยน้อยลง เนื่องจากจอของผู้ใข้สามารถแสดงสีได้มาขึ้น
เบราเซอร์ คือ โปรแกรที่ใช้เรียกดูเว็บ สามารถแสดงได้ทั้งตัวอักษร รูปภาพ และภาพเคลื่อนไหว เบราเซอร์ที่ได้ความนิยม เช่น Internet Explorer Netscape Navigatr Opera มาตรฐานกลางของเบราเซอร์ คือ w3c
เป็นองค์กรที่กำหนดคุณสมบัติของเบราเซอร์ เราควรออกแบบตามคุณสมบัติดังนี้
-สามารถใช้ได้กลับเบราเซอร์ได้ทุกรุ่น
-เว็บไซต์สำหรับเบราเซอร์รุ่นล่าสุด
-เว็บไซต์ตามความสามารถของเบราเซอร์
-เว็บไซต์ที่มีหลายรูปแบบ
2. ระบบปฏิบัติการของคอมพิวเตอร์
เป็นระบบที่เป็นปัจจัยหลักต่อ มีผลต่อการทำง่านของเบราเซอร์มาก โดยแต่ละระบบปฏิบัติการจะมีความแตกต่างกันในเรื่องของชนิดและรุ่นของ เบราเซอร์ที่ใช้ได้ระดับความละเอียดของหน้าจอ ชุดสีของระบบ และชนิดของตัวอักษรที่มาพร้อมกับระบบ
3. ความละเอียดของหน้าจอ
ความละเอียดของหน้าจอ (monitor resolution) มีหน่วยเป้น pixel ความละเอียดของหน้าจอไม่ขึ้นกับขนาดของมอิเตอร์ที่ใช้แต่จะขึ้นกับประสิทธิภาพของการ์ดแสดงผลว่าสามารถทำได้ได้ละเอีวดแค่ไหน การออกแบบหน้าจอผู้ใช้ส่วนใหญ่จะชอบหน้าเว็บที่เปิดมาแล้วสมบูรณ์
4.จำนวสีที่จอของผู้ใช้
สามารถแสดงได้มอนิเตอร์มีความสามารถใหการแสดงสีแตกต่างกน ขึ้นอยู่กับประสิทธิภาพของการ์ดจอ จำนวนหน่วยความจำในการ์ดจอมากขึ้นจะทำให้สามารถแสดงสีได้มากขึ้น จำนวนสีที่การ์ดจอสามารถแสดงได้นั้น ขึ้นอยู่กับค่าความละเอียดของสีที่เรียกว่า bit depth and color depthซึ่งก็คือจำนวนบิตที่ใช้ในการเก็บข้อมูลแค่ละพิกเซลขุดสีสำหรับเว็บ (Web palette) หมายถึว ชุดสีจำนวน 216 สีที่มีอยู่เหมือนกันในระบบปฏิบัติการ Windows and Mac ปัจจุบัน Web palette มีความสำคัยน้อยลง เนื่องจากจอของผู้ใข้สามารถแสดงสีได้มาขึ้น
5. ชนิดของตัวอักษรที่มีอยู่ในเครื่อง
ชนิดของตัวอักษรมี 2 แบบMS Sans Serif VS Microsoft Sans Serif
ชนิดของตัวอักษรมี 2 แบบMS Sans Serif VS Microsoft Sans Serif
MS Sans Serif เป็นฟอนต์แบบชิตแมท ซึ่งออกแบบขึ้นจากจุดของพิกเซล โดยมีการออกแบบแต่ละตัวอักษรไว้เป็นขนาดที่แน่นอน
Microsoft Sans Serif เป็นฟอนด์ที่มีโครงสร้างของอักขระเป็นแบบเวคเตอร์หรือลายเส้น โอยมีกรออกแบบเอาท์ไลน์ไว้เพียงแบบเดียว แต่สามารถปรับขนาดได้อย่างไม่จำกัด
ตัวอักษรแบบกราฟิก (Graphic Text)
6.ความเร็วในการเชื่อมต่ออินเตอร์เน็ต ความเร็วของอินเตอร์เน็ตจะมีผลต่อเวลาที่ใช้ในการแสดงผลของเว็บ
7.ความสว่างและค่าความต่างของโทนสี ผู้ออกแบบเว็บจะต้องระวังไม่ให้หน้าเว็บมีโทนสีมืดหรือสว่างจนเกินไป และควรเลือกใช้โทนสีที่ต่างกันพอสมควร
Microsoft Sans Serif เป็นฟอนด์ที่มีโครงสร้างของอักขระเป็นแบบเวคเตอร์หรือลายเส้น โอยมีกรออกแบบเอาท์ไลน์ไว้เพียงแบบเดียว แต่สามารถปรับขนาดได้อย่างไม่จำกัด
ตัวอักษรแบบกราฟิก (Graphic Text)
6.ความเร็วในการเชื่อมต่ออินเตอร์เน็ต ความเร็วของอินเตอร์เน็ตจะมีผลต่อเวลาที่ใช้ในการแสดงผลของเว็บ
7.ความสว่างและค่าความต่างของโทนสี ผู้ออกแบบเว็บจะต้องระวังไม่ให้หน้าเว็บมีโทนสีมืดหรือสว่างจนเกินไป และควรเลือกใช้โทนสีที่ต่างกันพอสมควร
รูปแบบกราฟฟิกสำหรับเว็บ
(GIF ,JPG และ PNG)
GIF ย่อมาจาก Graphic Interchange Formatมีระบบสีแบบ Index ซึ่งมีข้อมูลสีขนาด 8 บิต ทำให้มีสีมากกว่า 256 สีได้รับความนิยมในยุคแรก มีการบีบอัดข้อมูลตามแนว
JPG ย่อมาจาก Joint Photogtaphic Experts Groupใช้ระบบการบีบอัดที่มีลักษณะที่สูญเสีย (lossy) มีข้อมูลสีขนาด 24 บิต (True Color)สามารถแสดงสีได้ถึง 16.7 ล้านสี ไฟล์ประเภทนี้ควรนำไปใช้กับรูปถ่ายหรือกราฟฟิกที่มีการไล่ระดับสีอย่างละเอียดนอนของพิกเซล เหมาะสำหรับกราฟฟิกที่ประกอบด้วยสีพื้น
PNG ย่อมาจาก Portable Network Graphic สามารถสนับสนุนระบบสีได้ทั้ง 8 บิต 16บิตและ 24บิต มีระบบการบีบอัดแบบ Deflateที่ไม่ทำให้เกิดการสูญเสีย (lossless) มีระบบการควบคุมค่าแกมม่า (Gamma)และความโปร่งใส (Transparency) ในตัวเอง
ระบบการวัดขนาดของรูปภาพ
รูปภาพที่ใช้หน่วยวัดขนาดตามหน้าจอมอนิเตอร์ นั่นก็คือหน่วยพิกเซล ซึ่งจะมีประโยชน์ในการเปรียบเทียบขนาดของกราฟฟิกหับองค์ประกอบอื่น ๆ ในหน้าเว็บรวมถึงขนาดของหน้าต่างเบราเซอร์ด้วย
ระบบการวัดความละเอียดของรูปภาพ
-ระบบความละเอียดของรูปภาพที่แสดงผลบนจอมอนิเตอร์ควรใช้หน่วย pixel per inch (ppi) -แต่ในทางการใช้งานจะนำหน่วย dot per inch (dpi) ซึ่งเป็นหน่วยวัดความละเอียดของสิ่งพิมพ์มาใช้งานแทน ppi
-ความละเอียดของรูปภาพที่ใช้ในเว็บไซต์ควรมีความละเอียดแค่ 72 ppi ก็เพียงพอแล้ว
โปรแกรมกราฟฟิกสำหรับเว็บ
- ปัจจุบันมีโปรแกรมหลายประเภททีนำมาใช้ในการสร้างกราฟฟิกสำหรับเว็บ
- Adobe PhotoShop
- Adobe ImangeReady
- Firework
- ค่าพื้นฐานที่สามารถเลือกปรับได้คือ รูปแบบไฟล์, ชุดสีที่ใช้ , จำนวนสี, ระดัความสูญเสีย, ความโปร่งใส และสีพื้นหลัง
