การเลือกใช้สีสำหรับเว็บไซต์
Designing Web Colors
เลือกใช้สีสำหรับเว็บไซต์
สีสันในเว็บไซต์เป็นสิ่งที่สำคัญมากในการดึงดูดความสนใจของผู้ใช้ เนื่องจากสิ่งแรกที่ผู้ใช้มองเห็นจากเว็บก็คือสีซึ่งเป็นสิ่งกำหนดบรรยายกาศและความรู้สึกโดยของเว็บไซต์
เราสมารถใช้สีได้ทุกองค์ประกอบของเว็บเพจ ตั้งแต่รูปภาพ ตัวอักษร สีพื้นหลัง การใช้สีที่เหมาะสมจะช่วยในการสื่อความหมายของเนื้อหา
ประโยชน์ของสีในเว็บไซต์
-สามารถชักนำสายตาให้ไปยังบริเวณในหน้าเว็บเพจที่เราต้องการได้ เช่น ข้อมูลใหม่ หรือโปรโมชั่นพิเศษ
-สีสามารถเชื่อมโยงบริเวณที่ได้รับการออกแบบเข้าด้วยกัน
-สีสามารถนำไปใช้ในการแบ่งบริเวณต่างๆ ออกจากกัน
-สีสามารถใช้ในการดึงดูดความสนใจของผู้อ่าน
-สีสามารถสร้างอารมณ์โดยรวมของเว็บเพจ
การผสมสี(Color Mixing)
มี 2 แบบ
1 การผสมแบบบวก(Additive mixing)
จะเป็นรูปแบบการผสมของแสงไม่ใช่การผสมของวัตถุที่มีสีบนกระดาษ
การนำไปใช้งาน
จะนำไปใช้ในสื่อใดๆ ที่ใช้แสงออกมา เช่น จอโปรเจคเตอร์ ทีวี หรือจอมอนิเตอร์
-การผสมแบบลบ (Subtractive mixing)
การผสมสีแบบนี้ไม่เกี่ยวข้องกับแสงแต่เกี่ยวเนื่องกับการดูดกลืนและสะท้อนแสงของวัตถุต่างๆ
การนำไปใช้งาน
จะนำไปใช้ในเสื่อที่เกี่ยวข้องกับการใช้วัตถุมีสี เช่น ภาพวาดของศิลปิน รูปปั้น หรือ สิ่งพิมพ์ต่างๆ
ผลทางจิตวิทยาที่มีต่อสี (Color Psychology)
มนุษย์เราตอบสนองต่อสีด้วยจิตใจ ไม่ใช่สมอง เช่นสีบางสีอาจทำให้รู้สึกสดชื่น แต่บางสีอาจทำให้รู้สึกซึมเศร้าได้
ดังนั้นหากเราเลือกสีอย่างรอบคอบ และความเข้าใจเกี่ยวกับจิตวิทยาของสีเบื้องต้นก็จะทำให้เราเลือกใช้ชุดสีได้อย่างเหมาะสมกับอารมณ์ เนื้อหาของเว็บไซต์
ความหมายของสี
ความหมายของสี
สีแดง ความหายในทางที่ดี พลัง อำนาจ ความรัก ความอบอุ่น ความจริง กำลังใจ ความแข็งแรง ความเร็ว ความตื่นเต้น ความสนุกสนาน
ความหายในทางที่ไม่ดี ความโมโห ความก้าวร้าว ความอันตราย ความละอาย ความรุนแรง ความผิดพลาด
สีน้ำเงิน ความหายในทางที่ดี ความสื่อสัตย์ ความมั่นคง ปลอดภัย ความสะอาด ความเป็นระเบียบ ความมีคุณธรรม ความเชื่อมั่น ความกลมกลืน
ความหายในทางที่ไม่ดี ความหดหู่ ซึมเศร้า เสียใจ ความโมโห
สีเขียว ความหายในทางที่ดี ธรรมชาติ สุขภาพ ความยินดี การมีโชคดี การเริ่มต้นใหม่ ความปลอดภัย ความหวัง ความสมบรูณ์ ความเป็นอมตะ ความภักดี
ความหายในทางที่ไม่ดี อิจฉา ริษยา โชคร้าย ขาดประสบการณ์ ความเบื่อหน่าย
สีเหลือง ความหายในทางที่ดี คามสดใส ร่าเริง การมองโลกในแง่ดี ความหวัง ความอบอุ่น ธรรมะ ปรัชญา ความสุข ความคิดฝัน
ความหายในทางที่ไม่ดี ความไม่สื่อสัตย์ ทรยศ ความขลาดกลัว ความอิจฉา ความเจ็บป่วย การหลอกลวง ความไม่แน่นอน
สีม่วง ความหายในทางที่ดี ความสูงส่ง ความซื่อสัตย์ ความสร้างสรรค์ การเปลี่ยนรูปแบบ ความแปลกใหม่ ความรอบรู้ การให้ความรู้
ความหายในทางที่ไม่ดี ความลึกลับ ความโหดร้าย ความหยิ่งยโส ความโศกเศร้า เสียใจ
การออกแบบกราฟิกสำหรับเว็บไซต์
designning Web Graphics
กราฟิกเป็นองค์ประกอบที่สำคัญอย่างหนึ่งของเว็บเพจ ช่วยสื่อความหมายสร้างความเข้าใจให้กับผู้ใช้ รวมทั้งช่วยสร้างความสวยงามให้เว็บไซต์น่าดูชมยิ่งขึ้น
ปัญหาที่เกิดกับการสร้างกราฟิกคือ การใช้รูปแบบกราฟิกที่ไม่เหมาะสมกับลักษณะของรูปโดยไม่รู้จักความแตกต่างของรูปแบบกราฟิก ส่งผลให้รูปที่ได้มีลักษณะและมีไฟล์ใหญ่เกินความจำเป็น
รูปแบบกราฟิกสำหรับเว็บ (gif,jpg และ png)
gif ย่อมาจาก graphic interchange format
-มีระบบสีแบบ index ซึ่งมีข้อมูลสีขนาด 8 บิต ทำให้มีสีมากสุด 256 สี
-มีการบีบอัดข้อมูลตามแนวของพิกเซล เหมาะสำหรับกราฟิกที่ประกอบด้วยสีพื้น
กราฟิกแบบ gif
รูปที่ประกอบด้วยหลายๆ เฟรมในรูปเดียวกัน เมื่อมีการแสดงผลจะเห็นรูปมีการเปลี่ยนแปลงตามเฟรมต่างๆ ที่มีอยู่อย่างต่อเนื่อง
ข้อดี ไม่ต้องอาศัย plug-in ใดๆ เนื่องจากเบราเซอร์สนับสนุนคุณสมบัตินี้
ข้อคิดในการใช้ gif
-ใช้ภาพเคลื่อนไหวที่ต้องการให้ผู้ชมสนใจมากที่สุด
-ไม่ควรใช้ภาพเคลื่อนไหวมากเกินไป จะทำให้ผู้ใช้สับสน
jpg ย่อมาจาก joint photographic Experts Group
-มีข้อมูลสีขนาด 24 บิต (true Color) สามารถแสดงสีได้ถึง 16.7 ล้านสี
-ใช้ระบบการบีบอัดที่มีลักษณะที่สูญเสีย(lossy)
-ไฟล์ประเภทนี้ควรนำไปใช้กับรูปถ่ายหรือกราฟิกที่มีการไล่ ระดับสีอย่างละเอียด
ระบบการบีบอัดข้อมูลในไฟล์ jpeg
-เป็นการบีบอัด lossy คือสูญเสียรายละเอียดบางส่วนของภาพไป
-อาศัยประโยชน์จากการที่สายตาคนเราสามารถสังเกตเห็นการเปลี่ยนแปลงอย่างช้าๆ ในบริเวณกว้างๆ ได้ดีกว่าการเปลี่ยนแปลงในบริเวณแคบๆ
การลดขนาดไฟล์ jpeg
-เนื่องจากจำนวนบิตของสีในไฟล์ jpeg เป็น 24 บิตเสมอจึงไม่สามรถลดขนาดไฟล์โดยการลดขนาดไฟล์โดยการลดจำนวนบิตของสีลงได้
-การลดขนาดไฟล์ทำได้โดยการบีบอัดในอัตราที่สูง ทั้งนี้ก็ขึ้นอยู่กับคุณภาพที่การด้วย
png ย่อมาจาก Portable Network Graphic
-สามารถสนับสนุนระบบสีได้ทั้ง 8บิต 16บิต และ 24บิต
-มีระบบการบีบอัดแบบ Deflate ที่ไม่ทำให้เกิดการสูญเสีย (lossless)
-มีระบบการควบคุมค่าแกมม่า(Gamma)และความโปร่งใส(Transparency)ในตัวเอง
จัดรูปแบบตัวอักษรสำหรับเว็บไซต์
Typography on the web
ตัวอักษรมีความสำคัญในการสื่อข้อความถึงผู้ใช้
ตัวอักษรมีหลายชนิด แต่ละชนิดจะมีอารมณ์และความรู้สึกที่แตกต่างกัน ควรเลือกใช้ตัวอักษรที่เหมาะสมกับเนื้อหาและข้อมูลที่ต้องการสื่อ
รูปแบบตัวอักษร
แบ่งเป็น 2 ประเภทใหญ่ๆ
ตัวอักษรที่มีขนาดสัมพันธ์กับรูปร่างหรือตัวอักษรที่มีขนาดไม่คงที่
ตัวอักษรที่มีขนาดสัมพันธ์กับรูปร่างหรือตัวอักษรที่มีขนาดไม่คงที่
-ตัวอักษรแต่ละตัวมีพื้นที่ตามแนวนอนไม่เท่ากันขึ้นอยู่กับรูปร่างของตัวอักษรนั้น
-สิ่งพิมพ์ต่างๆ ที่ผลิตด้วยคอมพิวเตอร์ส่วนใหญ่จะถูกออกแบบโดยใช้ตัวอักษรแบบนี้ เพื่อให้ดูเหมาะสมและอ่านง่าย
ตัวอักษรที่มีขนาดคงที่
-จะเป็นตัวอักษรทีมีพื้นที่ตามแนวนอนเท่ากันหมด ซึ่งเป็นรูปแบบที่เรียบง่ายและมีลักษณะคล้ายตัวพิมพ์ดีด
ตัวอักษรประเภท Serif
-ตัวอักษรประเภทนี้จะมีลายเส้นเพิ่มขึ้นที่ส่วนปลาย(บางคนเรียกตัวอักษรมีฐาน)
-เช่น Times New Roman,Garamaond,Georgia เป็นต้น
-ตัวอักษรประเภทนี้เหมาะที่จะใช้ในส่วนที่เป็นรายละเอียดเนื้อหา
-ไม่เหมาะกับการใช้เป็นตัวหนา
การจัดข้อความในหน้าเว็บ
ความยาวของหน้าเว็บ
-หน้าเว็บทียาวมากๆ จะทำให้ผู้ชมรู้สึกเหนื่อยล้าที่จะอ่าน
ควรจัดแบ่งเป็น paragraph หรือตัดแบ่งเป็นหลายๆ หน้า
ขนาดตัวอักษร
-ใช้ตัวอักษรหลายขนาดเพื่อนสร้างลำดับความสำคัญของข้อมูล
-ลำดับในการอ่านโดยทั่วไป ผู้อ่านจะอ่านจากบนลงล่างและจากซ้ายไปขวา
การเน้นข้อความให้เด่นชัด
-การใช้ขนาดและน้ำหนักของตัวอักษร
-การทำตัวเอียง
-การขีดเส้นใต้
-ตำแหน่งของตัวอักษร
-แนวทางของตัวอักษร
-พื้นที่ว่าง
การใช้สีกับตัวอักษร
-กำหนดสีหลักสำหรับเว็บ
-ใช้สีของตัวอักษรอย่างมีความสม่ำเสมอ
-ใช้สีที่แตกต่างกันในแต่ละส่วนของข้อมูล
-กำหนดสีของ link ให้เหมาะสม
