WebDesign


เนื้อหาวิชา Web Design ของมหาวิทยาลัยสงขลานครินทร์ เขตการศึกษาตรัง



กระบวนการพัฒนาเว็บไซท์
1. จัดระบบโครงสร้างข้อมูล(Information Architecture)
การจัดระบบโครงสร้างข้อมูล คือการพิจารณาว่า
เว็บควรจะมีข้อมูลและการทำงานใดบ้าง โดยเริ่มจากการกำหนด

เป้าหมาย กลุ่มผู้ใช้เป้าหมาย เนื้อหาและการใช้งานที่จำเป็น
นำมาจัดกลุ่มให้เป็นระบบ


การจัดระบบโครงสร้างข้อมูลเป็นพื้นฐานในการออกแบบเว็บไซท์ที่ดี
ได้แก่ รูปแบบการนำเสนอ ระบบการทำงาน

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

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


3. สำรวจการแข่งขันและคู่แข่ง
3.1 สำรวจบรรยากาศการแข่งขัน
3.2 เรียนรู้จากคู่แข่ง
Phase 2 : พัฒนาเนื้อหา (Site Content)
4. สร้างกลยุทธ์การออกแบบ
4.1 ประยุกต์เนื้อหาจากสื่ออื่น
    เช่นสิ่งพิมพ์ วิทยุ ซีดีรอม แต่ควรระวังว่าไม่ใช่เพียงเอา
เนื้อหาจากสิ่งพิมพ์ มาใส่รวมไว้ในเว็บเท่านั้นจะทำให้เว็บ
เป็นเพียงรูปแบบหนึ่งของสิ่งพิมพ์เท่านั้น
แต่เว็บเป็นสื่อที่ทำประโยชน์ได้มากกว่า จำเป็นต้อง
ปรับปรุงเนื้อหาที่ได้จากสื่ออื่นให้เหมาะสมกับเป้าหมาย
และกลยุทธ์ของเว็บ
4. สร้างกลยุทธ์การออกแบบ
4.2 เลือกใช้เทคโนโลยีที่เหมาะสม
เลือกใช้เฉพาะเทคโนโลยีที่สามารถจะสื่อข้อความ
ถึงผู้ใช้ส่วนใหญ่ได้

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

จุดประสงค์ของขั้นตอนนี้ 
คือข้อสรุปขอบเขตเนื้อหาเพื่อ
ทำเป็นโครงสร้างข้อมูลของเว็บไซต์
ข้อมูล

Phase3: พัฒนาโครงสร้างเว็บไซต์ (Site Structure)
6. จัดระบบข้อมูล
จัดกลุ่มและระบุชื่อเนื้อหา
         เมื่อมีข้อมูลจำนวนมากที่จะนำมาใช้จะต้องนำข้อมูล
เหล่านั้นมาจัดให้เป็นระบบ เพื่อให้ได้เป็น ร่างแผนผัง
โครงสร้าง (Draft architecture plan) ระบบโครงสร้าง
ข้อมูลที่ดีมีส่วนช่วยให้ผู้ใช้เข้าใจภาพรวมของเนื้อหา
ได้ดีขึ้นจัดกลุ่มและระบุชื่อเนื้อหา
วิธีที่ช่วยในการจัดระบบข้อมูลได้ดีคือ การใช้
แบบจำลองระบบโครงสร้าง จากสิ่งต่าง ๆ ทีอยู่รอบตัว
ช่วยให้มีอิสระทางความคิดมากขึ้นและอาจทำให้
ค้นพบระบบข้อมูลที่เหมาะสมทั้งหมดให้สมบูรณ์ขึ้น
7. จัดทำโครงสร้างข้อมูล
โครงสร้างที่ดีจะช่วยสร้างระบบเนวิเกชันได้ง่ายขึ้น
7.1 จัดทำรายการโครงสร้างของเว็บ
          การจัดโครงสร้างเนื้อหาแสดงถึงกลุ่มข้อมูลและ
ลำดับชั้นของหัวข้อย่อย โดยอยู่ในรูปแบบตัวหนังสือ
ทั้งหมดก่อน
7.2 จัดทำแผนผังโครงสร้างของเว็บ
          นำรายการโครงสร้างของไซต์ข้างต้นมาจัดให้เป็นแบบ
แผนที่สื่อความหมายยิ่งขึ้นโดยสร้างเป็นแผนผังแสดงถึง
โครงสร้างข้อมูล ลำดับชั้น และการเชื่อมโยงของแต่ละ
ส่วนอย่างชัดเจน เรียกว่า แผนผังโครงสร้างเว็บไซต์
เป็นการแสดงภาพรวมของเว็บ ในเชิงกราฟิก
7.2 จัดทำแผนผังโครงสร้างของเว็บ
          นอกจากนี้ยังมีแผนผังโครงสร้างเว็บอย่างง่ายที่เรียกว่า
Site map 
แสดงภาพรวมของเนื้อหาหลักภายในเว็บ
แต่มีรายละเอียดมากเท่ากับ แผนผังโครงสร้างเว็บ
โดยอาจจัดทำเป็นแบบตัวหนังสือหรือแบบกราฟิกก็ได้
8. พัฒนาระบบเนวิเกชัน
8.1 วางแนวทางการเคลื่อนที่ภายในไซท์
          เป็นการกำหนดขอบเขตของข้อมูลส่วนต่าง ๆ ร่วมกับ
การสร้างทางเชื่อมโยงถึงกัน
ขั้นตอนนี้อาจต้องใช้แผนภาพประกอบการสร้าง
Flowchart 
หรือ Storyboard แสดงแนวทางและรูปแบบ
การเชื่อมโยงที่ชัดเจน
8.2 สร้างระบบเนวิเกชัน
          ระบบเนวิเกชันหรือระบบนำทาง เป็นเครื่องมือสำคัญ
ที่จะนำผู้ใช้ไปยังส่วนต่างๆของเว็บได้ กระบวนการ
สร้างระบบเนวิเกชัน เริ่มต้นจากการพิจารณาแผนผัง
โครงสร้างเว็บ ร่วมกับแนวทางการเคลื่อนที่ภายในไซท์
ที่มีอยู่ เพื่อให้ได้ระบบนำทางที่จะพาผู้ใช้ไปสู่ส่วน
ต่างๆ ของเว็บ
Phase 4 : ออกแบบและพัฒนาหน้าเว็บ (Visual Design)
9. ออกแบบลักษณะหน้าตาเว็บเพจ
9.1 สร้างแบบจำลองรายละเอียดข้อมูลในหน้าเว็บ
         ในขั้นนี้จะเป็นการสร้างแบบจำลองข้อมูลด้วย
ตัวหนังสือยังไม่มีลักษณะของกราฟิกและสิ่งที่จะสร้าง
ขึ้นก็เป็นแบบจำลองของหน้าเว็บหลักๆ เท่านั้น ซึ่งเมื่อ
นำไปรวมกับการออกแบบลักษณะหน้าตาของเว็บจะ
ได้เป็นเทมเพลตเพื่อไปใช้กับหน้าย่อยอื่นต่อไป
9.2 จัดแบ่งพื้นที่ในหน้าเว็บ
         เริ่มต้นจากการพิจารณารายการโครงสร้างของไซต์
ร่วมกับข้อสรุปขอบเขตเนื้อหาแล้วจำแนกรูปแบบ
ของหน้าเว็บที่จำเป็นต้องมี จากนั้นสรุปให้เหลือ
เพียง 2- 3 แบบ
ขั้นตอนนี้ต้องจัดแบ่งพื้นที่ในหน้าเว็บ โลโก้หรือ
สัญลักษณ์ของหน่วยงาน
ควรมีปรากฏอยู่ในทุกหน้า
แสดงให้รู้ว่ากำลังอยู่ในเว็บเดียวกัน ตำแหน่งที่ดีที่สุด
ในการวางโลโก้ไว้คือ มุมซ้ายบนสุด
ระบบเนวิเกชันหลักจำเป็นต้องมีอยู่ในทุกๆ หน้า ณ
ตำแหน่งเดียวกันตลอดทั้งเว็บ
9.3 ออกแบบโครงร่างของหน้าตาเว็บ
         ขั้นตอนนี้ต้องอาศัยผู้เชี่ยวชาญการออกแบบกราฟิก
เข้ามาช่วย เริ่มจากการร่างภาพคร่าวๆในกระดาษ
อาจเริ่มจากโปรแกรม Photoshop สร้างเป็นรูปของ
โครงร่างของหน้าเว็บขึ้น
ทันทีหลังจากจบขั้นตอนนี้จะได้ตัวอย่างลักษณะของ
เว็บ ซึ่งอาจดีไซน์ออกมาได้หลายรูปแบบ

10.พัฒนาเว็บต้นแบบและโครงสร้างเว็บขั้นสุดท้าย
10.1 สร้างและทดสอบเว็บต้นฉบับ
         หลังจากเลือกรูปแบบเว็บที่ต้องการได้แล้วนำไป
สร้างเป็นเว็บต้นแบบซึ่งจะประกอบด้วยตัวอักษร
ลิงค์ และองค์ประกอบหลักๆ เท่าที่จำเป็นเพื่อนำไป
ทดสอบการใช้งานกับตัวอย่างกลุ่มผู้ใช้หลายๆคน
10.2 สรุปแผนผังโครงสร้างเว็บขั้นสุดท้าย
         หลังจากผ่านการทดสอบจากผู้ใช้แล้ว ถ้าพบปัญหา
ใดๆที่เกี่ยวกับการใช้งานก็ต้องแก้ไขให้เรียบร้อย
ผลลัพธ์ขั้นสุดท้ายจากขั้นตอนนี้ คือ
แผนผังโครงสร้างเว็บไซท์ขั้นสุดท้ายเรียกว่า
Final architecture blueprint

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

Phase 5 : พัฒนาและดำเนินการ (Production &Operation)
11. ลงมือพัฒนาเว็บ
11.1 เรียบเรียงและตรวจสอบข้อมูล
         เริ่มจากการจัดเตรียมข้อมูลให้พร้อม โดยนำข้อมูล
ที่มีอยู่มาเรียบเรียงให้มีรูปแบบที่เหมาะสม จัดรูปแบบ
เนื้อหาให้อ่านง่ายและชัดเจน ตรวจสอบคำผิดและ
ข้อผิดพลาดอื่นๆ เพื่อไม่ให้ผู้อ่านรู้สึกสับสนและ
เสียความเชื่อถือได้
11.2 ตกแต่งหน้าเว็บให้สมบูรณ์
         นำต้นแบบเว็บที่ได้ออกแบบไว้มาตกแต่งปรับปรุงให้
สมบูรณ์ในขั้นตอนนี้ โดยเว็บที่ได้จะประกอบด้วย
ข้อความ รูปภาพ กราฟิก เนวิเกชันและองค์ประกอบที่
จำเป็น
11.3 สร้างเทมเพลตสำหรับหน้าเว็บ
        เมื่อทุกอย่างลงตัวแล้วเราควรจะสร้างโครงร่างมาตรฐาน
หรือเรียกว่าเทมเพลต ซึ่งคือไฟล์ HTMLที่ประกอบด้วย
โครงสร้างหลักขององค์ประกอบต่างๆ ที่จะมีอยู่ในทุก
หน้าของเว็บ เมื่อเอาเนื้อหาที่มีอยู่มาใส่ในเทมเพลตก็จะ
ได้เป็นหน้าเว็บที่สมบูรณ์
11.3 สร้างเทมเพลตสำหรับหน้าเว็บ
        โปรแกรมช่วยสร้าง เช่น Dreamweaver สามารถช่วย
จัดการเทมเพลตได้เป็นอย่างดีที่สำคัญเมื่อเปลี่ยนแปลง
ส่วนใดส่วนหนึ่งในเทมเพลตโปรแกรมจะตามไปแก้ไข
ข้อมูลส่วนนั้นในทุกหน้าของเว็บที่ใช้เทมเพลตเดียวกัน
อัตโนมัติ จะเป็นประโยชน์มากถ้ามีเว็บเพจจำนวนมากที่
มักมีการเปลี่ยนแปลงบ่อยๆ
11.4 พัฒนาระบบการใช้งานของเว็บ
         พัฒนาระบบการทำงานที่จำเป็นของเว็บซึ่งต้องอาศัย
การเขียนโปรแกรม CGI,ASP,JAVA,JAVAScrip หรือ
Flash 
ตามความเหมาะสมเมื่อได้ระบบการทำงานที่
สำเร็จแล้วนำไปประกอบเข้าในเว็บที่มีอยู่
ระบบการใช้งานที่นิยมใช้ในเว็บทั่วไป เช่น
guestbook,counter,web board, form mail 
หรือ countdown
12. เปิดตัวเว็บไซต์(Launch)
         ก่อนเปิดตัวควรทดสอบการใช้งานเพื่อค้นหาข้อผิดพลาด
ที่อาจเกิดขึ้นเสียก่อน เมื่อเปิดตัวแล้วต้องดำเนินการ
ประชาสัมพันธ์ให้เป็นที่รู้จัก
12.1 ทดสอบคุณภาพการใช้งานและความถูกต้อง
การใช้งาน
ความสม่ำเสมอและความถูกต้อง
ความเข้ากันได้กับสิ่งแวดล้อมของผู้ใช้

12.2 ทำให้เว็บเป็นที่รู้จัก
การลงทะเบียนกับ search engineวิธีการโปรโมท offline โดยการอาศัยการ
ประชาสัมพันธ์แบบไม่ใช้อินเตอร์เน็ตโดยใช้สื่อ
ทั่วไปเช่น นิตยสาร วิทยุ ทีวี หนังสือพิมพ์ เป็นต้น

13. ดูแลและพัฒนาระบบต่อเนื่อง
13.1 เพิ่มข้อมูลใหม่โดยยึดรูปแบบมาตรฐาน
13.2 
วิเคราะห์สถิติการใช้บริการในเว็บ
13.3 
ตรวจสอบความถูกต้องของลิงค์
13.4 
ตรวจสอบเนื้อหาและการใช้งานเว็บให้ถูกต้อง
ทันสมัย และตรงกับความต้องการของผู้ใช้อยู่เสมอ