อธิบายหลักการออกแบบเว็บไซต์

1. การออกแบบเว็บไซต์

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

3. เนื้อหา คำศัพท์เกี่ยวกับเว็บไซต์ องค์ประกอบพื้นฐานของการออกแบบ วิธีการสร้างเว็บเพจ กระบวนการ 13 ขั้นตอนในการออกแบบ หลักการออกแบบเว็บไซต์ รูปแบบของเว็บไซต์

4. คำศัพท์เกี่ยวกับเว็บไซต์ เว็บไซต์ ( Web site) แหล่งข้อมูลที่บรรจุอยู่บนเครือข่ายอินเตอร์เน็ต  หนังสือหนึ่งเล่ม เว็บเพจ ( Web page) หน้าที่แสดงเอกสาร เนื้อหาของเว็บไซต์  เอกสารแต่ละหน้า โฮมเพจ ( Home page) หน้าแรกของเว็บไชต์  ปกของหนังสือ

5. องค์ประกอบพื้นฐานของการออกแบบเว็บไซต์ ความเรียบง่าย ( Simplicity) มีรูปแบบที่เรียบง่าย ไม่ซับซ้อนและใช้งานได้อย่างสะดวก สื่อสารเนื้อหาถึงผู้ใช้โดยมีเฉพาะองค์ประกอบเสริมที่จำเป็นเท่านั้น ความสม่ำเสมอ ( Consistency) สร้างความสม่ำเสมอให้กับเว็บไซต์โดยใช้รูปแบบเดียวกันตลอดทั้งเว็บไซต์ ทั้งในส่วนของรูปแบบหน้า สไตล์ของกราฟิก ระบบเนวิเกชัน และโทนสี ถ้าลักษณะของแต่ละหน้าในเว็บไซต์เดียวกัน แตกต่างกัน อาจทำให้ผู้ใช้เกิดความสับสนได้

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

7. ระบบเนวิเกชันที่ใช้งานง่าย ( User-Friendly Naviagtion) ระบบเนวิเกชันจะต้องออกแบบให้ผู้ใช้เข้าใจง่ายและใช้งานสะดวก โดยใช้กราฟิกที่สื่อความหมายร่วมกับคำอธิบายอย่างชัดเจน มีรูปแบบและลำดับของรายการอย่างสม่ำเสมอ มีลักษณะที่น่าสนใจ ( Visual Appeal) ความน่าในใจของเว็บไซต์จะมีความสัมพันธ์กับคุณภาพขององค์ประกอบต่าง ๆ เช่น คุณภาพของกราฟิก การใช้ชนิดตัวอักษร การใช้โทนสี เป็นต้น

8. การใช้งานอย่างไม่จำกัด ( Compatibility) ควรออกแบบเว็บไซต์ให้ครอบคลุมกับผู้ใช้ส่วนใหญ่มากที่สุด ไม่ควรมีการติดตั้งโปรแกรมเพิ่มเติม หรือเลือกใช้บราวเซอร์ชนิดใดชนิดหนึ่ง สามารถแสดงผลได้ทุกระบบปฏิบัติการและที่ความละเอียดหน้าจอต่าง ๆ กันได้อย่างไม่มีปัญหา คุณภาพในการออกแบบ ( Design Stability) ควรให้ความสำคัญกับการออกแบบเว็บไซต์ ควรมีมาตรฐานการออกแบบและการจัดระบบข้อมูล

9. ระบบการใช้งานที่ถูกต้อง ( Functional Stability) ระบบการทำงานต่าง ๆ ในเว็บไซต์จะต้องมีความแน่นอนและทำหน้าที่ได้อย่างถูกต้อง เช่น การกรอกข้อมูล การเชื่อมโยง เป็นต้น ควรมีการตรวจสอบการทำงานอยู่เสมอ

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

11. ทีมงานพัฒนาเว็บไซต์ Webmaster เป็นผู้ควบคุมในเรื่องการออกแบบ เนื้อหา และรายละเอียดทางเทคนิค Information Architect ทำหน้าที่จัดระเบียบข้อมูลและทดสอบประสิทธิภาพในการใช้งาน Designer เป็นผู้ออกแบบลักษณะหน้าตาของเว็บไซต์ และองค์ประกอบต่าง ๆ HTML and JavaScript Coder รับผิดชอบการสร้างเว็บเพจโดยอาศัยเครื่องมือต่าง ๆ ปรับปรุง เปลี่ยนแปลงข้อมูล รวมถึงการอัพโหลดไฟล์

12. Developer/Programmer เป็นผู้เขียนสคริปต์และโปรแกรมต่าง ๆ อาจต้องเกี่ยวข้องกับระบบฐานข้อมูล System Administrator ทำหน้าที่ควบคุม ดูแลเว็บเซิร์ฟเวอร์ รวมถึงฮาร์ดแวร์และซอฟต์แวร์อื่นที่เกี่ยวข้อง สามารถวิเคราะห์และปรับตั้งระบบเพื่อการทำงานที่มีประสิทธิภาพ Content Editor/Writer เป็นบรรณาธิการ โดยรับผิดชอบในการจัดเตรียมเนื้อหา ตรวจสอบความถูกต้อง

13. วิธีการสร้างเว็บเพจ สร้างด้วยภาษา HTML โดยการใช้โปรแกรมสร้างเอกสาร (Text Editor) โดยทั่วไป เช่น โปรแกรม NotePad โดยการใส่คำสั่ง (Tag) ของภาษา HTML เข้าไปโดยตรง วิธีนี้ผู้สร้างต้องมีประสบการณ์และการเรียนรู้ภาษา HTML มาก่อน สร้างด้วยโปรแกรมประยุกต์ เป็นการสร้างแบบที่เรียกว่า WYSIWYG (What-You-See-Is- What-You-Get) เช่น Dreamweaver, FrontPage เป็นต้น

14. โปรแกรมช่วยในการสร้างเว็บ Macromedia Dreamweaver Microsoft FrontPage Allaire HomeSite CoffeeCup GoLive HotDog Pro HotMetaPro NetObjects Fusion

15. Macromedia Dreamweaver สามารถออกแบบหน้าเว็บได้อย่างสะดวกโดยอาศัยเครื่องมือต่าง ๆ โดยไม่จำเป็นต้องรู้เกี่ยวกับภาษา HTML มีหน้าจอในการแสดงหน้าจอการออกแบบและหน้าจอคำสั่ง มีระบบเทมเพลตที่จะทำให้ผู้ออกแบบสามารถใช้โครงสร้างเดียวกันทั้งเว็บไซต์ มีเครื่องมือเพื่อช่วยในการดาวน์โหลดและอัพโหลดไฟล์ระหว่างเครื่องเซิร์ฟเวอร์กับเครื่องที่ใช้พัฒนาเว็บเพจ

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

17. Allaire HomeSite ช่วยในการเขียนโค้ดภาษา HTML ด้วยคุณสมบัติที่เรียกว่า Tag Insight และ Function Insight ซึ่งจะแสดงแอตตริบิวต์ที่เหมาะสมขึ้นมาให้เลือกใช้กับแท็กที่กำลังเขียน เหมาะสำหรับนักออกแบบเว็บที่ถนัดในการใช้ภาษา HTML

18. กระบวนการ 13 ขั้นตอนในการพัฒนาเว็บไซต์ Phase 1 สำรวจปัจจัยสำคัญ ( Research) 1. รู้จักตัวเอง – กำหนดเป้าหมายและสำรวจความพร้อม 2. เรียนรู้ผู้ใช้ – ระบุกลุ่มผู้ใช้และศึกษาความต้องการ 3. ศึกษาคู่แข่ง – สำรวจการแข่งขันและเรียนรู้คู่แข่งสิ่งที่ได้รับ สิ่งที่ได้รับ 1. เป้าหมายหลักของเว็บไซต์ 2. ความต้องการของผู้ใช้ 3. กลยุทธ์ในการแข่งขัน

19. Phase 2 : พัฒนาเนื้อหา ( Site Content) 4. สร้างกลยุทธ์การออกแบบ 5. หาข้อสรุปขอบเขตเนื้อหา สิ่งที่ได้รับ แนวทางการออกแบบเว็บไซต์ ขอบเขตเนื้อหาและการใช้งาน ข้อมูลที่ถูกจัดอย่างเป็นระบบ

20. Phase 3 : พัฒนาโครงสร้างเว็บไซต์ ( Site Structure) 6. จัดระบบข้อมูล 7. จัดทำโครงสร้างข้อมูล 8. พัฒนาระบบเนวิเกชัน สิ่งที่ได้รับ แผนผังโครงสร้างข้อมูล แนวทางการท่องเว็บ ระบบเนวิเกชัน

21. Phase 4 : ออกแบบและพัฒนาหน้าเว็บ ( Visual design) 9. ออกแบบลักษณะหน้าตาเว็บเพจ 10. พัฒนาเว็บต้นแบบและข้อกำหนดสุดท้าย สิ่งที่ได้รับ ลักษณะหน้าตาของเว็บไซต์ เว็บเพจต้นแบบที่จะใช้ในการพัฒนา รูปแบบโครงสร้างของเว็บไซต์ ข้อกำหนดในการพัฒนาเว็บไซต์

22. Phase 5 : พัฒนาและดำเนินการ ( Production and Operation) 11. ลงมือพัฒนาเว็บเพจ 12. เปิดตัวเว็บไซต์ 13. ดูแลและพัฒนาต่อเนื่อง สิ่งที่ได้รับ เว็บไซต์ที่สมบูรณ์ เปิดตัวเว็บไซต์และทำให้เป็นที่รู้จัก แนวทางการดูแลและพัฒนาต่อไป

23. หลักในการออกแบบเว็บไซต์ การออกแบบโครงสร้างเว็บไซต์ ( Website Structure Design) การออกแบบหน้าตาเว็บไซต์ ( Website Interface Design)

24. การออกแบบโครงสร้างเว็บไซต์ Site Map เป็นการวางแผนเนื้อหาของเว็บไซต์ เพื่อเป็นโครงสร้างในการจัดวางหน้าเว็บเพจทั้งหมด เปรียบเสมือนแผนที่ที่ทำให้เห็นโครงสร้างทั้งหมดของเว็บไซต์ ช่วยในการออกแบบเว็บไซต์เพื่อไม่ให้หลงทาง หรือการเชื่อมโยงแต่ละหน้า เป็นการนำเสนอแนวความคิดแบบลำดับชั้นจากส่วนใหญ่ไปหาส่วนย่อย หรือที่เรียกว่าแบบบนลงล่าง ( Top Down Thinking)

25. Site Map ที่ดี ทุก ๆ เว็บเพจจะต้องมีลิงก์ทางออกเสมอ ทุก ๆ เว็บเพจควรมีลิงก์กลับหน้าโฮมเพจ หรือจุดเริ่มต้น ควรมีหน้าแสดง Site Map ในกรณีที่เว็บไซต์มีจำนวนหน้ามาก ๆ สามารถประเมินราคาจาก Site Map ได้

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

27. ไม่ควรเสียเวลาโหลดภาพมากเกินไป ขนาดกราฟิกรวมกันไม่ควรเกิน 75 KB เป็น Flash ไม่ควรเกิน 120 KB ภาพรวมทั้งหมดควรออกมาในอารมณ์เดียวกัน ( Theme) หรือโครงเดียวกัน แนวความคิดเดียวกัน

28. รูปแบบของเว็บไซต์ แบบ Content แบบ Image แบบผสม

29. แบบ Content ลักษณะงานจะเป็นภาพกราฟิกเล็ก ๆ มาเรียงกันเป็นหน้าเว็บเพจ จะมีเนื้อหามากกว่ารูป พัฒนามาจากการเขียนด้วยภาษา HTML มีข้อดีคือ ความเร็วในการโหลด

30. แบบ Image เป็นภาพกราฟิกขนาดใหญ่เต็มหนึ่งหน้า แล้วตัดแบ่งเป็นชิ้นเล็ก ๆ ( Slice Image) มาวางเรียงกัน เพื่อความเร็วในการดาวน์โหลด และแสดงผล มีรูปแบบที่สวยงามและหลายหลาย โดยจะทำการสร้างจากโปรแกรมสร้างรูป หรือตกแต่งรูปโดยทั่วไป เหมาะกับหน้าที่มีเนื้อหาน้อย ต้องการความสวยงามเป็นหลัก หากภาพใหญ่จะทำให้การดาวน์โหลดช้า

31. แบบผสม เป็นการผสมผสานระหว่างแบบ Content และแบบ Image

32. ความผิดพลาดในการออกแบบเว็บไซต์ ใช้โครงสร้างหน้าเว็บเป็นระบบเฟรม ใช้เทคโนโลยีชั้นสูงโดยไม่จำเป็น ใช้ตัวหนังสือหรือภาพที่เคลื่อนไหวตลอดเวลา มีที่อยู่เว็บไซต์ที่ซับซ้อน ( URL) ยากต่อการจดจำและพิมพ์ ไม่มีการแสดงชื่อและที่อยู่ของเว็บไซต์ในหน้าเว็บเพจ มีความยาวของหน้ามากเกินไป ขาดระบบเนวิเกชันที่มีประสิทธิภาพ

33. ใช้สีของลิงค์ไม่เหมาะสม ข้อมูลเก่าไม่มีการปรับปรุงให้ทันสมัย เว็บเพจแสดงผลช้า มีรายงานวิจัยว่า ถ้าเกิน 8 วินาที ผู้ใช้กว่า 90% จะเปลี่ยนไปดูเว็บอื่นแทน