LecTurE

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

เลือกใช้สีสำหรับเว็บไซต์ ( Designing Web Colors)

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

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

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

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

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

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

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

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

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

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

                                ทุกคนคงได้รู้จักแม่สีหรือสีขั้นต้น ( primary color ) ทั้งสามซึ่งประกอบด้วย สีแดง,เหลือง และน้ำเงิน มาก่อนจากการศึกษาในอดีต เหตุที่สีทั้งสามนี้ถือว่าเป็นแม่สีหลัก ก็เพราะว่าสีทั้งสามเป็นสีที่ไม่สามารถเกิดขึ้นจากการผสมของสีอื่นๆ และยังเป็นต้นกำเนิดของสีอื่นๆที่เหลือทั้งหมด ต่อไปก็เป็นสีขั้นที่ 2 ที่เกิดจากการผสมของสีขั้นต้นเข้าด้วยกัน โดยที่ สีแดงกับสีเหลืองได้เป็นสีส้ม,สีเหลืองกับน้ำเงินได้เป็นเขียว และสีน้ำเงินกับแดงได้เป็นม่วง ต่อจากนั้นก็เป็นสีขั้นที่ 3 ซึ่งเกิดจากการผสมของสีขั้นต้นกับสีขั้นที่ 2 ที่อยู่ติดกันทั้งสองด้าน ในที่สุดเราก็จะได้สีขั้นที่ 3 ทั้งหมด 6 สี โดยสีขั้นต้น 1 สี ทำให้เกิดสีขั้นที่สาม 2 สี ดังนี้ : เหลือง-ส้ม , แดง-ส้ม , แดง-ม่วง , น้ำเงิน-ม่วง ,น้ำเงิน-เขียว และเหลือง-เขียว เมื่อเรารู้ที่มาของสีต่างๆดีแล้ว ในขั้นต่อไปจะเป็นเรื่องของพื้นฐานการผสมสี การจัดระบบสี และรูปแบบของชุดสีพื้นฐาน

แสดงตัวอย่างสีขั้นต่างๆ

                                                                  สีขั้นที่ 1                                           สีขั้นที่ 2

                                               

 สีขั้นที่ 3                                                        สีขั้นที่ 4

ข้อคิดเกี่ยวกับการใช้สีในเว็บไซท์

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

                ในส่วนนี้ เป็นเรื่องของข้อคิดสั้นๆ เกี่ยวกับการใช้สีให้เกิดประโยชน์กับเว็บไซท์ 3 ข้อดังนี้

1. ใช้สีอย่าสม่ำเสมอ

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

2. ใช้สีอย่างเหมาะสม

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

3. ใช้สีเพื่อสื่อความหมาย

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

หลักการออกแบบหน้าเว็บ

สร้างลำดับชั้นความสำคัญขององค์ประกอบ (Visual Hierarchy)

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

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

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

สร้างความสม่ำเสมอตลอดทั่วทั้งเว็บไซต์

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

                ในทางเทคนิคคุณสามารถใช้ Cascading Style Sheet (CSS)  ช่วยในการกำหนดสไตล์มาตรฐานให้กับองค์ประกอบต่าง ๆ  เช่น  ตัวอักษร  สี  หรือตาราง  โดยที่กำหนดรูปแบบเพียงครั้งเดียว  แล้วสามารถนำไปใช้ได้กับข้อมูลทั้งหมดในเว็บไซต์  ทำให้เกิดความสะดวกในการออกแบบ  และยังง่ายต่อการเปลี่ยนแปลงในภายหลัง

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

การวางองค์ประกอบที่สำคัญไว้ในส่วนบนของหน้าเสมอ

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

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

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

  

        กราฟฟิกเป็นองค์ประกอบสำคัญของเว็บเพจ ซึ่งปัญหาส่วนใหญ่ที่เกิด
ขึ้นมักจะเกิดขึ้นกับการสร้างกราฟฟิก คือการใช้ลักษณะรูปแบบกราฟฟิกที่
ไม่เหมาะสมกับลักษณะของรูป
       
กราฟฟิกรูปแบบหลัก 2 ประเภท
        1. GIF ย่อมาจาก Graphic Interchange Format
            - ได้รับความนิยมในยุดแรก
            - มีข้อมูลสีขนาด 8 บิต ทำให้มีสีมากสุด 256 สี
            - การบีบอัดข้อมูลตามแนวของพิกเซล เหมาะสำหรับกราฟฟิกที่
              ประกอบด้วย สีพื้น
         2. JPG ย่อมาจาก Joint Photographic Experts Group
            - มีข้อมูลสีขนาด 24 บิต แสดงสีได้ถึง 16.7 ล้านสี
            - ใช้ระบบการบีบอัดที่มีลักษณะที่สูญเสีย(lossy)
            - ควรนำไปใช้กับรูปถ่ายหรือกราฟฟิกที่มีการไล่ระดับสีอย่างละเอียด
         3. PNG ย่อมาจาก Portable Network Graphic
            - สามารถสนับสนุนสีได้ทั้ง 8 บิต 16 บิต และ 24 บิต
            - การบีบอัดแบบ Deflate ที่ไม่ทำให้เกิดการสูญเสีย(lossless)
            - ควบคุมแกมม่า (Gamma) และความโปร่งใส(Transparency) ในตัวเอง
ระบบการวัดขนาดของรูปภาพ

            - ใช้หน่วยวัดเป็น พิกเซล

            - ความละเอียดของภาพควรใช้ หน่วย pixle per inch (ppi)

            - การใช้งานจะนำหน่วย dot per inch (dpi) จะเหมาะสมกับเครื่องพริ้นท์

            - ควรมีความละเอียดแค่ 72 ppt

        

กระบวนการพัฒนาเว็บไซต์

การจัดระบบโครงสร้างข้อมูล (Information Architecture)

               ในกระบวนการพัฒนาเว็บไซต์ที่กำลังจะได้ศึกษาต่อไปนี้ได้อาศัยหลักการจัดระบบโครงสร้างข้อมูลที่เรียกว่าInformation Architecture  อยู่ในหลาย ๆ  ส่วน  ตั้งแต่ขั้นแรกจนถึงขั้นที่ได้เป็นรูปแบบโครงสร้างสุดท้าย (Final Architecture Plan)  ซึ่งถือเป็นกระบวนการที่สำคัญมากที่จะทำให้เว็บไซต์บรรลุตามเป้าหมายที่ตั้งไว้

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

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



กระบวนการ 13 ขั้นตอนในการพัฒนาเว็บไซต์