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

1. การออกแบบเว็บไซต์ อาจารย์กรรณิการ์ มาระโภชน์

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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