Lecture

Lectureในคาบเรียน Web-Desing

บทที่ 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)ในตัวเอง

บทที่ 10 

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

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

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

 เหมาะสมกับเนื้อหาและข้อมูลที่ต้องการสื่อ

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

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

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

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

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

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

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

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

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

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

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

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

หน้าเว็บที่ยาวมาก ๆ จะทำให้ผู้ชมรู้สึกเหนื่อยล้าที่จะอ่าน

ควรจัดแบ่งเป็น paragraph หรือ ตัดแบ่งเป็นหลาย ๆ หน้าขนาดของตัวอักษร

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

ใช้ตัวอักษรหลายขนาดเพื่อสร้างลำดับความสำคัญของข้อมูล

ลำดับในการอ่านโดยทั่วไป ผู้อ่านจะอ่านจากบนลงล่าง และจากซ้ายไปขวา

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

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

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

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

 กำหนดสีของ link ให้เหมาะสม