บทที่1หลักการออกเเบบเเละพัฒนาเว็บไซต์

เนื้อหา

• ขั้นตอนการพัฒนาเว็บไซต์
• ทีมงานพัฒนาเว็บไซต์
• การศึกษาความต้องการของผู้ชมเว็บไซต์
• เนื้อหาที่ควรมีในเว็บไซต์
• หลักการออกเเบเว็บไซต์
• การออกเเบบเว็บเพจ(page design)

-ขั้นตอนการพัฒนาเว็บไซต์
1.กำหนดเป้าหมายเเละวางเเผน(Sits Definition Planning)
2.วิเคราะห์เเละจัดโครงสร้างข้อมูล(Analysis and information Architecture)
3.ออกเเบบเว็บเพจเเละเตรียมข้อมูล(page design and content Editing )
4.ลงมือสร้างเเละทดสอบ(Construction and Testing)
5.เผยเเพร่เเละส่งเสริมให้เป็นที่รู้จัก(Publishing and promotion)
6.ดูเเลเเละพัฒนา(Maintenance and Innovation)
-ทีมงานพัฒนาเว็บ

• Wep Master
• Wep Design
• Wep Programmer
• Content Writer/ Editon

การศึกษาความต้องการของผู้ชมเว็บไซต์

•   ข้อมูล(Content)หรือเนื้อหาหลักที่นำเสนอในเว็บไซต์
•   ข่าวสารความเคลื่อนไหว(News)เกี่ยวกับสินค้า/กิจกรรมต่างๆของเว็บไซต์หรือของหน่วยงาน
•   ของฟรี(Free Service)
•   การมีปฏิสัมพันธ์(Interactive)เช่นการถามตอบปัญหา
•   ความบันเทิง(entertainment)

เนื้อหาที่ควรมีในเว็บไซต์

• ข้อมูลเกี่ยวกับบริษัท องค์กร หรือผู้จัดทำ(About US)
• รายละเอียดของผลิตภัณฑ์เเละบริการ(Product/Service/information)
• ข่าสาร(New /Press Release)
• คำถาม/คำตอบ(Frequently Asked Question)
• ข้อมูลในการติดต่อ(Content information )

หลักกการออกเเบบเว็บไซต์

• การออกเเบบโครงสร้างเว็บไซต์
• การออกเเบบระบบนิวิเกชั่น

การออกเเบบโครงสร้างเว็บไซต์(Site Structure design)

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

              -จัดตามกลุ่มเนื้อหา(Content-based structuer)
              -จัดตามกลุ่มผู้ชม(User-based structuer)
การออกเเบบโครงสร้างเว็บไซต์(Site Structure design)(ต่อ)

• เเบบเรียงลำดับ(sequence)
• เเบบระดับชั้น(Hierarchy)
• เเบบผสม(Combination)

เเบบเรียงลำดับ

• เหมาะสำหรับเว็บไซต์ที่มีจำนวนเว็บเพจไม่มากนัก หรือเว็บไซต์ที่มีการนำเสนอข้อมูลเเบบทีละขั้นตอน

เเบบระดับชั้น

• เหมาะสำหรับเว็บไซต์ที่มีจำนวนเว็บเพจมากขึ้น เป็นรูปเเบบที่พบได้ทั่วไป

เเบบผสม

• เหมาะสำหรับเว็บไซต์ที่ซับซ้อน เป็นการนำข้อดีของรูปเเบบทั้งสองข้างต้นมาผสมกัน

การออกเเบบระบบเนวิกกาชั่น(site Navigation Design)

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

            เครื่องมือนำทาง(Navigation Controls)
            เครื่องมือบอกตำเเหน่ง(Location Indicator)
เครื่องมือนำทาง
คือเครื่องมือสำหรับให้ผู้ชมเปิดไปยังเว็บเพจต่างๆภายในเว็บไซต์โดยเเยกได้เป็น

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

 เครื่องนำทาง

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

เครื่องบอกตำเเหน่ง

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

ลักษณะระบบเนวิกกาชั่นที่ดี

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

การออกเเบบเว็บเพจ

• วิธีที่สะดวกที่สุดในการออกเเบบเว็บเพจคือการใช้โปรเเกรมสร้างภาพกราฟฟิกเช่น photoshop หรือ Fireworks วางเค้าโครงของหน้าเเละสร้างองค์ประกอบต่างๆขึ้นมาให้ครบสมบูรณ์ในภาพเดียว

ส่วนประกอบของหน้าเพจ

• ส่วนหัว(Page Header)
• ส่วนของเนื้อหา(Page body)
• ส่วนท้าย(Page Footer)
• เเถบข้าง(Side Bar)

ส่วนหัว(Page Header)

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

ส่วนของเนื้อหา(Page body)

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

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

เเถบข้าง(Side Bar)

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

เเนวคิดในการออกเเบบเว็บเพจ

• ศึกษาจากเว็บไซต์อื่น
• ประยุกต์รูปเเบบจากสิ่งพิมพ์

ออกเเบบเว็บเพจอย่างไรให้ดูดี

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

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

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