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