Lecture

การใช้สีในการออกแบบเว็บไซต์

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

        ระบบสีที่แสดงบนจอคอมพิวเตอร์ มีระบบการแสดงผลผ่านหลอดลำแสงที่เรียกว่าCRT (Cathode ray tube) โดยมีลักษณะระบบสีแบบบวก อาศัยการผสมของของแสงสีแดง สีเขียว และสีน้ำเงิน หรือระบบสี RGB สามารถกำหนดค่าสีจาก 0 ถึง 255 ได้ จากการรวมสีของแม่สีหลักจะทำให้เกิดแสงสีขาว มีลักษณะเป็นจุดเล็ก ๆ บนหน้าจอไม่สามารถมองเห็นด้วยตาเปล่าได้ จะมองเห็นเป็นสีที่ถูกผสมเป็นเนื้อสีเดียวกันแล้ว จุดแต่ละจุดหรือพิกเซล (Pixel) เป็นส่วนประกอบของภาพบนหน้าจอคอมพิวเตอร์ โดยจำนวนบิตที่ใช้ในการกำหนดความสามารถของการแสดงสีต่าง ๆ เพื่อสร้างภาพบนจอนั้นเรียกว่า บิตเด็ป (Bit-depth) ในภาษา HTML มีการกำหนดสีด้วยระบบเลขฐานสิบหก ซึ่งมีเครื่องหมาย (#) อยู่ด้านหน้าและตามด้วยเลขฐานสิบหกจำนวนอักษรอีก 6 หลัก โดยแต่ละไบต์ (byte) จะมีตัวอักษรสองตัว แบ่งออกเป็น 3 กลุ่ม เช่น #FF12AC การใช้ตัวอักษรแต่ละไบต์นี้เพื่อกำหนดระดับความเข้มของแม่สีแต่ละสีของชุดสี RGB โดย 2 หลักแรก แสดงถึงความเข้มของสีแดง2 หลักต่อมา แสดงถึงความเข้มของสีเขียว 2 หลักสุดท้ายแสดงถึงความเข้มของสีน้ำเงิน

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

1. สีโทนร้อน (Warm Colors) เป็นกลุ่มสีที่แสดงถึงความสุข ความปลอบโยน ความอบอุ่น และดึงดูดใจ สีกลุ่มนี้เป็นกลุ่มสีที่ช่วยให้หายจากความเฉื่อยชา มีชีวิตชีวามากยิ่งขึ้น

2. สีโทนเย็น (Cool Colors) แสดงถึงความที่ดูสุภาพ อ่อนโยน เรียบร้อย เป็นกลุ่มสีที่มีคนชอบมากที่สุด สามารถโน้มนาวในระยะไกลได้

3. สีโทนกลาง (Neutral Colors) สีที่เป็นกลาง ประกอบด้วย สีดำ สีขาว สีเทา และสีน้ำตาล กลุ่มสีเหล่านี้คือ สีกลางที่สามารถนำไปผสมกับสีอื่น ๆ เพื่อให้เกิดสีกลางขึ้นมา

             

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

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

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

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

• Ascender  ส่วนบนของตัวอักษรพิมพ์เล็ก  ที่สูงกว่าความสูง x-height ของตัวอักษร
• Descender  ส่วนล่างของตัวอักษรพิมพ์เล็กที่ต่ำกว่าเส้น baseline  ของตัวอักษร
• Baseline  เส้นสมมุติที่ตัวอักษรส่วนใหญ่ตั้งอยู่
• Cap height  ความสูงจากเส้น baseline  ไปถึงส่วนบนสุดของตัวอักษรพิมพ์ใหญ่
• x-height   หมายถึง  ความสูงของตัวอักษร x  ในแบบพิมพ์เล็ก  ซึ่งมักจะใช้อ้างถึงความสูงของตัวอักษรที่ไม่รวมส่วนบนและส่วนล่าง

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

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

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

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

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

กำหนดสีหลักสำหรับเว็บ

                เว็บไซท์ที่ดีอาจไม่จำเป็นต้องใช้สีจำนวนมากอย่างที่คิด โดยทั่วไปแล้วเว็บไซท์ต้องการสีหลักจำนวน ถึง 7 สีที่จะใช้ประจำสำหรับองค์ประกอบต่างๆ ในเว็บเพจ
 

ใช้สีของตัวอักษรอย่างมีความหมายและสม่ำเสมอ

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

  

ใช้สีที่แตกต่างกันในแต่ละส่วนข้อมูล

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

กำหนดสีของลิงค์ให้เหมาะสม

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

สีกับการพิมพ์เว็บเพจ

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

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

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

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

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

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

     *  JPG  ย่อมาจาก  Joint  Photogtaphic  Experts  Group

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

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

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

     *  PNG  ย่อมาจาก  Portable  Network  Graphic   สามารถสนับสนุนระบบสีได้ทั้ง 8บิต 16 บิต และ 24 บิต   มีระบบการบีบอัดแบบ Deflate ที่ไม่ทำให้เกิดการสูญเสีย (lossless) มีระบบการควบคุมค่าแกมม่า (Gamma)  และความโปร่งใส (Transparency)ในตัวเอง

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

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

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

  * ระบบความละเอียดของรูปภาพที่แสดงผลบนจอมอนิเตอร์ควรใช้หน่วย pixel per inch (ppi)

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

  * ความละเอียดของรูปภาพที่ใช้ในเว็บไซต์ควรมีความละเอียดแค่ 72 ppi ก็เพียงพอแล้ว

โปรแกรมกราฟฟิกสำหรับเว็บ

     * ปัจจุบันมีโปรแกรมหลายประเภททีนำมาใช้ในการสร้างกราฟฟิกสำหรับเว็บ

          - Adobe   PhotoShop

          - Adobe  ImangeReady

          - Firework    

     * ค่าพื้นฐานที่สามารถเลือกปรับได้คือ  รูปแบบไฟล์,  ชุดสีที่ใช้ ,  จำนวนสี,  ระดัความสูญเสีย,  ความโปร่งใส และสีพื้นหลัง

คำแนะนำในกระบวนการออกแบบกราฟฟิกสำหรับเว็บ

     * ออกแบบกราฟฟิกโดยใช้ชุดสีสำหรับเว็บ (Web  Palette)

     * เลือกใช้รูปแบบกราฟฟิกที่เหมาะสม GIF หรือ JPEG

     * ตัดแบ่งกราฟฟิกออกเป็นส่วนย่อย (Slices)