Lecture

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

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

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

• การใช้สีพื้นใกล้เคียงกับสีตัวอักษร บางครั้งอาจสร้างความลำบากในการอ่าน

            - การใช้สีที่มากเกินความจำเป็นอาจสร้างความสับสนให้กับผู้อ่าน

            - การใช้สีที่กลมกลืนกันช่วยให้เว็บไซต์น่าดูชมมากยิ่งขึ้น

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

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

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

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

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

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

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

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

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

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

2.การผสมแบบลบ(Subtractive mixing) การผสมสีแบบนี้ไม่เกี่ยวข้องกับแสง แต่เกี่ยวเนื่องกับการดูดกลืนและสะท้อนแสงของวัตถุต่างๆสามารถนำไปใช้ในสื่อที่เกี่ยวข้องกับการใช้วัตถุมีสี

เช่น ภาพวาดของศิลปิน รูปปั้น หรือ สิ่งพิมพ์ต่าง ๆ

ความกลมกลืนของสี

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

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

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

1. ชุดสีร้อน (WarmColorScheme) 

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

2. ชุดสีแบบเดียว(MonochromaticColorScheme)

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

3. ชุดสีที่คล้ายคลึงกัน(AnalogousColorScheme)

ประกอบด้วยสี 2หรือ 3สีที่ติดอยู่กันในวงล้อ สามารถเพิ่มเป็น4หรือ5สีได้แต่อาจส่งผลให้ขอบเขตของสีกว้างไป

4.ชุดสีตรงข้ามข้างเคียง(SplitComplementaryColorScheme)

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

5.ชุดสีตรงข้ามข้างเคียงทั้ง2ด้าน(DoubleSplitComplementaryColor Scheme)

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

6. ชุดสีเย็น(CoolColorScheme)

 เว็บเพจที่ใช้โทนสีเย็นให้บรรยากาศคล้ายทะเลรู้สึกเย็นสบาย

7.ชุดสีแบบสามเส้า(TriadicColorScheme)

เป็นชุดสีที่อยู่ที่มุมของสามเหลี่ยมด้านเท่าทั้งสาม ซึ่งเป็นสีที่มีระยะห่างในวงล้อสีเท่ากันจึงมีความเข้ากันอย่างลงตัว

8. ชุดสีตรงข้าม(ComplementaryColorScheme)

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

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

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

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

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

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

ปัญหาเกี่ยวกับขนาดไฟล์ของกราฟิก

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

ลดขนาดไฟล์กราฟิกสำหรับเว็บ (Optimizing Web Graphic)

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

การออกแบบเว็บไซต์ให้เหมาะกับสิ่งแวดล้อม

ปัจจัยหลักที่เกี่ยวข้องกับการท่องเว็บไซต์

       

1. เบราเซอร์ที่ใช้ เบราเซอร์

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

เช่น Internet Explorer , Netscape NavigatorOpera , Mozilla , Firefox ปัจจุบัน

ได้มีองค์กรกลางได้ทำการกำหนดมาตรฐานเพื่อให้เป็นมาตรฐานกลาง คือ W3C

        

2. ระบบปฏิบัติการ(Operating System) 

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

มาพร้อมกับระบบ

         

3. ความละเอียดของหน้าจอ ความละเอียดx480 

หมายถึง หน้าจอมีจุดพิกเซลเรียงตัวตามแนวนอน 640 พิกเซล และตามแนวตั้ง 480 ความละเอียดของ

หน้าจอจะขึ้นอยู่กับประสิทธิภาพของการ์ดแสดงผล

         

4. จำนวนสีที่จอของผู้ใช้สามารถแสดงได้ 

จำนวนสีที่การ์ดจอสามารถแสดงได้นั้นขึ้นอยู่กับค่าความละเอียดของสีที่เรียกว่า bit depthหรือ color depthซึ่งก็คือ จำนวนบิตที่ใช้ในการเก็บข้อมูลแต่ละพิกเซล ชุดสีสำหรับเว็บ(Web Palette) หมายถึง ชุดสีจำนวน 216 สีที่มีอยู่เหมือนกันในระบบปฏิบัติการWindows และ Mac

        

 5. ชนิดของตัวอักษรที่มีอยู่ในเครื่องของผู้ใช้

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

         - MS SansSerif เป็นฟอนต์แบบบิตเเมพ(bitmapped font)

         - Microsoft Sans Serif เป็นฟอนต์แบบเวคเตอร์หรือลายเส้น(vector font)

           สามารถปรับขนาดได้อย่างไม่จำกัด

ข้อดี

     1. สามารถกำหนดลักษณะของตัวอักษรได้อย่างแน่นอนทั้งชนิด ขนาด สี

     2. สามารถมองเห็นได้โดยไม่จำเป็นต้องมีตัวอักษรชนิดนั้นติดตั้งไว้ในเครื่อง

     3. สามารถสร้างเอกลักษณ์เฉพาะตัวของเว็บได้จากรูปแบบของตัวอักษร

ข้อเสีย

     1. ใช้เวลาในการ Downlond มาก

     2. ลำบากในการแก้ไขและเปลี่ยนแปลง

     3. ข้อความเป็นกราฟฟิกจะไม่สามารถค้นหาได้ด้วย search engine

        

 6. ความเร็วในการเชื่อมต่ออินเตอร์เน็ต 

จะมีผลต่อเวลาที่ใช้ในการแสดงผลของเว็บ ความเร็วของอินเตอร์เน็ตมีหลายระดับ คือ - ผู้ใช้ตามบ้าน จะใช้ความเร็ว56 kbps

           ** หน่วยงานบางแห่ง จะใช้ความเร็วสูง เช่น ADSL , Cable modem ซึ่งมี

                ความเร็วตั้งแต่ 128 kbpsจนถึง 10 kbps

       

  7. ขนาดหน้าต่างเบราเซอร์

           ** ออกแบบเว็บเพจให้เปลี่ยนแปลงขนาดได้(Flexible Design)องค์

                ประกอบทั้งหมดจะมีการจัดเรียงตัวกันใหม่ ตามขนาดพื้นที่ใหม่

ข้อดี

     1.พื้นที่หน้าจอทั้งหมดถูกใช้อย่างเต็มที่

     2. เว็บเพจจะถูกจัดเรียงในรูปแบบที่เหมาะสมกับหน้าจอเสมอ

ข้อเสีย

     1.ไม่สามารถคาดการณ์รูปแบบที่จะปรากฏต่อสายตาผู้ชมได้

           ** ออกแบบเว็บเพจให้มีขนาดคงที่(Fixed Design) ผู้ที่ต้องการควบ

                คุมโครงสร้างของหน้าเว็บให้คงที่เสมอ

ข้อดี

     1. เว็บเพจจะปรากฏต่อสายตาผู้ใช้เป็นรูปแบบเดียวกันเสมอ

     2. สามารถควบคุมความยาวของตัวอักษรในบรรทัดได้ดี ทำให้ตัวอักษร

         ไม่ยาวเกินไป

ข้อเสีย

     1. ต้องอาศัย scroll bar ในการเลื่อนดูข้อมูล

        

  8. ความสว่างและค่าความต่างของโทนสี

            ** สามารถปรับความสว่าง(Brightness) และความต่างของโทนสี

                 (Contrast) จากมอนิเตอร์ได้

            ** ต้องระวังไม่ให้หน้าเว็บมีโทนสีมืดหรือสว่างจนเกินไป และความ

                 เลือกใช้โทนสีที่ต่างกันพอสมควร

            ** ต้องหลีกเลี่ยงตัวหนังสือสีส้มบนพื้นแดง

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

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

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

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

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

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

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

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

รูปแบบตัวอักษร

     แบ่งได้ 2 ประเภทใหญ่ๆ

1. ตัวอักษรที่มีขนาดสัมพันธ์กับรูปร่าง (Proportional Font) หรือตัวอักษรที่มีขนาดไม่คงที่่

• ตัวอักษรแต่ละตัวมีพื้นที่ตามแนวนอนไม่เท่ากันขึ้นกับรูปร่างของตัวอักษรนั้น

• สิ่งพิมพ์ต่างๆ ที่ผลิตด้วยคอมพิวเตอร์ส่วนใหญ่จะถูกออกแบบนี้ เพื่อให้ดูเหมาะสมและอ่านง่าย

2. ตัวอักษรที่มีขนาดคงที่ (Fixed-width Font)

• จะเป็นตัวอักษรที่มีพื้นที่ตามแนวนอนเท่ากันหมด ซึ่งเป็นรูปแบบที่เรียบง่ายและมีลักษณะคล้ายตัวพิมพ์ดีด

ตัวอักษรประเภท serif และ sans-serif

          ตัวอักษรประเภท Serif

• ตัวอักษรประเภทนี้จะมีลายเส้นเพิ่มขึ้นที่ส่วนปลาย(บางคนเรียกตัวอักษรมีฐาน)

• เช่น Times New Roman, Garamond, Georgia เป็นต้น

• ตัวอักษรประเภทนี้เหมาะที่จะใช้ในส่วนที่เป็นรายละเอียดเนื้อหา

• ไม่เหมาะกับการใช้เป็นตัวหนา

         ตัวอักษรประเภท Sans-Serif

• ไม่มีลายเส้นตกแต่งติดอยู่กับตัวอักษร

• เช่น Arial, Verdana, Geneva เป็นต้น

• เหมาะที่จะใช้กับหัวข้อหรือตัวอักษรขนาดใหญ่

• ไม่เหมาะกับลักษณะเอียงเพราะจะทำให้รูปร่างเปลี่ยนไปมาก