Designing Web Colors

การเลือกใช้สีสำหรับเว็บไซต์

• สีสันในเว็บเพจเป็นสิ่งที่สำคัญมากในการดึงดูดความสนใจของผู้ใช้ เนื่องจากสิ่งแรกที่ผู้ใช้มองเห็นจากเว็บก็คือสี ซึ่งเป็นสิ่งที่กำหนดบรรยากาศและความรู้สึกโดยรวมของเว็บไซต์
• เราสามารถใช้สีได้ตั้งแต่ รูปภาพ ตัวอักษร สีพื้นหลัง การใช้สีก็จะช่วยในการสื่อความหมายของเนื้อหา
• การใช้สีพื้นใกล้เคียงกับสีตัวอักษร บางครั้งอาจสร้างความลำบากในการอ่าน
• การใช้สีมากเกินความจำเป็น อาจสร้างความสับสนให้กับผู้อ่านได้
• การใช้สีที่กลมกลืนกัน ช่วยให้เว็บไซต์น่าดูมากยิ่งขึ้น

ประโยชน์ของสีในเว็บไซต์

• สามารถชักนำสายตาผู้อ่านให้ไปยังทุกบริเวณในหน้าเว็บเพจที่เราต้องการได้ เช่น ข้อมูลใหม่ๆ
• สีช่วยเชื่อมโยงบริเวณที่ได้รับการออกแบบเข้าด้วยกัน
• สีสามารถใช้ในการดึงดูดความสนใจของผู้อ่าน
• สีสามารถสร้างอารมณ์โดยรวมของเว็บเพจ
• ช่วยสร้างระเบียบให้กับข้อความต่างๆ เช่น ใช้สีแยกระหว่างหัวเรื่อกับเนื้อเรื่อง
• สามารถส่งเสริมเอกลักษณ์ขององค์กรหรือหน่วยงานนั้นๆ

รูปแบบชุดสีพื้นฐาน

• ชุดสีร้อน (Warm Color Scheme) ประกอบด้วย สีม่วงแดง, แดงแกมม่วง, แดง, ส้ม, เหลือง และเขียวอมเหลือง  สีเหล่านี้สร้างความอบอุ่น สบาย และรู้สึกต้อนรับแก่ผู้ชม
• ชุดสีเย็น (Cool Color Scheme) ประกอบด้วย สีม่วง, น้ำเงิน, น้ำเงินอ่อน, ฟ้า, น้ำเงินแกมเขียว และสีเขียว สีเหล่านี้ให้ความรู้สึกเย็นสบาย องค์ประกอบที่ใช้สีเย็นดูเรียบร้อย
• ชุดสีแบบเดียว (Monochromatic Color Scheme) เป็นรูปแบบชุดสีที่ง่าย คือมีค่าของสีบริสุทธิ์เพียงสีเดียว แต่เพิ่มความหลากหลายโดยการเพิ่มความเข้ม อ่อน ในระดับต่างๆ



Designing Web Graphics

การออกแบบกราฟฟิกสำหรับเว็บไซต์

          กราฟฟิกเป็นองค์ประกอบที่สำคัญอย่างหนึ่งของเว็บเพจ ช่วยสื่อความหมายสร้างความเข้าใจให้กับผู้ใช้ รวมทั้งช่วยสร้างความสวยงามให้เว็บไซต์น่าดูชมยิ่งขึ้น

รูปแบบกราฟฟิกสำหรบเว็บ (GIF, JPEG และ PNG)

• GIF ย่อมาจาก Graphic Interchange Format ได้รับความนิยมในยุคแรก มีระบบสีแบบIndex ซึ่งข้อมูลสีขนาด8บิต ทำให้สีมีมากสุด256สี มีการบีบอัดข้อมูลตามแนวนอนของพิกเซล เหมาะสำหรับกราฟฟิกที่ประกอบด้วยสีพื้น
•  JPEG ย่อมาจาก Joint Photographic Experts Group มีข้อมูลสีขนาด24บิต สามารถใช้สีได้ถึง16.7ล้านสี ใช้ระบบการบีบอัดที่มีลักษณะที่สูญเสีย ไฟล์ประเภทนี้นำควรนำไปใช้กับรูปถ่ายหรือกราฟฟิกที่มีการไล่ระดับสีอย่างละเอียด
• PNG ย่อมาจาก Portable Network Graphic สามารถสนับสนุนระดับสีได้ทั้ง8บิต 16บิต และ24บิต มีระบบการบีบอัดแบบ Deflate ที่ไม่มีการสูญเสีย มีระบบการควบคุมค่าแกมม่าและความโปร่งใสในตัวเอง

Typography on the Web

จัดรูปแบบตัวอักษรสำหรับเว็บไซต์

            ตัวอักษรมีความสำคัญในการสื่อข้อความถึงผู้ใช้ ตัวอักษรมีหลายชนิด แต่ละชนิดจะให้อารมณ์และความรู้สึกที่แตกต่างกัน ควรเลือกใช้ตัวอักษรให้เหมาะสมกับเนื้อหาและข้อมูลที่ต้องการสื่อ

ส่วนประกอบของตัวอักษร

• Descender : ส่วนล่างของตัวอักษรพิมพ์เล็กที่ต่ำกว่าเส้น baseline
• Baseline : เส้นสมมติที่ตัวอักษรส่วนใหญ่ตั้งอยู่
• Cap height : ความสูงจากเส้น baseline ไปถึงส่วนบนสุดของตัวอักษรพิมพ์ใหญ่
• X – height : ความสูงของตัวอักษร x ในแบบพิมพ์เล็ก ซึ่งมักใช้อ้างถึงความสูงของตัวอักษรที่ไม่รวม ascender และ descender
• Point size : ระยะความสูงของตัวอักษรทั้งหมดวัดจากส่วนบนสุดถึงส่วนล่างสุดของตัวอักษร 1 point มีขนาดเท่ากับ 1/72 นิ้ว
• ค่าความสูง x – height จะมีผลต่อภาพรวมของตัวอักษรและความยากง่ายในการอ่าน