การออกแบบเว็บไซต์ให้เหมาะกับสิ่งแวดล้อม
ปัจจัยหลักที่เกี่ยวข้องกับการท่องเว็บไซต์
1. เบราเซอร์ที่ใช้ เบราเซอร์ คือ โปรแกรมที่ใช้เรียกดูเว็บเพจ สามารถแสดง
ผลได้ทั้งรูปแบบตัวอักษร รูปภาพ และภาพเคลื่อนไหว เบราเซอร์ที่ได้รับความนิยม
เช่น Internet Explorer , Netscape NavigatorOpera , Mozilla , Firefox ปัจจุบัน
ได้มีองค์กรกลางได้ทำการกำหนดมาตรฐานเพื่อให้เป็นมาตรฐานกลาง คือ W3C
2. ระบบปฏิบัติการ(Operating System) จะ มีผลต่อการทำงานของเบรา
เซอร์มากแต่ละระบบปฏิบัติการ จะมีความแตกต่างกันในเรื่องของชนิดและรุ่นของ
เบราเซอร์ ที่ใช้ระดับความละเอียดของหน้าจอชุดสีระบบและชนิดของตัวอักษรที่
มาพร้อมกับระบบ
3. ความละเอียดของหน้าจอ ความละเอียด 640x480 หมายถึง หน้าจอมีจุด
พิกเซลเรียงตัวตามแนวนอน 640 พิกเซล และตามแนวตั้ง 480 ความละเอียดของ
หน้าจอจะขึ้นอยู่กับประสิทธิภาพของการ์ดแสดงผล
4. จำนวนสีที่จอของผู้ใช้สามารถแสดงได้ จำนวนสีที่การ์ดจอสามารถแสดง
ได้นั้นขึ้นอยู่กับค่าความละเอียดของสีที่เรียกว่า bit depth หรือ color depth
ซึ่งก็คือ จำนวนบิตที่ใช้ในการเก็บข้อมูลแต่ละพิกเซล ชุดสีสำหรับเว็บ
(Web Palette) หมายถึง ชุดสีจำนวน 216 สีที่มีอยู่เหมือนกันในระบบปฏิบัติการ
Windows และ Mac
5. ชนิดของตัวอักษรที่มีอยู่ในเครื่องของผู้ใช้ จะแสดงฟอนต์ที่กำหนดไว้ใน
เว็บเพจได้ก็ต่อเมื่อคอมพิวเตอร์เครื่องนั้นมีฟอนต์เหล่านั้นติดตั้งอยู่ในเครื่อง
- MS SansSerif เป็นฟอนต์แบบบิตเเมพ(bitmapped font)
- Microsoft Sans Serif เป็นฟอนต์แบบเวคเตอร์หรือลายเส้น(vector font)
สามารถปรับขนาดได้อย่างไม่จำกัด
ข้อดี
1. สามารถกำหนดลักษณะของตัวอักษรได้อย่างแน่นอนทั้งชนิด ขนาด สี
2. สามารถมองเห็นได้โดยไม่จำเป็นต้องมีตัวอักษรชนิดนั้นติดตั้งไว้ในเครื่อง
3. สามารถสร้างเอกลักษณ์เฉพาะตัวของเว็บได้จากรูปแบบของตัวอักษร
ข้อเสีย
1. ใช้เวลาในการ Downlond มาก
2. ลำบากในการแก้ไขและเปลี่ยนแปลง
3. ข้อความเป็นกราฟฟิกจะไม่สามารถค้นหาได้ด้วย search engine
6. ความเร็วในการเชื่อมต่ออินเตอร์เน็ต จะมีผลต่อเวลาที่ใช้ในการแสดงผล
ของเว็บ ความเร็วของอินเตอร์เน็ตมีหลายระดับ คือ - ผู้ใช้ตามบ้าน จะใช้ความเร็ว
56 kbps
** หน่วยงานบางแห่ง จะใช้ความเร็วสูง เช่น ADSL , Cable modem ซึ่งมี
ความเร็วตั้งแต่ 128 kbpsจนถึง 10 kbps
7. ขนาดหน้าต่างเบราเซอร์
** ออกแบบเว็บเพจให้เปลี่ยนแปลงขนาดได้(Flexible Design)องค์
ประกอบทั้งหมดจะมีการจัดเรียงตัวกันใหม่ ตามขนาดพื้นที่ใหม่
ข้อดี
1.พื้นที่หน้าจอทั้งหมดถูกใช้อย่างเต็มที่
2. เว็บเพจจะถูกจัดเรียงในรูปแบบที่เหมาะสมกับหน้าจอเสมอ
ข้อเสีย
1.ไม่สามารถคาดการณ์รูปแบบที่จะปรากฏต่อสายตาผู้ชมได้
** ออกแบบเว็บเพจให้มีขนาดคงที่(Fixed Design) ผู้ที่ต้องการควบ
คุมโครงสร้างของหน้าเว็บให้คงที่เสมอ
ข้อดี
1. เว็บเพจจะปรากฏต่อสายตาผู้ใช้เป็นรูปแบบเดียวกันเสมอ
2. สามารถควบคุมความยาวของตัวอักษรในบรรทัดได้ดี ทำให้ตัวอักษร
ไม่ยาวเกินไป
ข้อเสีย
1. ต้องอาศัย scroll bar ในการเลื่อนดูข้อมูล
8. ความสว่างและค่าความต่างของโทนสี
** สามารถปรับความสว่าง(Brightness) และความต่างของโทนสี
(Contrast) จากมอนิเตอร์ได้
** ต้องระวังไม่ให้หน้าเว็บมีโทนสีมืดหรือสว่างจนเกินไป และความ
เลือกใช้โทนสีที่ต่างกันพอสมควร
** ต้องหลีกเลี่ยงตัวหนังสือสีส้มบนพื้นแดง
เลือกใช้สีสำหรับเว็บไซต์
- สีสันในเว็บเป็นสิ่งที่สำคัญมากในการดึงดูดความสนใจของผู้ใช้ เนื่องจากสิ่งแรกที่ผู้ใช้มองเห็น จากเว็บก็คือสี ซึ่งเป็นสิ่งกำหนดบรรยากาศและความรู้สึกของเว็บไซต์
- เราสามารถใช้สีกับทุกองค์ประกอบของเว็บเพจ ตั้งแต่รูปภาพ ตัวอักษร สีพื้นหลัง การใช้สีที่เหมาะสมจะช่วยในการสื่อความหมายของเนื้อหา
- การใช้สีพื้นใกล้เคียงกับสีตัวอักษร บางครั้งอาจสร้างความลำบากในการอ่าน
- การใช้สีที่มากเกินความจำเป็นอาจสร้างความสับสนให้กับผู้อ่าน
- การใช้สีที่กลมกลืนกันช่วยให้เว็บไซต์น่าดูชมมากยิ่งขึ้น
ประโยชน์ของสีในเว็บไซต์
- สามารถชักนำสายตาผู้อ่านให้ไปยังทุกบริเวณในหน้าเว็บเพจที่เราต้องการได้ เช่น ข้อมูลใหม่ หรือโปรโมชั่นพิเศษ
- สีช่วยเชื่อมโยงบริเวณที่ได้รับการออกแบบเข้าด้วยกัน
- สีสามารถนำไปใช้ในการแบ่งบริเวณต่าง ๆ ออกจากกัน
- สีสามารถใช้ในการดึงดูดความสามารถของผู้อ่าน
- สีสามารถสร้างอารมณ์โดยรวมของเว็บเพจ
- ช่วยสร้างระเบียบให้กับข้อความต่าง ๆ เช่น ใช้สีแยกระหว่างหัวเรื่องกับเนื้อเรื่อง
- สามารถส่งเสริมเอกลักษณ์ขององค์กรหรือหน่วยงานนั้น ๆ
การผสมสี (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) คือสีที่อยู่ตรงข้ามกันในวงล้อสี เมื่อนำสีทั้งสองมาใช้คู่กัน จะทำให้สีทั้งสองมีความสว่างและสดใสมากขึ้น
- สีสันในเว็บเป็นสิ่งที่สำคัญมากในการดึงดูดความสนใจของผู้ใช้ เนื่องจากสิ่งแรกที่ผู้ใช้มองเห็น จากเว็บก็คือสี ซึ่งเป็นสิ่งกำหนดบรรยากาศและความรู้สึกของเว็บไซต์
- เราสามารถใช้สีกับทุกองค์ประกอบของเว็บเพจ ตั้งแต่รูปภาพ ตัวอักษร สีพื้นหลัง การใช้สีที่เหมาะสมจะช่วยในการสื่อความหมายของเนื้อหา
- การใช้สีพื้นใกล้เคียงกับสีตัวอักษร บางครั้งอาจสร้างความลำบากในการอ่าน
- การใช้สีที่มากเกินความจำเป็นอาจสร้างความสับสนให้กับผู้อ่าน
- การใช้สีที่กลมกลืนกันช่วยให้เว็บไซต์น่าดูชมมากยิ่งขึ้น
ประโยชน์ของสีในเว็บไซต์
- สามารถชักนำสายตาผู้อ่านให้ไปยังทุกบริเวณในหน้าเว็บเพจที่เราต้องการได้ เช่น ข้อมูลใหม่ หรือโปรโมชั่นพิเศษ
- สีช่วยเชื่อมโยงบริเวณที่ได้รับการออกแบบเข้าด้วยกัน
- สีสามารถนำไปใช้ในการแบ่งบริเวณต่าง ๆ ออกจากกัน
- สีสามารถใช้ในการดึงดูดความสามารถของผู้อ่าน
- สีสามารถสร้างอารมณ์โดยรวมของเว็บเพจ
- ช่วยสร้างระเบียบให้กับข้อความต่าง ๆ เช่น ใช้สีแยกระหว่างหัวเรื่องกับเนื้อเรื่อง
- สามารถส่งเสริมเอกลักษณ์ขององค์กรหรือหน่วยงานนั้น ๆ
การผสมสี (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) คือสีที่อยู่ตรงข้ามกันในวงล้อสี เมื่อนำสีทั้งสองมาใช้คู่กัน จะทำให้สีทั้งสองมีความสว่างและสดใสมากขึ้น
ออกแบบกราฟฟิกสำหรับเว็บไซต์
กราฟฟิก ช่วยสื่อความหมายสร้างความเข้าใจให้กับผู้ใช้ รวมทั้งสร้างความสวยงามให้เว็บไซต์น่าชมขึ้น
รูปแบบกราฟฟิกสำหรับเว็บ (GIF,JPG และ PNG)
GIF ย่อมาจาก Graphic Interchange Format
มีระบบสีแบบ Index ซึ่งมีสีขนาด 8 บิต ทำให้มีสีมากสุดได้ 256 สี
มีการบับอัดจข้อมูบตามแนวนอนของพิกเซล เหมาะสำหรับกราฟฟิกที่ประกอบด้วยสีพื้น
JPG ย่อมาจาก Joint Photographic Expert Group
มีข้อมูลสีขนาด 24 บิต สามารถแสดงสีได้ถึง 16.7 ล้านสี
ใช้ระบบการบีบอัดที่มีลักษณะที่สูญเสีย
ไฟล์ประเภทนี้ควรนำไปใช้กับรูปถ่ายหรือกราฟฟิกที่มีการไล่ระดับสีอย่างละเอียด
PNG ย่อมาจาก Portable Network Graphic
สามารถสนับสนุนระบบสีได้ทั้ง 8บิต 16บิตและ 24 บิต
มีระบบบีบอัดแบบ Deflate ที่ไม่ทำให้เกิดการสูญเสีย
มีระบบการควบคุมแกมม่าและความโปร่งใสในตัวเอง
ระบบการวัดความละเอียดของรูปภาพ
ระบบความละเอียดของรูปภาพที่แสดงผลบนจอมอนิเตอร์ควรใช้หน่วย pixel per inch(ppi) หมายถึงใน 1 นิ้วมีความละเอียดกี่พิกเซล
แต่ในทางการใช้งานจะนำหน่วย dot per inch (dpi) ซึ่งเป็นหน่วยวัดความละเอียดของสิ่งพิมพ์มาใช้งานแทน ppi
ความละเอียดของรูปภาพที่ใช้ในเว้บไซต์ควรมีความละเอียดแค่ 72 ppi ก็เพียงพอแล้ว
โค้ดเมาส์แต่งhi5 มากมาย กดที่นี่เลย
