บทที่ 7 Dsign for a variety of Web Environments (การออกแบบเว็บไซต์ให้เหมาะสมกับสิ่งแวดล้อม)
ปัจจัยหลักที่เกี่ยวข้องกับการท่องเว็บไซต์
1. เบราเซอร์ที่ใช้
- เบราเซอร์คือโปรแกรมที่ใช้เรียกดูเว็บเพจ โดยสามารถแสดงผลได้ทั้งรูปแบบตัวอักษร ,
รูปภาพ และภาพเคลื่อนไหว
รูปภาพ และภาพเคลื่อนไหว
- มีเบราเซอร์หลายชนิดที่ได้รับความนิยม เช่น
* Internet Explorer
* Netscape Navigator
* The World
* Opera
* Mozilla
* Firefox
- การออกแบบเว็บไซต์ตามคุณสมบัติของเบราเซอร์
* เว็บไซต์สำหรับเบราเซอร์ทุกร่น
* เว็บไซต์สำหรับเบราเซอร์รุ่นล่าสุด
* เว็บไซต์ตามความสามารถของเบราเซอร์
* เว็บไซต์ที่มีหลายรูปแบบ
2. ระบบปฏิบัติการ (Operating System)
- ระบบปฏิบัติการเป็นปัจจัยที่มีผลต่อการทำงานของเบราเซอร์มาก โดยแต่ละระบบปฏิบัติการจะมีความแตกต่างกันในเรื่องของชนิดและรุ่นของเบราเซอร์ที่ใช้ได้ , ระดับความละเอียดของหน้าจอ , ชุดสีของระบบ และชนิดของตัวอักษรที่มาพร้อมกับระบบ เป็นต้น
* การแสดงผลของ windows จะมีขนาดใหญ่กว่า Mac เล็กน้อย
* ความสว่างของหน้าจอบน Mac จะมากกว่า Windows และ Unix
3. ความละเอียดของหน้าจอ
- ขนาดของจอมอนิเตอร์มีหลายขนาด เช่น 15",17",21" และอื่น ๆ
- ความละเอียดของหน้าจอ (monitor resolution) มีหน่วยเป็น Pixel
* ความละเอียด 640 x 480 หมายถึง หน้าจอมีจุดพิกเซลเรียงตัวตามแนวนอน 640 พิกเซล และตามแนวตั้ง 480 พิกเซล
- ความละเอียดของหน้าจอจะไม่ขึ้นกับบขนาดของมอนิเตอร์ที่ใช้ แต่จะขึ้นกับประสิทธิภาพของการ์ดแสดงผลว่าสามารถทำได้ละเอียดแค่ไหน
* EX: จอขนาด 17" สามารถตั้งค่าความละเอียดได้ตั้งแต่ 640 x 480 จนถึง 1600x1200 เป็นต้น
4.จำนวนสีที่จอของผู้ใช้สามารถแสดงได้
จำนวนสีที่การ์ดจอสามารถแสดงได้นั้นขึ้นอยู่กับค่าความละเอียดของสีที่เรียกว่า bit depth หรือ color depth ซึ่งก็คือ จำนวนบิตที่ใช้ในการเก็บข้อมูลแต่ละพิกเซล ชุดสีสำหรับเว็บ
(Web Palette) หมายถึง ชุดสีจำนวน 216 สีที่มีอยู่เหมือนกันในระบบปฏิบัติการ
Windows และ Mac
- ความละเอียดของหน้าจอจะไม่ขึ้นกับบขนาดของมอนิเตอร์ที่ใช้ แต่จะขึ้นกับประสิทธิภาพของการ์ดแสดงผลว่าสามารถทำได้ละเอียดแค่ไหน
* EX: จอขนาด 17" สามารถตั้งค่าความละเอียดได้ตั้งแต่ 640 x 480 จนถึง 1600x1200 เป็นต้น
4.จำนวนสีที่จอของผู้ใช้สามารถแสดงได้
จำนวนสีที่การ์ดจอสามารถแสดงได้นั้นขึ้นอยู่กับค่าความละเอียดของสีที่เรียกว่า bit depth หรือ color depth ซึ่งก็คือ จำนวนบิตที่ใช้ในการเก็บข้อมูลแต่ละพิกเซล ชุดสีสำหรับเว็บ
(Web Palette) หมายถึง ชุดสีจำนวน 216 สีที่มีอยู่เหมือนกันในระบบปฏิบัติการ
Windows และ Mac
5. ชนิดของตัวอักษรที่มีอยู่ในเครื่องของผู้ใช้
- MS Sans Serif VS Microsoft Sans Serif
* MS Sans Serif เป็นฟอนต์แบบบิตแมพ (bitmapped font ) ที่ออกแบบขึ้นจากจุดของพิกเซล โดยมีการออกแบบแต่ละตัวอักษรไว้เป็นขนาดที่แน่นอน
* Microsoft Sans font เป็นฟอนต์ที่มีโครงสร้างของอักขระเป็นแบบเวคเตอร์หรือลายเส้น (vector font) โดยมีการออกแบบเอาท์ไลน์ไว้เพียงแบบเดียว แต่สามารถปรับขนาดได้อย่างไม่จำกัด
- ตัวอักษรแบบกราฟิก (Graphic Text)
ข้อดี
* สามารถกำหนดลักษณะของตัวอักษรได้อย่างแน่นอน ทั้งชนิด ขนาด สี
*ผู้ชมทุกคนจะมองเห็นตัวอักษรได้เหมือนกัน โดยไม่จำเป็นต้องมีตัวอักษรชนิดนั้นติดตั้งไว้ใน เครื่อง
* สามารถสร้างเอกลักษณ์เฉพาะตัวของเว็บได้จากรูปแบบของตัวอักษรย
* ใช้เวลาในการ download มากกว่า
* ลำบากในการแก้ไขและเปลี่ยนแปลง
* ข้อความที่เป็นกราฟิกจะไม่สามารถค้นหาได้ด้วย search engine
- MS Sans Serif VS Microsoft Sans Serif
* MS Sans Serif เป็นฟอนต์แบบบิตแมพ (bitmapped font ) ที่ออกแบบขึ้นจากจุดของพิกเซล โดยมีการออกแบบแต่ละตัวอักษรไว้เป็นขนาดที่แน่นอน
* Microsoft Sans font เป็นฟอนต์ที่มีโครงสร้างของอักขระเป็นแบบเวคเตอร์หรือลายเส้น (vector font) โดยมีการออกแบบเอาท์ไลน์ไว้เพียงแบบเดียว แต่สามารถปรับขนาดได้อย่างไม่จำกัด
- ตัวอักษรแบบกราฟิก (Graphic Text)
ข้อดี
* สามารถกำหนดลักษณะของตัวอักษรได้อย่างแน่นอน ทั้งชนิด ขนาด สี
*ผู้ชมทุกคนจะมองเห็นตัวอักษรได้เหมือนกัน โดยไม่จำเป็นต้องมีตัวอักษรชนิดนั้นติดตั้งไว้ใน เครื่อง
* สามารถสร้างเอกลักษณ์เฉพาะตัวของเว็บได้จากรูปแบบของตัวอักษรย
* ใช้เวลาในการ download มากกว่า
* ลำบากในการแก้ไขและเปลี่ยนแปลง
* ข้อความที่เป็นกราฟิกจะไม่สามารถค้นหาได้ด้วย search engine
บทที่ 8 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) คือสีที่อยู่ตรงข้ามกันในวงล้อสี เมื่อนำสีทั้งสองมาใช้คู่กัน จะทำให้สีทั้งสองมีความสว่างและสดใสมากขึ้น
บทที่ 9 Design Web Graphics (ออกแบบกราฟฟิกสำหรับเว็บไซต์)
รูปแบบกราฟฟิกสำหรับเว็บ (GIF , JPG และ PNG)
* GIF ย่อมาจาก Graphic Interchange Format
- ได้รับความนิยมในยุคแรก
- มีระบบสีแบบ Index ซึ่งมีข้อมูลสีขนาด 8 บิต ทำให้มีสีมากกว่า 256 สี
- มีการบีบอัดข้อมูลตามแนวนอนของพิกเซล เหมาะสำหรับกราฟฟิกที่ประกอบด้วยสีพื้น
* JPG ย่อมาจาก Joint Photogtaphic Experts Group
- มีข้อมูลสีขนาด 24 บิต (True Color) สามารถแสดงสีได้ถึง 16.7 ล้านสี
- ใช้ระบบการบีบอัดที่มีลักษณะที่สูญเสีย (lossy)
- ไฟล์ประเภทนี้ควรนำไปใช้กับรูปถ่ายหรือกราฟฟิกที่มีการไล่ระดับสีอย่างละเอียด
* 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
* ค่าพื้นฐานที่สามารถเลือกปรับได้คือ รูปแบบไฟล์, ชุดสีที่ใช้ , จำนวนสี, ระดัความสูญเสีย, ความโปร่งใส และสีพื้นหลัง
คำแนะนำในกระบวนการออกแบบกราฟฟิกสำหรับเว็บ
* ออกแบบกราฟฟิกโดยใช้ชุดสีสำหรับเว็บ (Web Palette)
* เลือกใช้รูปแบบกราฟฟิกที่เหมาะสม GIF หรือ JPEG
* ตัดแบ่งกราฟฟิกออกเป็นส่วนย่อย (Slices)
