♥ บทที่ 7 การออกแบบเว็บไซต์ให้เหมาะกับสิ่งแวดล้อม (Design for a variety of Web Environment)
ผู้ใช้แต่ละคนมีสภาวะแวดล้อมทางเทคนิคแตกต่างกันไป ตั้งแต่ระบบปฏิบัติการของคอมพิวเตอร์ เบราเซอร์ที่ใช้ ความละเอียดของหน้าจอ และอื่นๆอีกมากมาย
ปัจจัยหลักที่เกี่ยวข้องกับการท่องเว็บไซต์
เบราเซอร์คือโปรแกรมที่ใช้เพื่อดูเว็บเพจ โดยสามารถแสดงผลได้ทั้งรูปแบบตั้วอักษร,รูปภาพ และภาพเคลื่อนไหว มีเบราเซอร์หลายชนิดที่ได้รับความนิยม เช่น
ระบบปฏิบัติการ (Operating System)
ระบบปฏิบัติการเป็นปัจจัยที่มีผลต่อการทำงานของเบราเซอร์มาก โดยแต่ละระบบปฏิบัติการจะมีความแตกต่างกันในเรื่องของชนิดและรุ่นของเบราเซอร์ที่ใช้ได้ ระดับความละเอียดของหน้าจอ ชุดสีของระบบ และชนิดของตัวอักษรที่มาพร้อมกับระบบ เป็นต้น
ความละเอียดของหน้าจอ
ขนาดของหน้าจอมอนิเตอร์มีหลายขนาด เช่น 15”,17”,21” และอื่นๆ
ความละเอียดของหน้าจอ (monitor resolution) มีหน่วยเป็น Pixel
ความละเอียดของหน้าจอจะไม่ขึ้นกับขนาดของมอนิเตอร์ที่ใช้ แต่จะขึ้นกับประสิทธิภาพของการ์ดแสดงผลว่าสามารถทำได้ละเอียดแค่ไหน
จำนวนสีที่จอของผู้ใช้สามารถแสดงได้
มอนิเตอร์มีสามารถแสดงสีที่แตกต่างกัน ขึ้นอยู่กับประสิทธิภาพของการ์ดจอ
จำนวนหน่วยความจำในการ์ดจอ ที่มากขึ้นจะทำให้สามารถแสดงสีได้มากขึ้น
จำนวนสีที่การ์ดจอสามารถแสดงได้นั้น ขึ้นอยู่กับค่าความละเอียดของสี ที่เรียกว่า bit depth หรือ color depth ซึ่งก็คือจำนวนบิตที่ใช้ในการเก็บข้อมูลแต่ละพิกเซล
ความเร็วในการเชื่อมต่ออินเตอร์เน็ต
ในฐานะผู้ออกแบบเว็บไซต์จึงเป็นเรื่องที่ท้าทายที่จะต้องออกแบบเว็บไซต์ให้สวยงาม น่าสนใจ และดาวน์โหลดได้เร็ว โดยทำให้ไฟล์มีขนาดเล็กที่สุด
ขนาดหน้าต่างเบราเซอร์
ขนาดหน้าต่างเบราเซอร์มีโอกาสที่ถูกปรับเปลี่ยนเป็นขนาดเท่าไหร่ก็ได้ตามความประสงค์ของผู้ใช้
1.ออกแบบเว็บเพจให้เปลี่ยนแปลงขนาดได้ (Flexible Design)
2.ออกแบบเว็บเพจให้มีขนาดคงที่ (Fixed Design)
ความสว่างและค่าความต่างของโทนสี
นอกเหนือจากค่าแกมม่าที่มีผลต่อความสว่างของหน้าจอแล้ว ตัวผู้ใช้เองยังสามารถปรับระดับความสว่าง (Brightness) และความต่างของโทนสี (Contrast) จากมอนิเตอร์ได้
ข้อมูลสถิติ
การที่จะออกแบบเว็บให้ตรงกับกลุ่มเป้าหมายได้นั้น ขึ้นอยู่กับว่าเรารู้จักกลุ่มเป้าหมายดีเพียงใด
การสำรวจสถิติจากแหล่งข้อมูลต่างๆจะช่วยให้มองเห็นภาพของผู้ใช้มากยิ่งขึ้น
♥ บทที่ 8 การเลือกใช้สีสำหรับเว็บ (Designing Web Colors)
เลือกใช้สีสำหรับเว็บ
สีสันในเว็บเพจเป็นสิ่งสำคัญมากในการดึงดูดความสนใจของผู้ใช้ เนื่องจากสิ่งแรกที่ผู้ใช้มองเห็นจากเว็บคือสี ซึ่งเป็นสิ่งกำหนดบรรยากาศและความรู้สึกโดยรวมของเว็บไซต์
ประโยชน์ของสีในเว็บไซต์
สามารถชักนำสายตาผู้อ่านให้ไปยังทุกบริเวณในหน้าเว็บเพจที่เราต้องการได้ เช่น ข้อมูลใหม่ หรือโปรโมชั่นพิเศษ
สีช่วยเชื่อมโยงบริเวณที่ได้รับการออกแบบเข้าด้วยกัน
สีสามารถนำไปใช้ในการแบ่งบริเวณต่างๆออกจากกัน
สีสามารถใช้ในการดึงดูดความสนใจของผู้อ่าน
สีสามารถสร้างอารมณ์โดยรวมของเว็บเพจ
ช่วยสร้างระเบียบให้กับข้อความต่างๆ เช่น ใช้สีแยกระหว่างหัวเรื่องกับเนื้อเรื่อง
สามารถส่งเสริมเอกลักษณ์ขององค์กรหรือหน่วยงานนั้นๆ
วงล้อสี (Color Wheel ) เป็นรูปแบบหนึ่งในการจัดเรียงสีทั้งหมดอย่างมีเหตุผลและง่ายต่อการนำไปใช้ วงล้อสีแบบลบ ( Subtractive Color Wheel ) |
วงล้อสีแบบบวก ( Additive Color Wheel)
สีที่เป็นกลาง (Neutral Colors)
คือสีกลุ่มหนึ่งที่ไม่ได้ถูกบรรจุไว้ในวงล้อสี เพราะเป็นสีที่ไม่ได้รับอิทธิพลมากจากสีอื่น ซึ่งก็คือสีเทา ขาว และดำ
สีอ่อน สีเข้ม และโทนสี ( Tint , Shade and Tone )
ในการผสมสีกลางเข้ากับสีบริสุทธิ์ จะเกิดเป็นสีต่างๆจำนวนมากมาย สีอ่อน สีเข้ม และโทนสี มีประโยชน์อย่างมาก ในการจัดชุดของสี เพราะทำให้สีสีหนึ่งสามารถแสดงออกและให้ความรู้สึกได้หลายรูปแบบยิ่งขึ้น
ผลทางจิตวิทยาที่มีต่อสี (Color Psychology)
มนุษย์เราตอบสนองต่อสีด้วยจิตใจ ไม่ใช่สมอง เช่นบางสีอาจทำให้รู้สึกสดชื่น แต่บางสีอาจทำให้รู้สึกซึมเศร้าได้
ดังนั้นหากเราเลือกสีอย่างรอบคอบ และความเข้าใจเกี่ยวกับจิตวิทยาของสีเบื้องต้นก็จะทำให้เราเลือกใช้ชุดสีได้อย่างเหมาะสมกับอารมณ์ เนื้อหาของเว็บไซต์
สีกับอารมณ์ ความรู้สึก เเละความสัมพันธ์กับสิ่งต่างๆ
สีเเดง เเสดง ถึงพลัง อำนาจความโมโห ความก้าวร้าว
สีน้ำเงิน เเสดง ถึงความซื่อสัตย์ ความมั่นคง ปลอดภัย
สีเขียว เเสดงถึง ธรรมชาติ สุขภาพ ความยินดี
สีเหลือง เเสดงถึง ความสดใส ร่าเริง การมองโลกในเเง่ดี ความหวัง ความอบอุ่น
สีม่วง เเสดงถึง ความสูงส่ง ความสร้างสรรค์ ความรอบรู้ ความแปลกใหม่
สีส้ม เเสดงถึง กำลังความสามารถ ความเข้มเเข็ง กระตือรือร้น
สีน้าตาล เเสดงถึง ความเรียบง่าย ความสะดวกสบาย ความมั่นคง เชื่อถือได้
สีเทา แสดงถึง ความสุภาพ ความเป็นไปได้ ความมั่นคง
สีขาว เเสดงถึง ความบริสุทธฺ์ ความไร้เดียงสา ความรัก ความฉลาด
สีดำ เเสดงถึง อำนาจ ความฉลาด ความเป็นเลิศ ความสุขม รอบคอบ
♥ บทที่ 9 การออกแบบกราฟฟิกสำหรับเว็บไซต์ (Designing Web Graphics)
กราฟฟิกเป็นองค์ประกอบที่สำคัญอย่างหนึ่งของเว็บเพจ ช่วยสื่อความหมายสร้างความเข้าใจให้กับผู้ใช้ รวมทั้งช่วยสร้างความสวยงามให้เว็บไซต์น่าดูน่าชมยิ่งขึ้น ปัญหาที่มักเกิดขึ้นกับการสร้างกราฟฟิกคือ การเลือกใช้รูปแบบกราฟฟิกที่ไม่เหมาะสมกับลักษณะของรูป โดยไม่รู้จักความแตกต่างของรูปแบบกราฟฟิก ส่งผลให้รูปที่ได้มีลักษณะไม่สมบูรณ์และมีไฟล์ใหญ่เกินความจำเป็น
รูปแบบกราฟฟิกสำหรับเว็บ (GIF,JPG และ PNG )
-GIF ย่อมาจาก Graphic Interchange Format
ได้รับความนิยมในยุคแรก มีระบบสีแบบ Index ซึ่งมีข้อมูลสีขนาด 8 บิตทำให้มีสีมากสุด 256 สี มีการบีบอัดข้อมูลตามแนวของพิกเซล เหมาะสำหรับกราฟฟิกที่ประกอบด้วยสีพื้น
-JPG ย่อมาจาก Joint Photographic Experts Group
มีข้อมูลสีขนาด 24 บิต สามารถแสดงสีได้ถึง 16.7 ล้านสี ใช้ระบบบีบอัดที่มีลักษณะที่สูญเสีย ไฟล์ประเภทนี้ควรนำไปใช้กับรูปถ่ายหรือกราฟฟิกที่มีการไล่ระดับสีอย่างละเอียด
-PNG ย่อมาจาก Portable Network Graphic
สามารถสนับสนุนระบบสีได้ทั้ง 8 บิต 16 บิต และ 24 บิต มีระบบการบีบอัดแบบ Deflate ที่ไม่ทำให้เกิดการสูญเสีย มีระบบแกมม่า และความโปร่งใสในตัวเอง
ระบบการวัดขนาดของรูปภาพ
รูปภาพใช้หน่วยวัดขนาดตามหน้าจอมอนิเตอร์ นั่นก็คือหน่วยพิกเซล ซึ่งจะมีประโยชน์ในการเปรียบเทียบขนาดของการฟฟิกกับองค์ประกอบอื่นๆในหน้าเว็บ รวมถึงขนาดของหน้าต่างเบราเซอร์ด้วย ระบบความละเอียดของรูปภาพที่แสดงผลบนจอมอนิเตอร์ควรใช้หน่วย pixel per inch (ppi) แต่ในทางการใช้งานจะนำหน่วย dot per inch (dpi) ซึ่งเป็นหน่วยวัดความละเอียดของสิ่งพิมพ์มาใช้งานแทน ppi ความละเอียดของรูปภาพที่ใช้ในเว็บไซต์ควรมีความละเอียดแค่ 72 ppi ก็เพียงพอแล้ว
โปรแกรมกราฟฟิกสำหรับเว็บ
ปัจจุบันมีโปรแกรมหลายประเภทที่นำมาใช้ในการสร้างกราฟฟิกสำหรับเว็บ ได้แก่ Adobe PhotoShop,Adobe ImageReady,Firework เป็นต้น
คำแนะนำในกระบวนการออกแบบกราฟฟิกสำหรับเว็บ
ออกแบบกราฟฟิกโดยใช้ชุดสีสำหรับเว็บ (Web Palette)
เลือกใช้รูปแบบกราฟฟิกที่เหมาะสม GIF หรือ JPEG
ตัดแบ่งกราฟฟิกออกเป็นส่วนย่อย (Slices)
