การออกแบบเว็บไซต์
วัตถุประสงค์ เมื่อจบบทเรียนนี้แล้วนักเรียนสามารถ บอกองค์ประกอบพื้นฐานของการออกแบบเว็บไซต์ได้อย่างถูกต้อง ออกแบบเว็บไซต์ได้อย่างถูกต้อง และเหมาะสม
เนื้อหา คำศัพท์เกี่ยวกับเว็บไซต์ องค์ประกอบพื้นฐานของการออกแบบ วิธีการสร้างเว็บเพจ กระบวนการ  13  ขั้นตอนในการออกแบบ หลักการออกแบบเว็บไซต์ รูปแบบของเว็บไซต์
คำศัพท์เกี่ยวกับเว็บไซต์ เว็บไซต์  ( Web site) แหล่งข้อมูลที่บรรจุอยู่บนเครือข่ายอินเตอร์เน็ต     หนังสือหนึ่งเล่ม เว็บเพจ  ( Web page) หน้าที่แสดงเอกสาร เนื้อหาของเว็บไซต์     เอกสารแต่ละหน้า โฮมเพจ  ( Home page) หน้าแรกของเว็บไชต์     ปกของหนังสือ
องค์ประกอบพื้นฐานของการออกแบบเว็บไซต์ ความเรียบง่าย  ( Simplicity) มีรูปแบบที่เรียบง่าย ไม่ซับซ้อนและใช้งานได้อย่างสะดวก สื่อสารเนื้อหาถึงผู้ใช้โดยมีเฉพาะองค์ประกอบเสริมที่จำเป็นเท่านั้น ความสม่ำเสมอ  ( Consistency) สร้างความสม่ำเสมอให้กับเว็บไซต์โดยใช้รูปแบบเดียวกันตลอดทั้งเว็บไซต์ ทั้งในส่วนของรูปแบบหน้า สไตล์ของกราฟิก ระบบเนวิเกชัน และโทนสี ถ้าลักษณะของแต่ละหน้าในเว็บไซต์เดียวกัน แตกต่างกัน อาจทำให้ผู้ใช้เกิดความสับสนได้
ความเป็นเอกลักษณ์  ( Identity) การออกแบบต้องคำนึงถึงลักษณะขององค์กร รูปแบบของเว็บไซต์สามารถสะท้อนถึงเอกลักษณ์ขององค์กร เนื้อหาที่มีประโยชน์  ( Useful Content) ควรจัดเตรียมเนื้อหาและข้อมูลที่ผู้ใช้ต้องการให้ถูกต้องและสมบูรณ์ ควรมีการปรับปรุงและเพิ่มเติมให้ทันต่อเหตุการณ์อยู่เสมอ
ระบบเนวิเกชันที่ใช้งานง่าย  ( User-Friendly Naviagtion) ระบบเนวิเกชันจะต้องออกแบบให้ผู้ใช้เข้าใจง่ายและใช้งานสะดวก โดยใช้กราฟิกที่สื่อความหมายร่วมกับคำอธิบายอย่างชัดเจน มีรูปแบบและลำดับของรายการอย่างสม่ำเสมอ มีลักษณะที่น่าสนใจ  ( Visual Appeal) ความน่าในใจของเว็บไซต์จะมีความสัมพันธ์กับคุณภาพขององค์ประกอบต่าง ๆ เช่น คุณภาพของกราฟิก การใช้ชนิดตัวอักษร การใช้โทนสี เป็นต้น
การใช้งานอย่างไม่จำกัด  ( Compatibility) ควรออกแบบเว็บไซต์ให้ครอบคลุมกับผู้ใช้ส่วนใหญ่มากที่สุด ไม่ควรมีการติดตั้งโปรแกรมเพิ่มเติม หรือเลือกใช้บราวเซอร์ชนิดใดชนิดหนึ่ง สามารถแสดงผลได้ทุกระบบปฏิบัติการและที่ความละเอียดหน้าจอต่าง ๆ กันได้อย่างไม่มีปัญหา คุณภาพในการออกแบบ  ( Design Stability) ควรให้ความสำคัญกับการออกแบบเว็บไซต์ ควรมีมาตรฐานการออกแบบและการจัดระบบข้อมูล
ระบบการใช้งานที่ถูกต้อง  ( Functional Stability) ระบบการทำงานต่าง ๆ ในเว็บไซต์จะต้องมีความแน่นอนและทำหน้าที่ได้อย่างถูกต้อง เช่น การกรอกข้อมูล การเชื่อมโยง เป็นต้น ควรมีการตรวจสอบการทำงานอยู่เสมอ
ปัจจัยสำคัญที่ผู้ใช้ต้องการจากเว็บไซต์ มีเนื้อหาที่เป็นประโยชน์ ตรงกับที่ผู้ใช้ต้องการ มีการปรับปรุงเนื้อหา และพัฒนาเว็บไซต์อยู่เสมอ ใช้เวลาในการดาวน์โหลดน้อย แสดงผลเร็ว การใช้งานที่สะดวก เข้าใจง่าย
ทีมงานพัฒนาเว็บไซต์ Webmaster เป็นผู้ควบคุมในเรื่องการออกแบบ เนื้อหา และรายละเอียดทางเทคนิค Information Architect ทำหน้าที่จัดระเบียบข้อมูลและทดสอบประสิทธิภาพในการใช้งาน Designer เป็นผู้ออกแบบลักษณะหน้าตาของเว็บไซต์ และองค์ประกอบต่าง ๆ HTML and JavaScript Coder รับผิดชอบการสร้างเว็บเพจโดยอาศัยเครื่องมือต่าง ๆ ปรับปรุง เปลี่ยนแปลงข้อมูล รวมถึงการอัพโหลดไฟล์
Developer/Programmer เป็นผู้เขียนสคริปต์และโปรแกรมต่าง ๆ  อาจต้องเกี่ยวข้องกับระบบฐานข้อมูล System Administrator ทำหน้าที่ควบคุม ดูแลเว็บเซิร์ฟเวอร์ รวมถึงฮาร์ดแวร์และซอฟต์แวร์อื่นที่เกี่ยวข้อง สามารถวิเคราะห์และปรับตั้งระบบเพื่อการทำงานที่มีประสิทธิภาพ Content Editor/Writer เป็นบรรณาธิการ โดยรับผิดชอบในการจัดเตรียมเนื้อหา ตรวจสอบความถูกต้อง
วิธีการสร้างเว็บเพจ สร้างด้วยภาษา  HTML โดยการใช้โปรแกรมสร้างเอกสาร  (Text Editor)  โดยทั่วไป  เช่น  โปรแกรม  NotePad  โดยการใส่คำสั่ง  (Tag)  ของภาษา  HTML  เข้าไปโดยตรง วิธีนี้ผู้สร้างต้องมีประสบการณ์และการเรียนรู้ภาษา  HTML  มาก่อน สร้างด้วยโปรแกรมประยุกต์ เป็นการสร้างแบบที่เรียกว่า  WYSIWYG (What-You-See-Is- What-You-Get)  เช่น  Dreamweaver, FrontPage  เป็นต้น
โปรแกรมช่วยในการสร้างเว็บ Macromedia Dreamweaver Microsoft FrontPage Allaire HomeSite CoffeeCup GoLive HotDog Pro HotMetaPro NetObjects Fusion
Macromedia Dreamweaver สามารถออกแบบหน้าเว็บได้อย่างสะดวกโดยอาศัยเครื่องมือต่าง ๆ โดยไม่จำเป็นต้องรู้เกี่ยวกับภาษา  HTML มีหน้าจอในการแสดงหน้าจอการออกแบบและหน้าจอคำสั่ง มีระบบเทมเพลตที่จะทำให้ผู้ออกแบบสามารถใช้โครงสร้างเดียวกันทั้งเว็บไซต์ มีเครื่องมือเพื่อช่วยในการดาวน์โหลดและอัพโหลดไฟล์ระหว่างเครื่องเซิร์ฟเวอร์กับเครื่องที่ใช้พัฒนาเว็บเพจ
Microsoft FrontPage ลักษณะการทำงานใกล้เคียงกับโปรแกรมอื่น ๆ ที่อยูในชุด  Office มีระบบอำนวยความสะดวกแบบ  Wizard มีระบบในการบริหารจัดการเว็บไซต์ เช่น ระบบรายงานเกี่ยวกับหน้าเว็บเพจที่แสดงผลช้า เว็บเพจที่ถูกเพิ่มเข้าไป ลิงค์ที่ใช้งานไม่ได้ สามารถเชื่อมโยงกับระบบฐานข้อมูลได้โดยสะดวก บางครั้งอาจมีคำสั่งเพิ่มเติมเข้ามาเกินความจำเป็น หรืออาจเปลี่ยนแปลงโค้ดโดยไม่รู้ตัว
Allaire HomeSite ช่วยในการเขียนโค้ดภาษา  HTML  ด้วยคุณสมบัติที่เรียกว่า  Tag Insight  และ  Function Insight  ซึ่งจะแสดงแอตตริบิวต์ที่เหมาะสมขึ้นมาให้เลือกใช้กับแท็กที่กำลังเขียน เหมาะสำหรับนักออกแบบเว็บที่ถนัดในการใช้ภาษา  HTML
กระบวนการ  13  ขั้นตอนในการพัฒนาเว็บไซต์ Phase 1  สำรวจปัจจัยสำคัญ  ( Research) 1.  รู้จักตัวเอง  –   กำหนดเป้าหมายและสำรวจความพร้อม 2.  เรียนรู้ผู้ใช้  –   ระบุกลุ่มผู้ใช้และศึกษาความต้องการ 3.  ศึกษาคู่แข่ง  –   สำรวจการแข่งขันและเรียนรู้คู่แข่งสิ่งที่ได้รับ สิ่งที่ได้รับ 1.  เป้าหมายหลักของเว็บไซต์ 2.  ความต้องการของผู้ใช้ 3.  กลยุทธ์ในการแข่งขัน
Phase 2 :  พัฒนาเนื้อหา  ( Site Content) 4.  สร้างกลยุทธ์การออกแบบ 5.  หาข้อสรุปขอบเขตเนื้อหา สิ่งที่ได้รับ แนวทางการออกแบบเว็บไซต์ ขอบเขตเนื้อหาและการใช้งาน ข้อมูลที่ถูกจัดอย่างเป็นระบบ
Phase 3 :  พัฒนาโครงสร้างเว็บไซต์  ( Site Structure) 6.  จัดระบบข้อมูล 7.  จัดทำโครงสร้างข้อมูล 8.  พัฒนาระบบเนวิเกชัน สิ่งที่ได้รับ แผนผังโครงสร้างข้อมูล แนวทางการท่องเว็บ ระบบเนวิเกชัน
Phase 4 :  ออกแบบและพัฒนาหน้าเว็บ  ( Visual design) 9.  ออกแบบลักษณะหน้าตาเว็บเพจ 10.  พัฒนาเว็บต้นแบบและข้อกำหนดสุดท้าย สิ่งที่ได้รับ ลักษณะหน้าตาของเว็บไซต์ เว็บเพจต้นแบบที่จะใช้ในการพัฒนา รูปแบบโครงสร้างของเว็บไซต์ ข้อกำหนดในการพัฒนาเว็บไซต์
Phase 5 :  พัฒนาและดำเนินการ  ( Production and Operation) 11.  ลงมือพัฒนาเว็บเพจ 12.  เปิดตัวเว็บไซต์ 13.  ดูแลและพัฒนาต่อเนื่อง สิ่งที่ได้รับ เว็บไซต์ที่สมบูรณ์ เปิดตัวเว็บไซต์และทำให้เป็นที่รู้จัก แนวทางการดูแลและพัฒนาต่อไป
หลักในการออกแบบเว็บไซต์  การออกแบบโครงสร้างเว็บไซต์  ( Website Structure Design) การออกแบบหน้าตาเว็บไซต์  ( Website Interface Design)
การออกแบบโครงสร้างเว็บไซต์ Site Map  เป็นการวางแผนเนื้อหาของเว็บไซต์ เพื่อเป็นโครงสร้างในการจัดวางหน้าเว็บเพจทั้งหมด เปรียบเสมือนแผนที่ที่ทำให้เห็นโครงสร้างทั้งหมดของเว็บไซต์ ช่วยในการออกแบบเว็บไซต์เพื่อไม่ให้หลงทาง หรือการเชื่อมโยงแต่ละหน้า เป็นการนำเสนอแนวความคิดแบบลำดับชั้นจากส่วนใหญ่ไปหาส่วนย่อย หรือที่เรียกว่าแบบบนลงล่าง  ( Top Down Thinking)
Site Map  ที่ดี ทุก ๆ เว็บเพจจะต้องมีลิงก์ทางออกเสมอ ทุก ๆ เว็บเพจควรมีลิงก์กลับหน้าโฮมเพจ หรือจุดเริ่มต้น ควรมีหน้าแสดง  Site Map  ในกรณีที่เว็บไซต์มีจำนวนหน้ามาก ๆ สามารถประเมินราคาจาก  Site Map  ได้
การออกแบบหน้าเว็บไซต์ ใช้งานง่ายและสะดวก โดยมีระบบ  Navigation  หรือระบบนำทางที่ดี เข้าใจง่าย การใช้งานไม่ซับซ้อน มองเห็นได้ชัด ควรวางไว้ด้านซ้าย หรือด้านบน อย่าเคลื่อนย้ายไปมา ควรมีลิงก์กลับไปยังโฮมเพจ มีการออกแบบกราฟิกที่สวยงาม สื่อความหมาย
ไม่ควรเสียเวลาโหลดภาพมากเกินไป  ขนาดกราฟิกรวมกันไม่ควรเกิน  75 KB  เป็น  Flash   ไม่ควรเกิน  120 KB ภาพรวมทั้งหมดควรออกมาในอารมณ์เดียวกัน  ( Theme)  หรือโครงเดียวกัน แนวความคิดเดียวกัน
รูปแบบของเว็บไซต์ แบบ  Content แบบ  Image แบบผสม
แบบ  Content ลักษณะงานจะเป็นภาพกราฟิกเล็ก ๆ มาเรียงกันเป็นหน้าเว็บเพจ จะมีเนื้อหามากกว่ารูป พัฒนามาจากการเขียนด้วยภาษา  HTML มีข้อดีคือ ความเร็วในการโหลด
แบบ  Image เป็นภาพกราฟิกขนาดใหญ่เต็มหนึ่งหน้า แล้วตัดแบ่งเป็นชิ้นเล็ก ๆ  ( Slice Image)  มาวางเรียงกัน เพื่อความเร็วในการดาวน์โหลด และแสดงผล มีรูปแบบที่สวยงามและหลายหลาย โดยจะทำการสร้างจากโปรแกรมสร้างรูป หรือตกแต่งรูปโดยทั่วไป เหมาะกับหน้าที่มีเนื้อหาน้อย ต้องการความสวยงามเป็นหลัก หากภาพใหญ่จะทำให้การดาวน์โหลดช้า
แบบผสม เป็นการผสมผสานระหว่างแบบ  Content  และแบบ  Image
ความผิดพลาดในการออกแบบเว็บไซต์ ใช้โครงสร้างหน้าเว็บเป็นระบบเฟรม ใช้เทคโนโลยีชั้นสูงโดยไม่จำเป็น ใช้ตัวหนังสือหรือภาพที่เคลื่อนไหวตลอดเวลา มีที่อยู่เว็บไซต์ที่ซับซ้อน  ( URL)  ยากต่อการจดจำและพิมพ์ ไม่มีการแสดงชื่อและที่อยู่ของเว็บไซต์ในหน้าเว็บเพจ มีความยาวของหน้ามากเกินไป ขาดระบบเนวิเกชันที่มีประสิทธิภาพ
ใช้สีของลิงค์ไม่เหมาะสม ข้อมูลเก่าไม่มีการปรับปรุงให้ทันสมัย เว็บเพจแสดงผลช้า  มีรายงานวิจัยว่า ถ้าเกิน  8  วินาที ผู้ใช้กว่า  90%  จะเปลี่ยนไปดูเว็บอื่นแทน

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

  • 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 DreamweaverMicrosoft 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.
  • 32.
    ความผิดพลาดในการออกแบบเว็บไซต์ ใช้โครงสร้างหน้าเว็บเป็นระบบเฟรม ใช้เทคโนโลยีชั้นสูงโดยไม่จำเป็นใช้ตัวหนังสือหรือภาพที่เคลื่อนไหวตลอดเวลา มีที่อยู่เว็บไซต์ที่ซับซ้อน ( URL) ยากต่อการจดจำและพิมพ์ ไม่มีการแสดงชื่อและที่อยู่ของเว็บไซต์ในหน้าเว็บเพจ มีความยาวของหน้ามากเกินไป ขาดระบบเนวิเกชันที่มีประสิทธิภาพ
  • 33.
    ใช้สีของลิงค์ไม่เหมาะสม ข้อมูลเก่าไม่มีการปรับปรุงให้ทันสมัย เว็บเพจแสดงผลช้า มีรายงานวิจัยว่า ถ้าเกิน 8 วินาที ผู้ใช้กว่า 90% จะเปลี่ยนไปดูเว็บอื่นแทน