บทที่ 7 การออกแบบเว็บไซต์ให้เหมาะกับสิ่งแวดล้อม
(Disign for a variety of Web Environments)
ปัจจัยหลักที่เกี่ยวข้องกับการท่องเว็บไซต์
1. เบราเซอร์ที่ใช้
เบราเซอร์ คือ โปรแกรที่ใช้เรียกดูเว็บ สามารถแสดงได้ทั้งตัวอักษร รูปภาพ และภาพเคลื่อนไหวเบราเซอร์ที่ได้ความนิยม เช่น
Internet Explorer
Netscape
Chrome
Opera
มาตรฐานกลางของเบราเซอร์ คือ w3c เป็นองค์กรที่กำหนดคุณสมบัติของเบราเซอร์ เราควร
ออกแบบตามคุณสมบัติดังนี้
-สามารถใช้ได้กลับเบราเซอร์ได้ทุกรุ่น
Netscape
Chrome
Opera
มาตรฐานกลางของเบราเซอร์ คือ w3c เป็นองค์กรที่กำหนดคุณสมบัติของเบราเซอร์ เราควร
ออกแบบตามคุณสมบัติดังนี้
-สามารถใช้ได้กลับเบราเซอร์ได้ทุกรุ่น
-เว็บไซต์สำหรับเบราเซอร์รุ่นล่าสุด
-เว็บไซต์ตามความสามารถของเบราเซอร์
-เว็บไซต์ที่มีหลายรูปแบบ
2. ระบบปฏิบัติการของคอมพิวเตอร์
2. ระบบปฏิบัติการของคอมพิวเตอร์
เป็นระบบที่เป็นปัจจัยหลักต่อ มีผลต่อการทำง่านของเบราเซอร์มาก โดยแต่ละระบบปฏิบัติการจะมีความแตกต่างกันในเรื่องของชนิดและรุ่นของ เบราเซอร์ที่ใช้ได้ระดับความละเอียดของหน้าจอชุดสีของระบบ และชนิดของตัวอักษรที่มาพร้อมกับระบบ
3. ความละเอียดของหน้าจอ
3. ความละเอียดของหน้าจอ
ความละเอียดของหน้าจอ (monitor resolution) มีหน่วยเป้น pixel ความละเอียดของหน้าจอไม่ขึ้นกับขนาดของมอิเตอร์ที่ใช้แต่จะขึ้นกับประสิทธิภาพของการ์ดแสดงผลว่าสามารถทำได้ได้ละเอียดแค่ไหน การออกแบบหน้าจอผู้ใช้ส่วนใหญ่จะชอบหน้าเว็บที่เปิดมาแล้วสมบูรณ์
4.จำนวนสีที่จอของผู้ใช้
4.จำนวนสีที่จอของผู้ใช้
สามารถแสดงได้มอนิเตอร์มีความสามารถใหการแสดงสีแตกต่างกน ขึ้นอยู่กับประสิทธิภาพของการ์ดจอ จำนวนหน่วยความจำในการ์ดจอมากขึ้นจะทำให้สามารถแสดงสีได้มากขึ้น จำนวนสีที่การ์ดจอสามารถแสดงได้นั้น ขึ้นอยู่กับค่าความละเอียดของสีที่เรียกว่า bit depth and color depthซึ่งก็คือจำนวนบิตที่ใช้ในการเก็บข้อมูลแต่ละพิกเซลขุดสีสำหรับเว็บ (Web palette) หมายถึว ชุดสีจำนวน216 สีที่มีอยู่เหมือนกันในระบบปฏิบัติการ Windows and Mac ปัจจุบัน Web palette มีความสำคัญน้อยลง เนื่องจากจอของผู้ใข้สามารถแสดงสีได้มาขึ้น
5. ชนิดของตัวอักษรที่มีอยู่ในเครื่อง
ชนิดของตัวอักษรมี 2 แบบ คือ
1. MS Sans Serif
1. MS Sans Serif
เป็นฟอนต์แบบชิตแมท ซึ่งออกแบบขึ้นจากจุดของพิกเซล โดยมีการออกแบบแต่ละตัวอักษรไว้เป็นขนาดที่แน่นอน
2. Microsoft Sans Serif
เป็นฟอนด์ที่มีโครงสร้างของอักขระเป็นแบบเวคเตอร์หรือลายเส้น โอยมีกรออกแบบเอาท์ไลน์ไว้เพียงแบบเดียว แต่สามารถปรับขนาดได้อย่างไม่จำกัดตัวอักษรแบบกราฟิก (Graphic Text)
6.ความเร็วในการเชื่อมต่ออินเตอร์เน็ต
ความเร็วของอินเตอร์เน็ตจะมีผลต่อเวลาที่ใช้ในการแสดงผลของเว็บ
7.ความสว่างและค่าความต่างของโทนสี
ความเร็วของอินเตอร์เน็ตจะมีผลต่อเวลาที่ใช้ในการแสดงผลของเว็บ
7.ความสว่างและค่าความต่างของโทนสี
ผู้ออกแบบเว็บจะต้องระวังไม่ให้หน้าเว็บมีโทนสีมืดหรือสว่างจนเกินไป และควรเลือกใช้โทนสีที่ต่างกันพอสมควร
บทที่ 8 เลือกใช้สีสำหรับเว็บไซต์
(Disigning Web Colors)
เลือกใช้สีสำหรับเว็บไซต์
1. สีสันในเว็บเป็นสิ่งที่สำคัญมากในการดึงดูดความสนใจของผู้ใช้เนื่องจากสิ่งแรกที่ผู้ใช้มองเห็นจากเว็บก็คือสีซึ่งเป็นสิ่งกำหนดบรรยากาศและความรู้สึกของเว็บไซต์
2. เราสามารถใช้สีกับทุกองค์ประกอบของเว็บเพจ ตั้งแต่รูปภาพ ตัวอักษร สีพื้นหลัง การใช้สีที่เหมาะสมจะช่วยในการสื่อความหมายของเนื้อหา
3. การใช้สีพื้นใกล้เคียงกับสีตัวอักษร บางครั้งอาจสร้างความลำบากในการอ่าน
4. การใช้สีที่มากเกินความจำเป็นอาจสร้างความสับสนให้กับผู้อ่าน
5. การใช้สีที่กลมกลืนกันช่วยให้เว็บไซต์น่าดูชมมากยิ่งขึ้นประโยชน์ของสีในเว็บไซต์
6. สามารถชักนำสายตาผู้อ่านให้ไปยังทุกบริเวณในหน้าเว็บเพจที่เราต้องการได้ เช่น ข้อมูลใหม่ หรือโปรโมชั่นพิเศษ
7. สีช่วยเชื่อมโยงบริเวณที่ได้รับการออกแบบเข้าด้วยกัน
8. สีสามารถนำไปใช้ในการแบ่งบริเวณต่างๆ ออกจากกัน
9. สีสามารถใช้ในการดึงดูดความสามารถของผู้อ่าน
10. สีสามารถสร้างอารมณ์โดยรวมของเว็บเพจ
11. ช่วยสร้างระเบียบให้กับข้อความต่างๆ เช่น ใช้สีแยกระหว่างหัวเรื่องกับเนื้อเรื่อง
12. สามารถส่งเสริมเอกลักษณ์ขององค์กรหรือหน่วยงานนั้น ๆ
การผสมสี (Color Mixing) มี 2 แบบ
1. การผสมแบบบวก (Additive mixing)
จะเป็นรูปแบบการผสมของแสง ไม่ใช่การผสมของวัตถุที่มีสีบนกระดาษ สามารถนำไปใช้ในสื่อใดๆที่ใช้แสงส่องออกมา เช่น จอโปรเจคเตอร์ ทีวี
2. การผสมแบบลบ (Subtractive mixing)
การผสมสีแบบนี้ไม่เกี่ยวข้องกับแสง แต่เกี่ยวเนื่องกับการดูดกลืนและสะท้อนแสงของวัตถุต่างๆ สามารถนำไปใช้ในสื่อที่เกี่ยวข้องกับการใช้วัตถุมีสี เช่น ภาพวาดของศิลปิน รูปปั้นหรือสิ่งพิมพ์ต่าง ๆ
ความกลมกลืนของสี
1. ความเป็นระเบียบของสี ที่ทำให้ผู้ชมรู้สึกถึงความสมดุลและความสวยงามในเวลาเดียวกัน
*การใช้สีที่จืดชืดเกินไปจะทำให้เกิดความรู้สึกที่น่าเบื่อและไม่สามารถดึงดูดความสนใจจากผู้ชมได้
*การใช้สีที่มากเกินไปก็จะดูวุ่นวายขาดระเบียบและอาจสร้างความสับสนให้กับผู้ชม
2. เป้าหมายในเรื่องสี คือ การนำเสนอเว็บไซต์โดยใช้ชุดสีในรูปแบบที่เข้าใจได้ง่าย น่าสนใจ และสื่อความหมายได้อย่างเหมาะสม
รูปแบบชุดสีพื้นฐาน (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 ออกแบบกราฟฟิกสำหรับเว็บไซต์
(Disigning Web Graphics)
(Disigning Web Graphics)
รูปแบบกราฟฟิกสำหรับเว็บ(GIF,JPGและPNG)
1. GIF ย่อมาจาก Graphic Interchange Format
- ได้รับความนิยมในยุคแรก
- มีระบบสีแบบ Index ซึ่งมีข้อมูลสีขนาด 8 บิตทำให้มีสีมากกว่า 256 สี
- มีการบีบอัดข้อมูลตามแนวนอนของพิกเซลเหมาะสำหรับกราฟฟิกที่ประกอบด้วยสีพื้น
- ได้รับความนิยมในยุคแรก
- มีระบบสีแบบ Index ซึ่งมีข้อมูลสีขนาด 8 บิตทำให้มีสีมากกว่า 256 สี
- มีการบีบอัดข้อมูลตามแนวนอนของพิกเซลเหมาะสำหรับกราฟฟิกที่ประกอบด้วยสีพื้น
2. JPG ย่อมาจาก Joint Photogtaphic Experts Group
- มีข้อมูลสีขนาด 24 บิต (True Color)สามารถแสดงสีได้ถึง 16.7 ล้านสี
- ใช้ระบบการบีบอัดที่มีลักษณะที่สูญเสีย (lossy)
- ไฟล์ประเภทนี้ควรนำไปใช้กับรูปถ่ายหรือกราฟฟิกที่มีการไล่ระดับสีอย่างละเอียด
- มีข้อมูลสีขนาด 24 บิต (True Color)สามารถแสดงสีได้ถึง 16.7 ล้านสี
- ใช้ระบบการบีบอัดที่มีลักษณะที่สูญเสีย (lossy)
- ไฟล์ประเภทนี้ควรนำไปใช้กับรูปถ่ายหรือกราฟฟิกที่มีการไล่ระดับสีอย่างละเอียด
3. PNG ย่อมาจาก Portable Network Graphic
- สามารถสนับสนุนระบบสีได้ทั้ง 8 บิต 16 บิต และ 24 บิต
- มีระบบการบีบอัดแบบ Deflateที่ไม่ทำให้เกิดการสูญเสีย(lossless)
- สามารถสนับสนุนระบบสีได้ทั้ง 8 บิต 16 บิต และ 24 บิต
- มีระบบการบีบอัดแบบ Deflateที่ไม่ทำให้เกิดการสูญเสีย(lossless)
- มีระบบการควบคุมค่าแกมม่า(Gamma) และความโปร่งใส (Transparency)ในตัวเอง
ระบบการวัดขนาดของรูปภาพ
รูปภาพที่ใช้หน่วยวัดขนาดตามหน้าจอมอนิเตอร์นั่นก็คือหน่วยพิกเซล ซึ่งจะมีประโยชน์ในการเปรียบเทียบขนาดของกราฟฟิกหับองค์ประกอบอื่นๆในหน้าเว็บ รวมถึงขนาดของหน้าต่างเบราเซอร์ด้วย
ระบบการวัดความละเอียดของรูปภาพ
- ระบบความละเอียดของรูปภาพที่แสดงผลบนจอมอนิเตอร์ควรใช้หน่วยpixel per inch (ppi)
- แต่ในทางการใช้งานจะนำหน่วย dot per inch (dpi) ซึ่งเป็นหน่วยวัดความละเอียดของสิ่งพิมพ์มาใช้งานแทน ppi
- ความละเอียดของรูปภาพที่ใช้ในเว็บไซต์ควรมีความละเอียดแค่ 72 ppi ก็เพียงพอแล้ว
โปรแกรมกราฟฟิกสำหรับเว็บ
ปัจจุบันมีโปรแกรมหลายประเภททีนำมาใช้ในการสร้างกราฟฟิกสำหรับเว็บ
- Adobe PhotoShop
- Adobe ImangeReady
- Firework
*ค่าพื้นฐานที่สามารถเลือกปรับได้คือ รูปแบบไฟล์,ชุดสีที่ใช้,จำนวนสี,ระดับความสูญเสีย,ความโปร่งใสและสีพื้นหลัง
คำแนะนำในกระบวนการออกแบบกราฟฟิกสำหรับเว็บ
1. ออกแบบกราฟฟิกโดยใช้ชุดสีสำหรับเว็บ(Web Palette)
2. เลือกใช้รูปแบบกราฟฟิกที่เหมาะสม GIF หรือ JPEG
3. ตัดแบ่งกราฟฟิกออกเป็นส่วนย่อย(Slices)
**** หากไม่เข้าใจหรือสงสัยตรงไหน สามารถ ment สอบได้ได้นะคะ :)
ไม่มีความคิดเห็น:
แสดงความคิดเห็น