Lecture

บทที่ 8 

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

 ( Designing Web Colors )

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

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

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

·   สามารถชักสายตาผู้อ่านให้ไปยังทุกบริเวณในหน้าเว็บเพจที่เราต้องการได้

·   สีช่วยเชื่อมโยงบริกเวณที่ได้รับการออกแบบเข้าด้วยกัน

·   สีสามารถนำไปใช้ในการแบ่งบริเวณต่าง ๆ ออกจากัน

·   สีสามารถใช้ในการดึงดูดความสนใจของผู้อ่าน

·   สีสามารถสร้างอารมณ์โดยรวมของเว็บเพจ

·  ช่วยสร้างระเบียบให้กับข้อความต่างๆ เช่น ใช้สีแยกหัวเรื่องกับเนื้อเรื่อง

·  สามารถส่งเสริมเอกลักษณ์ขององค์กรหรือหน่วยงานนั้นๆ 

ความรู้เบื้องต้นเกี่ยวกับสี

·  แม่สีขั้นต้น (Primary color)

         - สีแดง

         - สีเหลือง

         - สีน้ำเงิน

· แม่สีขั้นที่ 2

·  แม่สีขั้นที่ 3

· แม่สีขั้นที่ 4

การผสมสี (Color Mixing) มี 2 แบบ 

·     การผสมแบบบวก (Additive mixing)

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

                    

   การผสมแบบลบ (Subtractive mixing)

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

วงล้อสี (Color Wheel)

เป็นรูปแบบหนึ่งในการจัดเรียงสีทั้งหมดไว้ในวงกลม และเป็นการจัดลำดับเฉดสีอย่างมีเหตุผลและง่ายต่อการนำไปใช้

สีกับอารมณ์ ความรู้สึก เเละความสัมพันธ์กับสิ่งต่างๆ

สีเเดง     เเสดงถึง พลัง อำนาจความโมโห ความก้าวร้าว

 
สีน้ำเงิน   เเสดงถึง ความซื่อสัตย์ ความมั่นคง ปลอดภัย 

สีเขียว     เเสดงถึง ธรรมชาต สุขภาพ ความยินดี

สีเหลือง   เเสดงถึง ความสดใส ร่าเริง การมองโลกในเเง่ดี ความหวัง ความอบอุ่น

สีม่วง      แสดงถึง ความสูงส่ง ความสร้างสรรค์ ความรอบรู้ ความแปลกใหม่

สีส้ม       เเสดงถึง กำลังความสามารถ ความเข้มเเข็ง กระตือรือร้น

สีน้าตาล  เเสดงถึง ความเรียบง่าย ความสะดวกสบาย ความมั่นคง เชื่อถือได้

สีเทา      แสดงถึง ความสุภาพ ความเป็นไปได้ ความมั่นคง

สีขาว      เเสดงถึง ความบริสุทธฺ์ ความไร้เดียงสา ความรัก ความฉลาด

สีดำ       แสดงถึง อำนาจ ความฉลาด ความเป็นเลิศ ความสุขม รอบคอบ

บทที่ 9

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

( Designing Web Graphics )

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

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

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

           GIF ย่อมาจาก Graphic Interchange Format

·    ได้รับความนิยมในยุคแรก

·     มีระบบสีแบบ Index ซึ่งมีข้อมูลสีขนาด 8 บิต ทำให้มีสีมากสุด 256 สี

·     มีการบีบอัดข้อมูลตามแนวของพิกเซล เหมาะสำหรับกราฟฟิกที่ประกอบด้วยสีพื้น

           JPG ย่อมาจาก Joint Photographic Experts Group

·     มีข้อมูลสีขนาด 24 บิต (True Color) สามารถแสดงสีได้ถึง 16.7ล้านสี

·     ใช้ระบบการบีบอัดที่มีลักษณะที่สูญเสีย (lossy)

·     ไฟล์ประเภทนี้ควรนำไปใช้กับรูปถ่ายหรือกราฟฟิกที่มีการไล่ระดับสีอย่างละเอียด

                            PNG ย่อมาจาก Portable Network Graphic

·    สามารถสนับสนุนระบบสีได้ทั้ง 8 บิต 16 บิต และ 24 บิต

·    มีระบบการบีบอัดแบบ Deflate ที่ไม่ทำให้เกิดการสูญเสีย (lossless)

·    มีระบบการควบคุมค่าแกมม่า (Gamma) และความโปร่งใส(Transparency)ในตัวเอง

ระบบการวัดขนาดรูปภาพ

          รูปภาพที่ใช้หน่วยวัดขนาดตามหน้าจอมอนิเตอร์ คือ หน่วยพิกเซล(Pixel) ซึ่งมีประโยชน์ในการเปรียบเทียบขนาดของกราฟฟิกกับองค์ประกอบอื่นๆในหน้าเว็บ รวมถึงขนาดของหน้าต่างบราวเซอร์ด้วย

ระบบการวัดความละเอียดของรูปภาพ

          ระบบความละเอียดของรูปภาพที่แสดงผลบนจอมอนิเตอร์ควรใช้หน่วย Pixel per inch(ppi) แต่ในทางการใช้งานจะนำหน่วย dot per inch(dpi) ซึ่งเป็นหน่วยวัดความละเอียดของสิ่งพิมพ์มาใช้แทนโดยความละเอียดของรูปภาพที่ใช้ควรมีความละเอียดแค่ 72 ppi ก้อเพียงพอแล้ว

บทที่ 10 

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

 (Typography on the Web)

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

·       ตัวอักษรมีความสำคัญในการสื่อข้อความถึงผู้ใช้

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

Ascender : ส่วนบนของตัวอักษรพิมพ์เล็กที่สูงกว่าความสูง x-height ของตัวอักษร

Descender : ส่วนล่างของตัวอักษรพิมพ์เล็กที่ต่ำกว่าเส้น baseline

Baseline : เส้นสมมติที่ตัวอักษรส่วนใหญ่ตั้งอยู่ 

Cap height : ความสูงจากเส้น baseline ไปถึงส่วนบนสุดของตัวอักษรพิมพ์ใหญ่ 

X-height : ความสูงของตัวอักษร x ในแบบพิมพ์เล็ก ซึ่งมักใช้อ้างถึงความสูงของตัวอักษรที่ไม่รวม ascender และ descender  

 Point size : ระยะความสูงทั้งหมดวัดจากส่วนบนสุดถึงส่วนล่างสุดของตัวอักษร 

ค่าความสูง x-height : จะมีผลต่อภาพรวมของตัวอักษรและความยากง่ายในการอ่าน

ความสะดวกในการอ่าน (Legibility) 

·   หลีกเลี่ยงการใช้คำที่เป็นตัวพิมพ์ใหญ่ทั้งหมด เพราะจะทำให้อ่านยาก และลดความสะดุดตาลง

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

·   การใช้ตัวพิมพ์ใหญ่สำหรับตัวอักษรตัวแรกของแต่ละคำในประโยค ควรใช้อย่างจำกัด เพราะเป็นการรบกวนรูปแบบโดยรวม     ของคำ ส่งผลให้อ่านยากขึ้น

·    ไม่ควรแบ่งครึ่งสีตัวอักษรเพราะทำให้ภาพรวมของตัวอักษรขาดหายไป

สิ่งที่ควรคำนึงในการจัดข้อความให้หน้าเว็บ 

·   การจัดตำแหน่ง (Alignment)

·   ช่องว่างระหว่างตัวอักษร และช่องว่างระหว่างคำ

·   การจัดตำแหน่งแบบ justify ทำให้เกิดช่องว่างของแต่ละคำ

·   ระยะห่างระหว่างบรรทัด

·    ความยาวของหน้าเว็บ

·    ขนาดของตัวอักษร

·    ดึงดูดความสนใจด้วยอักษรตัวใหญ่

·    การเน้นข้อความให้เด่นชัด

·    การใช้สีกับตัวอักษร

·    การกำหนดขอบแบบ Aliased และ Anti-aliased

คำแนะนำในการใช้ตัวอักษรในหน้าเว็บ

·    ไม่ควรใช้ตัวอักษรชนิดที่หายากหรือไม่ได้มาพร้อมกับโปรแกรมต่างๆหรือเครื่องคอมฯ

·    ระบุชนิดตัวอักษรให้ครอบคลุม

·     กำหนดลักษณะของตัวอักษรที่อยู่ในทุกช่องของตาราง

·     ระบุขนาดของตัวษรเสมอ

·     ใช้ CSS ในการควบคุมรูปแบบการแสดงผล