LECTURE

Web Design

        

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

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

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

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

ลักษณะต่างๆ ของเเบบจำลอง
การใช้เเบบจำลองมีด้วยกัน 3 ประเภท ดังนี้
1. จำลองเเบบการจัดระบบ (Organizational metaphor) คือใช้ประโยชน์จากความคุ้นเคยของการจัดระบบที่คุ้นเคย เพื่อให้ผู้ใช้เข้าถึง  โครงสร้างในระบบใหม่ได้ง่ายขึ้น 

2. จำลองการใช้งาน (Functional metaphor)คือเชื่อมโยงการใช้งานที่สามารถทำได้ในชีวิตจริงกับการใช้งานเว็บ เช่น เว็บโรงภาพยนต์
3. จำลองลักษณะที่มองเห็น (Visual metaphor)คือวิธีนี้จะเกี่ยวข้องกับสิ่งที่มีลัษณะที่คุ้นเคยของคนทั่วไป

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

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

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

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

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


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

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

     

        ระบบเนวิเกชั่นบาร์

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

 เนวิเกชั่นที่ดี จะต้องบรรลุวัตถุประสงค์ต่อไปนี้

1.ผู้ชมกำลังอยู่ในส่วนใดของเว็บ

2.สามารถเข้าถึงข้อมูลได้อย่างไร

3.สามารถกลับไปยังหน้าเดิมได้อย่างไร

4.หน้าเว็บเพจใดที่ได้เยี่ยมชมข้อมูลเเล้ว

รูปแบบของระบบเนวิเกชั่น เเบ่งออกเป็น 4รูปแบบ

1.ระบบเนวิเกชั่นเเบบลำดับขั้นเป็นเเบบพื้นฐาน คือมีหน้าโฮมเพจหนึ่งหน่าเเละมีลิงค์ไปยังหน้าอื่นๆภายในเว็บถือเป็บลำดับขั้นอย่างหนึ่งเเล้ว

2.ระบบเนวิเกชั่นเเบบโกลบอลเป็นระบบที่ช่วยเสริมข้อจำกัดของระบบเนวิเกชั่นเเบบลำดับขั้น ทำให้สามารถเคลื่อนที่ได้ทั้งในเเนวตั้งเเละเเนวนอนอย่างมีประสิทธิภาพ

3.ระบบเนวิเกชั่นเเบบโลคอลสำหรับเว็บที่มีความซับซ้อนมากอาจต้องใช้ระบบเเบบโลคอลหรือเเบบเฉพาะส่วน

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

องค์ประกอบของระบบเนวิเกชั่นหลัก 

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

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

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

 pull downmenu   เป็นส่วนประกอบของฟอร์มที่มีลักษณะเด่น คือ มีรายการให้เลือกมากมาย ใช้พื้นที่น้อย เหมาะสำหรับข้อมูลที่มีข้อมูลประเภทเดียวกัน

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

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

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

 ระบบเนวิเกชั่นที่มีประสิทธิภาพ ควรมีคุณสมบัติดังนี้

1. เข้าใจง่าย

2. มีความสม่ำเสมอ

3. มีการตอบสนองต่อผู้ใช้

4. มีความพร้อมเเละเหมาะสมต่อการใช้งาน

5. นำเสนอหลายทางเลือก

6. มีขั้นตอนสั้นเเละประหยัดเวลา

7. มีรูปแบบที่สื่อความหมาย

8. มีคำอธิบายที่ชัดเจนเเละเข้าใจได้ง่าย

9. เหมาะสมกับวัตถุประสงค์ของเว็บ
10. สนับสนุนเป้าหมายเเละพฤติกรรมของผู้ใช้

    

Design Web Graphics (ออกแบบกราฟฟิกสำหรับเว็บไซต์)

รูปแบบกราฟฟิกสำหรับเว็บ (GIF , JPG และ  PNG)

*  GIF  ย่อมาจาก  Graphic  Interchange  Format

          - ได้รับความนิยมในยุคแรก

          - มีระบบสีแบบ Index ซึ่งมีข้อมูลสีขนาด 8 บิต ทำให้มีสีมากกว่า 256 สี

          - มีการบีบอัดข้อมูลตามแนวนอนของพิกเซล   เหมาะสำหรับกราฟฟิกที่ประกอบด้วยสีพื้น

*  JPG  ย่อมาจาก  Joint  Photogtaphic  Experts  Group

          - มีข้อมูลสีขนาด 24 บิต (True Color)  สามารถแสดงสีได้ถึง 16.7 ล้านสี

          - ใช้ระบบการบีบอัดที่มีลักษณะที่สูญเสีย (lossy)

          - ไฟล์ประเภทนี้ควรนำไปใช้กับรูปถ่ายหรือกราฟฟิกที่มีการไล่ระดับสีอย่างละเอียด

*  PNG  ย่อมาจาก  Portable  Network  Graphic   สามารถสนับสนุนระบบสีได้ทั้ง 8 บิต 16บิตและ24บิต   มีระบบการบีบอัดแบบ Deflate ที่ไม่ทำให้เกิดการสูญเสีย (lossless) มีระบบการควบคุมค่าแกมม่า (Gamma)  และความโปร่งใส (Transparency) ในตัวเอง

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

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

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

* ระบบความละเอียดของรูปภาพที่แสดงผลบนจอมอนิเตอร์ควรใช้หน่วย pixel per inch (ppi)

* แต่ในทางการใช้งานจะนำหน่วย dot per inch (dpi) ซึ่งเป็นหน่วยวัดความละเอียดของสิ่งพิมพ์มาใช้งานแทน ppi

* ความละเอียดของรูปภาพที่ใช้ในเว็บไซต์ควรมีความละเอียดแค่ 72 ppi ก็เพียงพอแล้ว

โปรแกรมกราฟฟิกสำหรับเว็บ

* ปัจจุบันมีโปรแกรมหลายประเภททีนำมาใช้ในการสร้างกราฟฟิกสำหรับเว็บ

          - Adobe   PhotoShop

          - Adobe  ImangeReady

          - Firework    

* ค่าพื้นฐานที่สามารถเลือกปรับได้คือ  รูปแบบไฟล์,  ชุดสีที่ใช้ ,  จำนวนสี,  ระดัความสูญเสีย,  ความโปร่งใส และสีพื้นหลัง

คำแนะนำในกระบวนการออกแบบกราฟฟิกสำหรับเว็บ

* ออกแบบกราฟฟิกโดยใช้ชุดสีสำหรับเว็บ (Web  Palette)

* เลือกใช้รูปแบบกราฟฟิกที่เหมาะสม GIF หรือ JPEG

* ตัดแบ่งกราฟฟิกออกเป็นส่วนย่อย (Slices)