กระบวนการพัฒนาเว็บไซต์
Phase 1: สำรวจปัจจัยสำคัญ (Research)
รู้จักตัวเอง กำหนดเป้าหมายและสำรวจความพร้อม
เรียนรู้ผู้ใช้ ระบุกลุ่มผู้ใช้และศึกษาความต้องการ
ศึกษาคู่แข่ง สำรวจการแข่งขันและเรียนรู้คู่แข่งขัน
Phase 2: พัฒนาเนื้อหา (Site Content)
สร้างกลยุทธ์การออกแบบ
หาข้อสรุปขอบเขตเนื้อหา
Phase 3: พัฒนาโครงสร้างเว็บไซต์ (Site Structure)
จัดทำระบบข้อมูล
จัดทำโครงสร้างข้อมูล
พัฒนาระบบเนวิเกชัน
Phase 4: ออกแบบและพัฒนาหน้าเว็บ (Visual Design)
ออกแบบลักษณะหน้าตาเว็บเพจ
พัฒนาเว็บต้นแบบและข้อกำหนดสุดท้าย
Phase 5: พัฒนาและดำเนินการ (Production & Operation)
ลงมือพัฒนาเว็บเพจ
เปิดตัวเว็บไซต์
ดูแลและพัฒนาต่อเนื่อง
การออกแบบเนวิเกเตอร์สำหรับเว็บไซต์ (Designing Web Navigator)
Phase 1: สำรวจปัจจัยสำคัญ (Research)
รู้จักตัวเอง กำหนดเป้าหมายและสำรวจความพร้อม
เรียนรู้ผู้ใช้ ระบุกลุ่มผู้ใช้และศึกษาความต้องการ
ศึกษาคู่แข่ง สำรวจการแข่งขันและเรียนรู้คู่แข่งขัน
Phase 2: พัฒนาเนื้อหา (Site Content)
สร้างกลยุทธ์การออกแบบ
หาข้อสรุปขอบเขตเนื้อหา
Phase 3: พัฒนาโครงสร้างเว็บไซต์ (Site Structure)
จัดทำระบบข้อมูล
จัดทำโครงสร้างข้อมูล
พัฒนาระบบเนวิเกชัน
Phase 4: ออกแบบและพัฒนาหน้าเว็บ (Visual Design)
ออกแบบลักษณะหน้าตาเว็บเพจ
พัฒนาเว็บต้นแบบและข้อกำหนดสุดท้าย
Phase 5: พัฒนาและดำเนินการ (Production & Operation)
ลงมือพัฒนาเว็บเพจ
เปิดตัวเว็บไซต์
ดูแลและพัฒนาต่อเนื่อง
การออกแบบเนวิเกเตอร์สำหรับเว็บไซต์ (Designing Web Navigator)
เนวิเกเตอร์เป็นเสมือนป้ายบอกทางให้ผู้ใช้งานไปยังหน้าเว็บเพจต่างๆ ได้อย่างถูกต้องและไม่หลงทาง โดย
สามารถบอกผู้ใช้ได้ว่าตัวเองกำลังอยู่ที่ไหน ได้ผ่านที่ใดมาบ้าง หรือควรจะบอกไปทางไหนต่อ
ตัวอย่างเนวิเกเตอร์ เว็บของ Apple
ความสำคัญของการออกแบบเว็บไซต์
การออกแบบเว็บไซต์ไม่ได้หมายความแต่เพียงลักษณะหน้าตาของเว็บไซต์เพียงอย่างเดียวแต่เกี่ยวข้องตั้งแต่การกำหนดเป้าหมายของเว็บไซต์กลุ่มผู้ใช้การจัดการระบบข้อมูลการสร้างระบบเนวิเกชันการออกแบบหน้าเว็บซึ่งรวมไปถึงการเลือกใช้กราฟฟิค สี รูปแบบตัวอักษรเพราะในบางครั้ง เว็บไซต์ที่ดูสวยงามและมีลูกเล่นอื่นๆ มากมาย ก็ไม่ได้หมายความว่ามีการออกแบบที่ดีได้ แต่ทั้งนี้ทั้งนั้น การออกแบบเว็บไซต์ไม่มีกฎเกณฑ์ที่ตายตัว ขึ้นอยู่กับลักษณะและเป้าหมายของเจ้าของ โดยคำนึงถึงความสะดวกในการใช้งานของผู้ใช้เป็นหลัก
องค์ประกอบของการออกแบบเว็บไซต์ที่ดี
ความเรียบง่าย (Simplicity) การสื่อสารเนื้อหาถึงผู้ใช้โดยจำกัดองค์ประกอบเสริมที่เกี่ยวข้องกับการนำเสนอ ให้เหลือเฉพาะสิ่งที่จำเป็นเท่านั้น เช่น อาจไม่ทำตัวอักษรวิ่งวนไปมาให้ลายตา การใช้ชนิดของตัวอักษร ไม่มากจนเกิดความวุ่นวาย หรือใช้สีตัวอักษรที่ฉูดฉาดเกินไป
ความสม่ำเสมอ (Consistency) การ ใช้รูปแบบเดียวกันตลอดทั้งไซต์ เนื่องจากผู้ใช้จะรู้สึกกับว่าเว็บไซต์เสมือนสถานที่จริง ถ้าลักษณะของแต่ละหน้าแตกต่างกันมาก ผู้ใช้จะเกิดความสับสนหรือไม่แน่ใจว่ากำลังอยู่ในเว็บเดิมหรือไม่
ความเป็นเอกลักษณ์ (Identity) การ ออกแบบควรคำนึงถึงภาพรวมขององค์กร เช่น ถ้าออกแบบเว็บไซต์เกี่ยวกับเด็ก วัยรุ่น ควรมีสีสันสดใส หรือการออกแบบเว็บไซต์ของธนาคารไม่ควรจะดูเหมือนสวนสนุก ผู้ออกแบบต้องเลือกใช้องค์ประกอบเหล่านี้อย่างเหมาะสม
เนื้อหามีประโยชน์ (Useful Content) เนื้อหา เป็นสิ่งที่สำคัญที่สุดในเว็บไซต์ ดังนั้น ควรเตรียมเนื้อหาและข้อมูลที่ผู้ใช้ต้องการให้ถูกต้องสมบูรณ์ โดยมีการปรับปรุงเพิ่มเติมให้ทันต่อเหตุการณ์อยู่เสมอ
ระบบเนวิเกชันที่ใช้งานง่าย (User-Friendly Navigation) เนวิเกชันเสมือนป้ายบอกทางให้กับผู้ใช้ การออกแบบเนวิเกชัน ควรออกแบบให้วางในตำแหน่งเดียวกันของทุกๆ หน้า เพื่ออำนวยความสะดวกให้กับผู้ใช้งาน
มีลักษณะที่น่าสนใจ (Visual Appeal) เป็นเรื่องยากที่จะตัดสินว่าหน้าตาของแต่ละเว็บไซต์แห่งหนึ่งแห่งใดน่าสนใจหรือ ไม่ เพราะเกี่ยวข้องกับองค์ประกอบความชอบของแต่ละบุคคล อย่างไรก็ดีหน้าตาของเว็บไซต์จะมีความสัมพันธ์กับคุณภาพขององค์ประกอบต่างๆ เช่น ภาพกราฟฟิกจะต้องสมบูรณ์ไม่เป็นรอย หรือจุดด่าง หรือมีเส้นขอบเป็นขั้นบันได การใช้โทนสีที่เข้ากันอย่างสวยงาม ตลอดจนตัวอักษรที่อ่านง่าย สบายตา เป็นต้น
การใช้งานอย่างไม่จำกัด (Compatibility) การ ออกแบบให้ผู้ใช้ส่วนใหญ่เข้าถึงได้มากที่สุด โดยไม่มีการบังคับให้ผู้ใช้ต้องติดตั้งโปรแกรมใดๆ เพิ่มเติม หรือสามารถแสดงผลได้ในทุกๆระบบปฏิบัติการที่มีความละเอียดของหน้าจอที่ต่างกันได้อย่างไม่มีปัญหา
สามารถบอกผู้ใช้ได้ว่าตัวเองกำลังอยู่ที่ไหน ได้ผ่านที่ใดมาบ้าง หรือควรจะบอกไปทางไหนต่อ
ตัวอย่างเนวิเกเตอร์ เว็บของ Apple
ความสำคัญของการออกแบบเว็บไซต์
การออกแบบเว็บไซต์ไม่ได้หมายความแต่เพียงลักษณะหน้าตาของเว็บไซต์เพียงอย่างเดียวแต่เกี่ยวข้องตั้งแต่การกำหนดเป้าหมายของเว็บไซต์กลุ่มผู้ใช้การจัดการระบบข้อมูลการสร้างระบบเนวิเกชันการออกแบบหน้าเว็บซึ่งรวมไปถึงการเลือกใช้กราฟฟิค สี รูปแบบตัวอักษรเพราะในบางครั้ง เว็บไซต์ที่ดูสวยงามและมีลูกเล่นอื่นๆ มากมาย ก็ไม่ได้หมายความว่ามีการออกแบบที่ดีได้ แต่ทั้งนี้ทั้งนั้น การออกแบบเว็บไซต์ไม่มีกฎเกณฑ์ที่ตายตัว ขึ้นอยู่กับลักษณะและเป้าหมายของเจ้าของ โดยคำนึงถึงความสะดวกในการใช้งานของผู้ใช้เป็นหลัก
องค์ประกอบของการออกแบบเว็บไซต์ที่ดี
ความเรียบง่าย (Simplicity) การสื่อสารเนื้อหาถึงผู้ใช้โดยจำกัดองค์ประกอบเสริมที่เกี่ยวข้องกับการนำเสนอ ให้เหลือเฉพาะสิ่งที่จำเป็นเท่านั้น เช่น อาจไม่ทำตัวอักษรวิ่งวนไปมาให้ลายตา การใช้ชนิดของตัวอักษร ไม่มากจนเกิดความวุ่นวาย หรือใช้สีตัวอักษรที่ฉูดฉาดเกินไป
ความสม่ำเสมอ (Consistency) การ ใช้รูปแบบเดียวกันตลอดทั้งไซต์ เนื่องจากผู้ใช้จะรู้สึกกับว่าเว็บไซต์เสมือนสถานที่จริง ถ้าลักษณะของแต่ละหน้าแตกต่างกันมาก ผู้ใช้จะเกิดความสับสนหรือไม่แน่ใจว่ากำลังอยู่ในเว็บเดิมหรือไม่
ความเป็นเอกลักษณ์ (Identity) การ ออกแบบควรคำนึงถึงภาพรวมขององค์กร เช่น ถ้าออกแบบเว็บไซต์เกี่ยวกับเด็ก วัยรุ่น ควรมีสีสันสดใส หรือการออกแบบเว็บไซต์ของธนาคารไม่ควรจะดูเหมือนสวนสนุก ผู้ออกแบบต้องเลือกใช้องค์ประกอบเหล่านี้อย่างเหมาะสม
เนื้อหามีประโยชน์ (Useful Content) เนื้อหา เป็นสิ่งที่สำคัญที่สุดในเว็บไซต์ ดังนั้น ควรเตรียมเนื้อหาและข้อมูลที่ผู้ใช้ต้องการให้ถูกต้องสมบูรณ์ โดยมีการปรับปรุงเพิ่มเติมให้ทันต่อเหตุการณ์อยู่เสมอ
ระบบเนวิเกชันที่ใช้งานง่าย (User-Friendly Navigation) เนวิเกชันเสมือนป้ายบอกทางให้กับผู้ใช้ การออกแบบเนวิเกชัน ควรออกแบบให้วางในตำแหน่งเดียวกันของทุกๆ หน้า เพื่ออำนวยความสะดวกให้กับผู้ใช้งาน
มีลักษณะที่น่าสนใจ (Visual Appeal) เป็นเรื่องยากที่จะตัดสินว่าหน้าตาของแต่ละเว็บไซต์แห่งหนึ่งแห่งใดน่าสนใจหรือ ไม่ เพราะเกี่ยวข้องกับองค์ประกอบความชอบของแต่ละบุคคล อย่างไรก็ดีหน้าตาของเว็บไซต์จะมีความสัมพันธ์กับคุณภาพขององค์ประกอบต่างๆ เช่น ภาพกราฟฟิกจะต้องสมบูรณ์ไม่เป็นรอย หรือจุดด่าง หรือมีเส้นขอบเป็นขั้นบันได การใช้โทนสีที่เข้ากันอย่างสวยงาม ตลอดจนตัวอักษรที่อ่านง่าย สบายตา เป็นต้น
การใช้งานอย่างไม่จำกัด (Compatibility) การ ออกแบบให้ผู้ใช้ส่วนใหญ่เข้าถึงได้มากที่สุด โดยไม่มีการบังคับให้ผู้ใช้ต้องติดตั้งโปรแกรมใดๆ เพิ่มเติม หรือสามารถแสดงผลได้ในทุกๆระบบปฏิบัติการที่มีความละเอียดของหน้าจอที่ต่างกันได้อย่างไม่มีปัญหา
การออกแบบเนวิเกเตอร์ที่ดี
เข้าใจง่าย
มีความสม่ำเสมอ
มีการตอบสนองต่อผู้ใช้
มีความพร้อมและเหมาะต่อการใช้งาน
นำเสนอหลายทางเลือก
มีขั้นตอนสั้นและประหยัดเวลา
มีรูปที่สื่อความหมาย
มีคำอธิบายที่ชัดเจนและเข้าใจได้ง่าย
มีความเหมาะสมกับวัตถุประสงค์ของเว็บไซต์
สนับสนุนเป้าหมายและพฤติกรรมของผู้ใช้
การออกแบบหน้าเว็บ (Page Design)
มีความสม่ำเสมอ
มีการตอบสนองต่อผู้ใช้
มีความพร้อมและเหมาะต่อการใช้งาน
นำเสนอหลายทางเลือก
มีขั้นตอนสั้นและประหยัดเวลา
มีรูปที่สื่อความหมาย
มีคำอธิบายที่ชัดเจนและเข้าใจได้ง่าย
มีความเหมาะสมกับวัตถุประสงค์ของเว็บไซต์
สนับสนุนเป้าหมายและพฤติกรรมของผู้ใช้
การออกแบบหน้าเว็บ (Page Design)
หน้าเว็บเป็นสิ่งแรกที่ผู้ใช้จะเห็น ขณะที่เปิดเข้าสู่เว็บไซต์ และยังเป็นสิ่งที่แสดงถึงประสิทธิภาพในการออกแบบเว็บไซต์
ตัวอย่าง TOT www.tot.co.th
ตัวอย่าง TOT www.tot.co.th
แนวคิดในการออกแบบหน้าเว็บ
เรียนรู้จากเว็บไซต์ต่างๆ อาจนำไอเดียจากเว็บต่างๆ มาประยุกต์ใช้
ประยุกต์รูปแบบจากสื่อสิ่งพิมพ์ อาจนำรูปแบบหรือไอเดียจากสื่อสิ่งพิมพ์ที่น่าสนใจมาเป็นแนวทาง
การออกแบบอย่างสร้างสรรค์ ใช้ความความคิดของผู้ออกแบบเอง
หลักการออกแบบหน้าเว็บ
สร้างลำดับชั้นความสำคัญขององค์ประกอบ
สร้างรูปแบบ บุคลิก และสไตล์
สร้างความสม่ำเสมอตลอดทั้งเว็บไซต์
จัดวางองค์ประกอบที่สำคัญไว้ในส่วนบนของหน้าเสมอ
จัดแต่งหน้าเว็บให้เป็นระเบียบและเรียบง่าย
ใช้กราฟฟิกอย่างเหมาะสม
ส่วนประกอบของหน้าเว็บ
ส่วนหัวของหน้า (Page Header)
ส่วนของเนื้อหา (Page Body)
ส่วนท้ายของหน้า (Page Footer)
การเลือกใช้สี (Designing Web Colors)
สีสันในหน้าเว็บเพจเป็นสิ่งที่มีความสำคัญมากในการดึงดูดความสนใจของผู้ใช้เนื่องจากสิ่งแรกที่พวกเขามองเห็นจากเว็บเพจก็คือสีการเลือกใช้สีในเว็บไซต์มีความซับซ้อนพอสมควรเริ่มตั้งแต่กระบวนการเข้าเรื่องการแสดงออกของสีภายใต้สิ่งแวดล้อมที่ต่างกันของบราวเซอร์ จอมอนิเตอร์ และระบบปฏิบัติการ ตลอดจนถึงการเข้าใจทฤษฎีสี รู้จักเลือกใช้สีให้เหมาะสมเพื่อการสื่อความหมายอย่างสวยงาม
รูปแบบชุดสีพื้นฐาน (Simple Color Scheme)
เรียนรู้จากเว็บไซต์ต่างๆ อาจนำไอเดียจากเว็บต่างๆ มาประยุกต์ใช้
ประยุกต์รูปแบบจากสื่อสิ่งพิมพ์ อาจนำรูปแบบหรือไอเดียจากสื่อสิ่งพิมพ์ที่น่าสนใจมาเป็นแนวทาง
การออกแบบอย่างสร้างสรรค์ ใช้ความความคิดของผู้ออกแบบเอง
หลักการออกแบบหน้าเว็บ
สร้างลำดับชั้นความสำคัญขององค์ประกอบ
สร้างรูปแบบ บุคลิก และสไตล์
สร้างความสม่ำเสมอตลอดทั้งเว็บไซต์
จัดวางองค์ประกอบที่สำคัญไว้ในส่วนบนของหน้าเสมอ
จัดแต่งหน้าเว็บให้เป็นระเบียบและเรียบง่าย
ใช้กราฟฟิกอย่างเหมาะสม
ส่วนประกอบของหน้าเว็บ
ส่วนหัวของหน้า (Page Header)
ส่วนของเนื้อหา (Page Body)
ส่วนท้ายของหน้า (Page Footer)
การเลือกใช้สี (Designing Web Colors)
สีสันในหน้าเว็บเพจเป็นสิ่งที่มีความสำคัญมากในการดึงดูดความสนใจของผู้ใช้เนื่องจากสิ่งแรกที่พวกเขามองเห็นจากเว็บเพจก็คือสีการเลือกใช้สีในเว็บไซต์มีความซับซ้อนพอสมควรเริ่มตั้งแต่กระบวนการเข้าเรื่องการแสดงออกของสีภายใต้สิ่งแวดล้อมที่ต่างกันของบราวเซอร์ จอมอนิเตอร์ และระบบปฏิบัติการ ตลอดจนถึงการเข้าใจทฤษฎีสี รู้จักเลือกใช้สีให้เหมาะสมเพื่อการสื่อความหมายอย่างสวยงาม
รูปแบบชุดสีพื้นฐาน (Simple Color Scheme)
ชุดสีร้อน (Warm Color Scheme) ชุดสีเย็น (Cool Color Scheme)
ชุดสีแบบสีเดียว (Monochromatic Color Scheme)
ชุดสีแบบสามเส้า (Triadic Color Scheme)
ชุดสีที่คล้ายกัน (Analogous Color Scheme)
ชุดสีตรงข้ามข้างเคียง (Split Complementary Color Scheme)
ระบบสีที่ใช้ในการออกแบบเว็บไซต์
ระบบสี RGB (Red Green Blue) เป็นที่นิยมใช้กันสำหรับการออกแบบเว็บไซต์ โดยสีจะเกิดจากแม่สี 3 สี คือ สีแดง สีเขียว และสีน้ำเงิน ผสมกันจะทำให้เกิดเฉดสีกว่า 16.7 ล้านสี ในการออกแบบเว็บไซต์นั้น HTML จะอาศัยการกำหนดสีพื้นหลังหรือตัวอักษร หรือลิงค์ต่างๆ โดยใช้ค่า RGB ในระบบเลขฐาน 16 ในการระบุค่าสีหนึ่งๆ
ตัวอย่าง
ระบบสี RGB (Red Green Blue) เป็นที่นิยมใช้กันสำหรับการออกแบบเว็บไซต์ โดยสีจะเกิดจากแม่สี 3 สี คือ สีแดง สีเขียว และสีน้ำเงิน ผสมกันจะทำให้เกิดเฉดสีกว่า 16.7 ล้านสี ในการออกแบบเว็บไซต์นั้น HTML จะอาศัยการกำหนดสีพื้นหลังหรือตัวอักษร หรือลิงค์ต่างๆ โดยใช้ค่า RGB ในระบบเลขฐาน 16 ในการระบุค่าสีหนึ่งๆ
ตัวอย่าง
#FF0000 หมายถึง สีแดงที่มีความเข้มสูงสุดโดยปราศจากสีเขียวและสีน้ำเงิน
#00FF00 หมายถึง สีเขียวที่มีค่าความเข้มสูงสุดโดยปราศจากสีแดงและสีน้ำเงิน
#0000FF หมายถึง สีน้ำเงินที่มีค่าความเข้มสูงสุดโดยปราศจากสีแดงและสีเขียว
#00FF00 หมายถึง สีเขียวที่มีค่าความเข้มสูงสุดโดยปราศจากสีแดงและสีน้ำเงิน
#0000FF หมายถึง สีน้ำเงินที่มีค่าความเข้มสูงสุดโดยปราศจากสีแดงและสีเขียว
