- Introduction to Web Design - Web Development Processes

1. อ.วรพจน์ พรหมจักร Internet for EducationIT ในฐานะช่วยทางด้านการเรียนการสอนการออกแบบ Web Design เพื่อพัฒนาบทเรียนบน Web - Introduction to Web Design - Web Development Processes

2. การออกแบบให้ตรงกับเป้าหมายและลักษณะของเว็บไซท์การออกแบบให้ตรงกับเป้าหมายและลักษณะของเว็บไซท์

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

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

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

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

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

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

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

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

12. ตัวอย่างของการออกแบบเว็บไซต์ที่ดีตัวอย่างของการออกแบบเว็บไซต์ที่ดี www.apple.com จุดเด่นในเรื่อง -รูปแบบที่เป็นเอกลักษณ์ -ระบบเนวิเกชันที่เข้าใจง่าย -การใช้งานสะดวก -กราฟิกที่สวยงาม น่าสนใจ

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

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

15. โปรแกรมช่วยในการสร้างเว็บโปรแกรมช่วยในการสร้างเว็บ ตัวอย่างโปรแกรมช่วยสร้างเว็บ เช่น Dreamweaver ,FrontPage ,GoLive ,Homesite ,HotDog Pro ,HotMetalPro , NetObjects Fusion ซึ่งโปรแกรมเหล่านี้มีประโยชน์อย่างมากที่จะช่วย ในการพัฒนาเว็บไซท์ได้อย่างสะดวก และรวดเร็ว โดยไม่จำเป็นต้องรู้ ภาษา HTML

16. เริ่มต้นออกแบบเว็บไซต์เริ่มต้นออกแบบเว็บไซต์

17. เริ่มต้นสร้างเว็บไซต์เริ่มต้นสร้างเว็บไซต์ การสร้างเว็บที่ดี ต้องอาศัยการออกแบบและจัดระบบข้อมูลอย่าง เหมาะสม และพัฒนาตามขั้นตอน ซึ่งในกระบวนการพัฒนาเว็บไซต์ นั้นจะอาศัยหลักการจัดระบบโครงสร้างข้อมูลที่เรียกว่า Information Architectureโดยจะอยู่ในหลายๆส่วน ตั้งแต่ขั้นตอนแรกจนถึงขั้นที่ ได้เป็นรูปแบบโครงสร้างสุดท้าย ( Final Architecture Plan ) ซึ่งถือ เป็นกระบวนการที่สำคัญมากที่จะทำให้เว็บไซท์บรรลุตามเป้าหมาย ที่ตั้งไว้

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

19. บุคลากร เป้าหมาย เนื้อหา ระยะเวลา เว็บไซท์ กลุ่มผู้ใช้ เงินทุน

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

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

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

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

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

25. โครงสร้างของเว็บไซต์ โครงสร้างทั้ง 3 แบบจะมีส่วนประกอบหลักอยู่ 3 ส่วน คือ • ส่วนหัวเรื่อง เป็นส่วนที่จะบรรจุตรา/เครื่องหมาย/สัญลักษณ์ของเว็บไซต์นั้น(หน่วยงานหรือ องค์กร) ซึ่งมีความนิยมวางไว้ที่ตำแหน่งมุมซ้ายบนจะเหมาะสมที่สุด (ในวงกลม) (ผลจากการวิจัย ตำแหน่งที่ได้รับความนิยมในการวางโลโก้คือ ซ้าย 74% กลาง 20% ขวา 6%) ด้านขวามืออาจวางแบนเนอร์โฆษณากิจกรรมต่างๆ ได้ • ส่วนเมนู เป็นส่วนที่จะนำพาผู้ชมเข้าไปยังหมวดหมู่เนื้อหาที่จัดไว้ได้อย่างสะดวก รวดเร็ว ทำหน้าที่เหมือนกับถนนหรือแผนผังเส้นทางเดิน หรือหน้าสารบัญในหนังสือ อาจวางไว้ในตำแหน่งบนสุดใต้ส่วนหัวเรื่อง หรือแทรกในส่วนหัวเรื่องก็ได้ และทำเมนูปลีกย่อยไว้ในส่วนซ้ายของหน้า หรือส่วนล่างของหน้า • ส่วนเนื้อหา เป็นส่วนที่จะแสดงรายละเอียดของเนื้อหาแต่ละเรื่องสัมพันธ์กับเมนู ประกอบไปด้วยข้อความ ภาพประกอบ ตารางแสดงข้อมูลต่างๆ ซึ่งจะต้องมีการเปลี่ยนแปลงไปตามเหตุการณ์มักจะวางไว้ในส่วนกลางหน้า

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

27. การตั้งชื่อโฟลเดอร์และไฟล์การตั้งชื่อโฟลเดอร์และไฟล์ • ควรใช้ตัวอักษรเป็นตัวพิมพ์เล็ก a-z หรือตัวเลข 0-9 หรือผสมกัน • ห้ามเว้นวรรคในชื่อไฟล์หรือโฟลเดอร์ ถ้าต้องการสื่อความหมายของคำหรือข้อความให้ใช้ Underscore ( _ ขีดล่าง) Dash ( - ขีดกลาง) คั่น เช่น tip_tricks.html (ไม่ควรใช้ tip tricks.html) หรือ how_to_write.html อาจเขียนเป็น how2write.html ก็จะสื่อความหมายได้ • ห้ามใช้เครื่องหมายอื่นใดในชื่อไฟล์หรือโฟลเดอร์ ยกเว้น Underscore และ Dash • ชื่อไฟล์แรกของเอกสารบนเว็บไซต์ มักจะใช้ชื่อ index • นามสกุลของเอกสารบนเว็บที่เป็นภาษา HTML จะมี 2 รูปแบบ คือ .htmและ .html (ควรสอบถามผู้ดูแลระบบที่ให้บริการเครื่องเซิร์ฟเวอร์เก็บเอกสารเว็บว่าให้บริการใช้นามสกุลใดในไฟล์เริ่มต้น) ค่ามาตรฐานส่วนใหญ่กำหนดให้เป็น index.html • ไม่ควรใช้ตัวอักษรตัวเล็ก/อักษรตัวใหญ่ผสมกัน เพราะในเครื่องที่ใช้ระบบ Unix จะถือว่ามีความหมายต่างกัน (ในวินโดว์มีความหมายเป็นชื่อเดียวกัน) เช่น Index.html กับ index.html จะถือว่ามี 2 ไฟล์ที่แตกต่างกัน หรือ bird.JPG, Bird.jpg กับ bird.jpg เป็นไฟล์รูปภาพ 3 ไฟล์ที่ต่างกัน

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

29. การกำหนดชื่อเอกสารเว็บในแถบไตเติ้ล(Title bar) • การกำหนดชื่อเอกสารเว็บเพจแต่ละหน้าในส่วนของแท็ก <title> ... </title> ของส่วน Head จะต้องกำหนดเสมอและควรใช้ภาษาอังกฤษนำ สามารถใช้ภาษาไทยเป็นคำตามได้ แต่ต้องไม่ยาวเกิน 64 ตัวอักษร เช่น Make a home with HTML : สร้างเว็บสวยด้วยภาษา HTML (การนับตัวอักษรในคำภาษาไทยต้องนับสระบน/ล่าง/วรรณยุกต์ด้วย) <html>    <head>        <title> Make a home with HTML : สร้างเว็บสวยด้วยภาษา HTML</title>    </head>    <body>        ...............    </body></html> • ชื่อเรียกเว็บไซต์ที่ปรากฏบนไตเติ้ลบาร์ นอกจากจะนำมาใช้แสดงชื่อเรื่องของเว็บไซต์นั้นๆ แล้ว ยังเป็นข้อความที่จะถูกนำมาใช้เป็นคำสำคัญ (Keyword) ในการสืบค้นข้อมูลจาก Search Engine เสมอ

30. คำหลัก (Keyword) และคำอธิบายหน้าเว็บเพจ(Description) • ต้องมีการกำหนดคำหลักให้กับเว็บเพจนั้นๆ โดยใช้คำสั่งที่มีรูปแบบเฉพาะไว้ในส่วน Head ถัดจาก Title เรียกว่าการใช้คำสั่ง Meta (ซึ่งจะไม่แสดงผลในหน้าต่างบราวเซอร์) ดังนี้ • <Meta name="X" content="Y"> (xและ yจะถูกแทนค่าด้วยข้อความ) <head>    <title> Make a home with HTML : สร้างเว็บสวยด้วยภาษา HTML</title>    <meta name="keyword" content="html, web, page, website, home.">    <meta name="description" content="HTML is a wonderful language for internet         communication.">    <meta name="author" content="Information Technology - itbm@benchama.ac.th."></head>

31. การควบคุมการเข้ารหัสภาษาไทยการควบคุมการเข้ารหัสภาษาไทย • การแสดงผลภาษาไทยของเว็บเพจเป็นอีกปัญหาหนึ่งที่ไม่ควรมองข้าม โดยเฉพาะการสร้างเว็บจากเครื่องมือสำเร็จรูปหลายๆ โปรแกรมที่มักจะทำการกำหนดให้เว็บเป็นภาษาของผู้พัฒนาโปรแกรม (อาจเป็นภาษาในยุโรป/อเมริกา/หรือภาษาอื่นๆ) ทำให้ผู้ชมไม่สามารถอ่านภาษาไทยได้ ดังนั้นผู้สร้างเว็บจะต้องทำการกำหนดค่าการถอดรหัสภาษาไทยไว้เลยในทุกๆ ไฟล์โดยใช้คำสั่ง Meta ระบุไว้ที่ส่วน Head เช่นเดียวกันดังนี้ <meta http-equiv="Content-Type" content="text/html; charset=TIS-620"> หรือ <meta http-equiv="Content-Type" content="text/html; charset=Windows-874">

32. กฎพื้นฐานสำหรับการสร้างเว็บไซต์ที่เว็บมาสเตอร์ควรใส่ใจมีอยู่ 10 ประการ 1. ใช้แบ็กกราวด์สะอาด เรียบง่าย 2. คิดก่อนใช้เอฟเฟคท์ต่างๆ 3. ใช้ตัวอักษรที่คมชัด 4. ออกแบบกราฟิกให้มีขนาดไฟล์เล็กๆ 5. ควบคุมขนาดของเพจให้ดี

33. กฎพื้นฐานสำหรับการสร้างเว็บไซต์ที่เว็บมาสเตอร์ควรใส่ใจมีอยู่ 10 ประการ 6. วางแผนและออกแบบก่อนลงมือสร้าง 7. ชี้นำผู้ชมด้วยวิธีการง่ายๆ 8. อย่าพยายามทำตัวล้ำหน้าเกินไป 9. ง่ายๆ แต่จริงใจ 10.อย่าลืมปรับปรุงความสดใส

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

35. ความผิดพลาดในการออกแบบเว็บไซต์ 10 อันดับแรก 7. ขาดระบบเนวิเกชันที่มีประสิทธิภาพ 8. ใช้สีของลิงก์ไม่เหมาะสม 9. ข้อมูลเก่าไม่มีการปรับปรุงให้ทันสมัย 10. เว็บเพจแสดงผลช้า

36. Web Development Processes

37. ปรับปรุงเว็บไซต์ให้ก้าวหน้าอยู่เสมอปรับปรุงเว็บไซต์ให้ก้าวหน้าอยู่เสมอ

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

39. Phase 2: พัฒนาเนื้อหา (Site Content) 4. สร้างกลยุทธ์การออกแบบ 5. หาข้อสรุปขอบเขตเนื้อหา Phase 3: พัฒนาโครงสร้างเว็บไซท์ (Site Structure) 6. จัดระบบข้อมูล 7. จัดทำโครงสร้างข้อมูล 8. พัฒนาระบบเนวิเกชัน

40. Phase 4: ออกแบบและพัฒนาหน้าเว็บ ( Visual design ) 9. ออกแบบลักษณะหน้าตาเว็บเพจ 10. พัฒนาเว็บต้นแบบและข้อกำหนดสุดท้าย Phase 5: พัฒนาและดำเนินการ (Production and Operation) 11. ลงมือพัฒนาเว็บเพจ 12. เปิดตัวเว็บไซท์ 13. ดูแลและพัฒนาต่อเนื่อง

41. กระบวนการ 13 ขั้นตอน ในการพัฒนาเว็บไซต์ Phase1: สำรวจปัจจัยสำคัญ (Research) 1. รู้จักตัวเอง - กำหนดเป้าหมายหลักของเว็บไซต์ - กำหนดเป้าหมายที่ชัดเจน - ระบุวิธีการวัดความสำเร็จ - พิจารณาทรัพยากรที่มี • บุคลากร • เงินทุน • ระยะเวลาในการพัฒนา • เนื้อหาข้อมูลที่จะนำเสนอบนเว็บ

42. กระบวนการ 13 ขั้นตอน ในการพัฒนาเว็บไซต์ 2. เรียนรู้ผู้ใช้ - กำหนดกลุ่มผู้ใช้เป้าหมาย - ค้นหาสิ่งที่ผู้ใช้ต้องการ - สร้างประโยชน์ต่อผู้ใช้ - เรียนรู้ประสบการณ์ของผู้ใช้ (User Experience) - จำลองสถานการณ์ (Scenario) 3. สำรวจการแข่งขันและคู่แข่ง - สำรวจบรรยากาศการแข่งขัน - เรียนรู้จากคู่แข่ง

43. กระบวนการ 13 ขั้นตอน ในการพัฒนาเว็บไซต์ Phase 2: พัฒนาเนื้อหา (Site Content) 4. สร้างกลยุทธ์การออกแบบ - สร้างแนวทางให้ผู้ใช้ได้รับข้อความที่จะสื่อ เว็บไซต์ของผลิต ภัณฑ์Powerbar (www.powerbar.com) สร้างภาพลักษณ์ของ อาหารเสริมที่ให้พลังงาน แก่นักกีฬาได้อย่างน่า สนใจ

44. กระบวนการ 13 ขั้นตอน ในการพัฒนาเว็บไซต์ - ประยุกต์เนื้อหาจากสื่ออื่น (Repurposed Content) เว็บไซท์www.cooktek.comนำเอาข้อมูลประกอบการขายสินค้าที่มีอยู่ในสิ่งพิมพ์มาประยุกต์ใช้บนเว็บไซท์

45. กระบวนการ 13 ขั้นตอน ในการพัฒนาเว็บไซต์ 4. สร้างกลยุทธ์การออกแบบ (ต่อ) - เนื้อหาเสริมคุณค่า (Value Added Content) - เลือกใช้เทคโนโลยีที่เหมาะสม 5. หาข้อสรุปขอบเขตเนื้อหา - กำหนดเนื้อหาและการใช้งานที่จำเป็น - พิจารณาถึงความเป็นไปได้ - เก็บรวบรวมและพัฒนาข้อมูล

46. กระบวนการ 13 ขั้นตอน ในการพัฒนาเว็บไซต์ Phase 3: พัฒนาโครงสร้างเว็บไซต์(Site Structure) 6. จัดระบบข้อมูล - จัดกลุ่มและระบุชื่อเนื้อหา 7. จัดทำโครงสร้างข้อมูล - จัดทำรายการโครงสร้างของไซต์ (Site Structure Listing) เมื่อมีข้อมูลที่ถูกจัดกลุ่มให้เป็นระบบเรียบร้อยแล้ว ขั้นตอนต่อไปก็นำข้อมูลที่ได้มาจัดเป็นโครงสร้างเนื้อหา ที่แสดงถึงกลุ่มข้อมูลและลำดับชั้นของหัวข้อย่อย โดยอยู่ในรูปแบบตัวหนังสือทั้งหมดก่อน ดังตัวอย่างต่อไปนี้

47. Section 1 Section 1.1 Section 1.2 Section 2 Section 2.1 Section 2.2 Section 2.2.1 Section 2.2.2 Section 2.2.3 Section 2.3 Section 2.4 Section 3

48. กระบวนการ 13 ขั้นตอน ในการพัฒนาเว็บไซต์ - จัดทำแผนผังโครงสร้างเว็บไซต์ (Architectural Blueprint)

49. กระบวนการ 13 ขั้นตอน ในการพัฒนาเว็บไซต์ - แผนผังโครงสร้างเว็บไซต์อย่างง่าย เรียกว่า Site map ตัวอย่างเว็บไซต์ www.jwt.com

50. กระบวนการ 13 ขั้นตอน ในการพัฒนาเว็บไซต์ 8. พัฒนาระบบเนวิเกชัน - วางแนวการเคลื่อนที่ภายในไซท์ (Site Flow) ในขั้นตอนนี้ จำเป็นต้องใช้แผนภาพ เข้ามาประกอบการสร้าง flow chart หรือ storyboard เพื่อแสดงให้เห็นถึงแนวทางและรูปแบบการเชื่อมโยงที่ ชัดเจนยิ่งขึ้น