CakeChocoMilk : เนื้อหา Lecture

บทที่ 8

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

บทที่ 9

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

Designing Web

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

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

รูปแบบกราฟฟิกสำหรับเว็บ (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 จัดรูปแบบตัวอักษรสำหรับเว็บไซด์

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

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

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

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

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

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

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

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

รูปแบบตัวอักษร แบ่งได้ 2 ประเภท

- ตัวอักษรที่มีขนาดสัมพันธ์กับรูปร่าง หรือขนาดไม่คงที่

- ตัวอักษรที่มีขนาดคงที่

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

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

- มีลายเส้นเพิ่มขึ้นที่ส่วนปลาย

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

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

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

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

- เช่น Arial, Verdana, Geneva

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

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

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

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

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

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

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

การจัดข้อความในหน้าเว็บ

การจัดตำแหน่ง

-ในภาษา HTML สามารถจัดตำแหน่งตัวอักษรได้ด้วยคำสั่ง Align และสามารถเลือกค่าเป็น left, right, center, justify ช่วงว่างระหว่างตัวอักษร และช่วงว่างระหว่างคำ

- ตัวอักษรบางคู่ที่อยู่ติดกันอาจมีระยะที่ไม่เหมาะสม จึงต้องมีการ Kerning เพื่อที่สายตาจะได้

- การจัดตำแหน่งแบบ justify ทำให้เกิดช่องว่างที่ไม่สวยงามได้ ระยะห่างระหว่างบรรทัด

- เนื้อหาที่มีปริมาณมาก ควรมีระยะห่างระหว่างบรรทัดมาก เพื่อเพิ่มความสะดวกในการอ่านเป็น เวลานาน

ความยาวหน้าเว็บ

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

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

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

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

- ใช้ตัวอักษรขนาดใหญ่เริ่มต้นประโยค และอาจใช้รูปแบบของการสลับสี

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

- ใช้ขนาดและน้ำหนักของตัวอักษร การทำตัวเอียง ขีดเส้นใต้ ตำแหน่งของตัวอักษร แนวทาง ของตัวอักษร พื้นที่ว่าง

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