Lecture

บทที่ 6

   การออกแบบหน้าเว็บ (Page Design)

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

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

 

หลักสำคัญในการออกแบบหน้าเว็บ

- การใช้รูปภาพและองค์ประกอบต่าง ๆ ร่วมกันเพื่อสื่อความหมายเกี่ยวกับเนื้อหหาหรือลักษณะ

สำคัญของเว็บให้น่าสนใจ บนพื้นฐานของความเรีบยง่ายและสะดวกของผู้ใช้

เเนวคิดในการออกเเบบหน้าเว็บ

 - เรียนรู้จากเว็บไซต์ต่างๆ
 - ประยุกต์รูปแบบจากสื่อพิมพ์
 - ใช้เเบบจำลองเปรียบเทียบ

 - ออกแบบอย่างสร้างสรรค์

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

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

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

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

 4.จัดวางองค์ประกอบที่สำคัญไว้ในส่วนบนของหน้าเว็บเสมอประกอบด้วย
    1.) ชื่อของเว็บ เพื่อให้ผู้ใช้ได้รู้ทันทีว่ากำลังอยู่ในเว็บอะไร
    2.) ชื่อหัวเรื่อง
    3.) สิ่งสำคัญที่เราต้องการโปรโมตเว็บ
    4.) ระบบเนวิเกชั่น

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

 

6.จัดเเต่งหน้าเว็บให้เป็นระเบียบ
- เนื้อหาในหน้าเว็บจำเป็นต้องอยู่ในรูปแบบที่ดูง่าย เเยกเป็นสัดส่วน เเละดูไม่เเน่นจนเกินไป 

                                  

7.ใช้กราฟฟิกอย่างเหมาะสม
- ควรใช้กราฟิกที่เป็นไอคอน ปุ่ม ลายเส้น เเละสิ่งอื่นๆ ตามความเหมาะสมเเละไม่มากเกินไป เพื่อหลีกเลี่ยงโครงสร้างที่หยุ่งเหยิงเเละไม่เป็นระเบียบ

บทที่ 8

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

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

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

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

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

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

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

    

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

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

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

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

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

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

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

 

แม่สีขั้นที่ 2

แม่สีขั้นที่ 3

แม่สีขั้นที่ 4

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

- การผสมแบบบวก (Additive mixing)จะเป็นรูปแบบการผสม

ของแสง ไม่ใช่การผสมของวัตถุที่มีสีบนกระดาษ จะนำไปใช้ใน

สื่อใดๆที่ใช้แสงส่องออกมา เช่น จอโปรเจคเตอร์ ทีวี

- การผสมแบบลบ (Subtractive mixing)

การผสมสีแบบนี้ไม่เกี่ยวข้องกับแสง แต่เกียวเนื่องกับการดูด

กลืนและสะท้อนแสงของวัตถุ จะนำไปใช้วัตถุมีสี เช่น ภาพวาด

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

       

เป็นรูปแบบหนึ่งในการจัดเรียงสีทั้งหมดไว้ในวงกลม และ

เป็นการจัดลำดับเฉดสีอย่างมีเหตุผลและง่ายต่อการนำไปใช้

     - วงล้อสีแบบลบ

     - วงล้อสีแบบบวก

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

แม่สีขั้นต้น (Primary color)

             - สีแดง

             
             - สีเหลือง

             - สีน้ำเงิน     

 

                                       บทที่10                                    

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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