Designing Web Colors
เลือกใช้สีสำหรับเว็บไซต์
สี สันในเว็บไซต์เป็นสิ่งที่สำคัญมากในการดึงดูดความสนใจของผู้ใช้ เนื่องจากสิ่งแรกที่ผู้ใช้มองเห็นจากเว็บก็คือสีซึ่งเป็นสิ่งกำหนดบรรยายกา ศและความรู้สึกโดยของเว็บไซต์
เราสามารถใช้สีได้ทุกองค์ประกอบของเว็บเพจ ตั้งแต่รูปภาพ ตัวอักษร สีพื้นหลัง การใช้สีที่เหมาะสมจะช่วยในการสื่อความหมายของเนื้อหา
ประโยชน์ของสีในเว็บไซต์
-สามารถชักนำสายตาให้ไปยังบริเวณในหน้าเว็บเพจที่เราต้องการได้ เช่น ข้อมูลใหม่ หรือโปรโมชั่นพิเศษ
-สีสามารถเชื่อมโยงบริเวณที่ได้รับการออกแบบเข้าด้วยกัน
-สีสามารถนำไปใช้ในการแบ่งบริเวณต่างๆ ออกจากกัน
-สีสามารถใช้ในการดึงดูดความสนใจของผู้อ่าน
-สีสามารถสร้างอารมณ์โดยรวมของเว็บเพจ
การผสมสี(Color Mixing)
มี 2 แบบ
1 การผสมแบบบวก(Additive mixing)
จะเป็นรูปแบบการผสมของแสงไม่ใช่การผสมของวัตถุที่มีสีบนกระดาษ
การนำไปใช้งาน
จะนำไปใช้ในสื่อใดๆ ที่ใช้แสงออกมา เช่น จอโปรเจคเตอร์ ทีวี หรือจอมอนิเตอร์
-การผสมแบบลบ (Subtractive mixing)
การผสมสีแบบนี้ไม่เกี่ยวข้องกับแสงแต่เกี่ยวเนื่องกับการดูดกลืนและสะท้อนแสงของวัตถุต่างๆ
การนำไปใช้งาน
จะนำไปใช้ในเสื่อที่เกี่ยวข้องกับการใช้วัตถุมีสี เช่น ภาพวาดของศิลปิน รูปปั้น หรือ สิ่งพิมพ์ต่างๆ
ผลทางจิตวิทยาที่มีต่อสี (Color Psychology)
มนุษย์เราตอบสนองต่อสีด้วยจิตใจ ไม่ใช่สมอง เช่นสีบางสีอาจทำให้รู้สึกสดชื่น แต่บางสีอาจทำให้รู้สึกซึมเศร้าได้
ดัง นั้นหากเราเลือกสีอย่างรอบคอบ และความเข้าใจเกี่ยวกับจิตวิทยาของสีเบื้องต้นก็จะทำให้เราเลือกใช้ชุดสีได้ อย่างเหมาะสมกับอารมณ์ เนื้อหาของเว็บไซต์
ความหมายของสี
ความหมายของสี
สีแดง ความหายในทางที่ดี พลัง อำนาจ ความรัก ความอบอุ่น ความจริง กำลังใจ ความแข็งแรง ความเร็ว ความตื่นเต้น ความสนุกสนาน
ความหายในทางที่ไม่ดี ความโมโห ความก้าวร้าว ความอันตราย ความละอาย ความรุนแรง ความผิดพลาด
สีน้ำเงิน ความหายในทางที่ดี ความสื่อสัตย์ ความมั่นคง ปลอดภัย ความสะอาด ความเป็นระเบียบ ความมีคุณธรรม ความเชื่อมั่น ความกลมกลืน
ความหายในทางที่ไม่ดี ความหดหู่ ซึมเศร้า เสียใจ ความโมโห
สีเขียว ความหายในทางที่ดี ธรรมชาติ สุขภาพ ความยินดี การมีโชคดี การเริ่มต้นใหม่ ความปลอดภัย ความหวัง ความสมบรูณ์ ความเป็นอมตะ ความภักดี
ความหายในทางที่ไม่ดี อิจฉา ริษยา โชคร้าย ขาดประสบการณ์ ความเบื่อหน่าย
สีเหลือง ความหายในทางที่ดี คามสดใส ร่าเริง การมองโลกในแง่ดี ความหวัง ความอบอุ่น ธรรมะ ปรัชญา ความสุข ความคิดฝัน
ความหายในทางที่ไม่ดี ความไม่สื่อสัตย์ ทรยศ ความขลาดกลัว ความอิจฉา ความเจ็บป่วย การหลอกลวง ความไม่แน่นอน
สีม่วง ความหายในทางที่ดี ความสูงส่ง ความซื่อสัตย์ ความสร้างสรรค์ การเปลี่ยนรูปแบบ ความแปลกใหม่ ความรอบรู้ การให้ความรู้
ความหายในทางที่ไม่ดี ความลึกลับ ความโหดร้าย ความหยิ่งยโส ความโศกเศร้า เสียใจ
ออกเเบบหน้าเว็บ
หลักสำคัญในการออกเเบหน้าเว็บไซต์
คือ การใช้รูปภาพเเละองค์ประกอบต่างๆ ร่วมกันเพื่อสื่อความหมายเกี่ยวกับเนื้อหาหรือลักษณะสำ
คัญของเว็บให้น่าสนใจ บนพื้นฐานของความเรียบง่ายเเละสะดวกของผู้ใช้
เเนวคิดในการออกเเบหน้าเว็บ
เรียนรู้จากเว็บไซต์ต่างๆ
ประยุกต์รูปแบบจากสื่อพิมพ์
ใช้เเบบจำลองเปรียบเทียบ (Metaphor)
ออกแบบอย่างสร้างสรรค์
ใช้เเบบจำลองเปรียบเทียบ (Metaphor)
การใช้เเบบจำลองเปรียบเทียบ คือการใช้สิ่งที่คุ้นเคในการอธิบายถึงสิ่งที่ไม่คุ้นเคย ไม่ว่าจะเป็น
รูปภาพจาก สิ่งพิมพ์หรือรูปแบบของร้านขายของ สิ่งสำคัญ คือ รูปแบบที่เลือกมาใช้ต้องมีลักษณะ
ที่คนส่วนใหญ่คุ้นเคย เข้าใจง่าย สนับสนุนเเนวคิดเเละส่งเสริมกระบวนการสื่อสารของเว็บ
ลักษณะต่างๆ ของเเบบจำลอง
การใช้เเบบจำลองมีด้วยกัน 3 ประเภท ดังนี้
1. จำลองเเบบการจัดระบบ (Organizational metaphor) คือใช้ประโยชน์จากความคุ้นเคยของ
การจัดระบบที่คุ้นเคย เพื่อให้ผู้ใช้เข้าถึงโครงสร้างในระบบใหม่ได้ง่ายขึ้น
2. จำลองการใช้งาน (Functional metaphor)
คือเชื่อมโยงการใช้งานที่สามารถทำได้ในชีวิตจริงกับการใช้งานเว็บ เช่น เว็บโรงภาพยนต์
3. จำลองลักษณะที่มองเห็น (Visual metaphor)
คือวิธีนี้จะเกี่ยวข้องกับสิ่งที่มีลัษณะที่คุ้นเคยของคนทั่วไป
หลักการออกเเบบหน้าเว็บ
1.สร้างลำดับชั้นความสำคัญขององค์ประกอบ
จัดตำเเหน่งเเละลำดับขององค์ประกอบ เเสดงลำดับความสำคัญของข้อมูลที่ต้องการให้ผู้ใช้ได้รับ
เนื่องจากภาษาส่วนใหญ่จะอ่านจากซ้ายไปขวา เเละจากบน ลงล่าง จึงควรจัดวางสิ่งที่สำคัญ
ไว้ที่ส่วนบนหรือด้านซ้ายของหน้าอยู่เสมอ
2. สร้างรูปแบบ บุคลิกเเละสไตล์
รูปแแบบ การเลือกรูปแบบเว็บที่เหมาะสมจะช่วยสร้างความเข้าใจของผู็ใช้ได้ดีขึ้น
บุคลิก เว็บเเต่ละประเภทอาจมีบุคลิกลักษณะแตกต่างกันขึ้นอยู่กับเนื้อหาเเละเป้าหมายในการ
นำเสนอสไตล์ คือ ลักษณะการจัดโครงสร้างของหน้า ณุปแบบกราฟิก ชนิดเเละการจัดตัวอักษ
ร ชุดสีที่ใช้ รวมถึงองค์ประกอบอื่นๆ ซึ่งไม่ควรสร้างตามใจชอบ
3.สร้างความสม่ำเสมอตลอดทั่วทั้งไซต์
ความสม่ำเสมอของโครงสร้างเว็บเเละระบบเนวิเกชั่น ทำให้รู้สึกคุ้นเคยเเละสามารถคาดการณ์
ลักษณะของเว็บได้ล่วงหน้า ทางด้านเทคนิดสามารถใช้ css กำหนดได้เพื่อให้เป็นมารตฐานเดียวกัน
4.จัดวางองค์ประกอบที่สำคัญไว้ในส่วนบนของหน้าเสมอ
ควรประกอบด้วย
1.ชื่อของเว็บ เพื่อให้ผู้ใช้ได้รู้ทันทีว่ากำลังอยู่ในเว็บอะไร
2.ชื่อหัวเรื่อง
3.สิ่งสำคัญที่เราต้องการโปรโมตเว็บ
4.ระบบเนวิเกชั่น
5.สร้างจุดสนใจด้วยความเเตกต่าง
การจัดองค์ประกอบให้ภาพรวมของหน้ามีความเเตกต่างเป็นสิ่งสำคัญที่จะนำสายตาผู้อ่านไป
ยังบริเวณต่างๆ โดยการใช้สีที่ตัดกัน
6. จัดเเต่งหน้าเว็บให้เป็นระเบียบ
เนือ้หาในหน้าเว็บจำเป็นต้องอยู่ในรูปแบบที่ดูง่ายเเยกเป็นสัดส่วน เเละดูไม่เเน่นจนเกินไป
7.ใช้กราฟฟิกอย่างเหมาะสม
ควรใช้กราฟิกที่เป็นไอคอน ปุ่ม ลายเส้น เเละสิ่งอื่นๆ ตามความเหมาะสมเเละไม่มากเกินไป
เพื่อหลีกเลี่ยงโครงสร้างที่หยุ่งเหยิงเเละไม่เป็นระเบียบ ส่วนตัวอักษรขนาดใหญ่ด้วยคำสั่ง h1
เเละ h2 ควรใช้ในปริมาณน้อยๆ เพื่อให้ได้ผลลัพธ์สูงสุด
กระบวนการพัฒนาเว็บไซท์
1. จัดระบบโครงสร้างข้อมูล(Information Architecture) การจัดระบบโครงสร้างข้อมูล คือการพิจารณาว่า
เว็บควรจะมีข้อมูลและการทำงานใดบ้าง โดยเริ่มจากการกำหนด
เป้าหมาย กลุ่มผู้ใช้เป้าหมาย เนื้อหาและการใช้งานที่จำเป็น
นำมาจัดกลุ่มให้เป็นระบบ
การจัดระบบโครงสร้างข้อมูลเป็นพื้นฐานในการออกแบบเว็บไซท์ที่ดี
ได้แก่ รูปแบบการนำเสนอ ระบบการทำงาน
แบบจำลอง ระบบเนวิเกชัน และอินเตอร์เฟสของเว็บดังนั้น
การจัดระบบโครงสร้างข้อมูลจึงเป็นสิ่งสำคัญที่
เกี่ยวข้องอยู่ในกระบวนการออกแบบเว็บไซต์
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 กำหนดเนื้อหาและการใช้งานที่จำเป็น
นำข้อมูลที่ได้เตรียมไว้นำมาพิจารณาถึงเนื้อหาที่จำเป็น
ในการสื่อถึงผู้ใช้ พร้อมกับเพิ่มเติมสิ่งอื่นๆ ที่เหมาะสม
เพื่อให้บรรลุ ตามเป้าหมาย
จากนั้นจึงแยกข้อมูลออกเป็น 2 ประเภท
คือ เนื้อหา กับ การใช้งาน
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 ตรวจสอบเนื้อหาและการใช้งานเว็บให้ถูกต้อง
ทันสมัย และตรงกับความต้องการของผู้ใช้อยู่เสมอ
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 ตรวจสอบเนื้อหาและการใช้งานเว็บให้ถูกต้อง
ทันสมัย และตรงกับความต้องการของผู้ใช้อยู่เสมอ
