ความสำคัญของการออกแบบเว็บไซต์
การออกแบบเว็บไซต์ไม่ได้หมายความแต่เพียงลักษณะหน้าตาของเว็บไซต์เพียงอย่างเดียว แต่เกี่ยวข้องตั้งแต่การกำหนดเป้าหมายของเว็บไซต์ กลุ่มผู้ใช้ การจัดการระบบข้อมูล การสร้างระบบเนวิเกชัน การออกแบบหน้าเว็บ ซึ่งรวมไปถึงการเลือกใช้กราฟฟิค สี รูปแบบตัวอักษร เพราะในบางครั้ง เว็บไซต์ที่ดูสวยงามและมีลูกเล่นอื่นๆ มากมาย ก็ไม่ได้หมายความว่ามีการออกแบบที่ดีได้ แต่ทั้งนี้ทั้งนั้น การออกแบบเว็บไซต์ไม่มีกฎเกณฑ์ที่ตายตัว ขึ้นอยู่กับลักษณะและเป้าหมายของเจ้าของ โดยคำนึงถึงความสะดวกในการใช้งานของผู้ใช้เป็นหลัก
องค์ประกอบของการออกแบบเว็บไซต์ที่ดี
- ความเรียบง่าย (Simplicity) การสื่อสารเนื้อหาถึงผู้ใช้โดยจำกัดองค์ประกอบเสริมที่เกี่ยวข้องกับการนำเสนอให้เหลือเฉพาะสิ่งที่จำเป็นเท่านั้น เช่น อาจไม่ทำตัวอักษรวิ่งวนไปมาให้ลายตา การใช้ชนิดของตัวอักษร ไม่มากจนเกิดความวุ่นวาย หรือใช้สีตัวอักษรที่ฉูดฉาดเกินไป
- ความสม่ำเสมอ (Consistency) การใช้รูปแบบเดียวกันตลอดทั้งไซต์ เนื่องจากผู้ใช้จะรู้สึกกับว่าเว็บไซต์เสมือนสถานที่จริง ถ้าลักษณะของแต่ละหน้าแตกต่างกันมาก ผู้ใช้จะเกิดความสับสนหรือไม่แน่ใจว่ากำลังอยู่ในเว็บเดิมหรือไม่
- ความเป็นเอกลักษณ์ (Identity) การออกแบบควรคำนึงถึงภาพรวมขององค์กร เช่น ถ้าออกแบบเว็บไซต์เกี่ยวกับเด็ก วัยรุ่น ควรมีสีสันสดใส หรือการออกแบบเว็บไซต์ของธนาคารไม่ควรจะดูเหมือนสวนสนุก ผู้ออกแบบต้องเลือกใช้องค์ประกอบเหล่านี้อย่างเหมาะสม
- เนื้อหามีประโยชน์ (Useful Content) เนื้อหาเป็นสิ่งที่สำคัญที่สุดในเว็บไซต์ ดังนั้น ควรเตรียมเนื้อหาและข้อมูลที่ผู้ใช้ต้องการให้ถูกต้องสมบูรณ์ โดยมีการปรับปรุงเพิ่มเติมให้ทันต่อเหตุการณ์อยู่เสมอ
- ระบบเนวิเกชันที่ใช้งานง่าย (User-Friendly Navigation) เนวิเกชันเสมือนป้ายบอกทางให้กับผู้ใช้ การออกแบบเนวิเกชัน ควรออกแบบให้วางในตำแหน่งเดียวกันของทุกๆ หน้า เพื่ออำนวยความสะดวกให้กับผู้ใช้งาน
- มีลักษณะที่น่าสนใจ (Visual Appeal) เป็นเรื่องยากที่จะตัดสินว่าหน้าตาของแต่ละเว็บไซต์แห่งหนึ่งแห่งใดน่าสนใจหรือไม่ เพราะเกี่ยวข้องกับองค์ประกอบความชอบของแต่ละบุคคล อย่างไรก็ดีหน้าตาของเว็บไซต์จะมีความสัมพันธ์กับคุณภาพขององค์ประกอบต่างๆ เช่น ภาพกราฟฟิกจะต้องสมบูรณ์ไม่เป็นรอย หรือจุดด่าง หรือมีเส้นขอบเป็นขั้นบันได การใช้โทนสีที่เข้ากันอย่างสวยงาม ตลอดจนตัวอักษรที่อ่านง่าย สบายตา เป็นต้น
- การใช้งานอย่างไม่จำกัด (Compatibility) การออกแบบให้ผู้ใช้ส่วนใหญ่เข้าถึงได้มากที่สุด โดยไม่มีการบังคับให้ผู้ใช้ต้องติดตั้งโปรแกรมใดๆ เพิ่มเติม หรือสามารถแสดงผลได้ในทุกๆ ระบบปฏิบัติการที่มีความละเอียดของหน้าจอที่ต่างกันได้อย่างไม่มีปัญหา
กระบวนการพัฒนาเว็บไซต์ และการออกแบบเนวิเกเตอร์ (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
การออกแบบเนวิเกเตอร์ที่ดี
- เข้าใจง่าย
- มีความสม่ำเสมอ
- มีการตอบสนองต่อผู้ใช้
- มีความพร้อมและเหมาะต่อการใช้งาน
- นำเสนอหลายทางเลือก
- มีขั้นตอนสั้นและประหยัดเวลา
- มีรูปที่สื่อความหมาย
- มีคำอธิบายที่ชัดเจนและเข้าใจได้ง่าย
- มีความเหมาะสมกับวัตถุประสงค์ของเว็บไซต์
- สนับสนุนเป้าหมายและพฤติกรรมของผู้ใช้
การเลือกใช้สี (Designing Web Colors)
สีสันในหน้าเว็บเพจเป็นสิ่งที่มีความสำคัญมากในการดึงดูดความสนใจของผู้ใช้ เนื่องจากสิ่งแรกที่พวกเขามองเห็นจากเว็บเพจก็คือสี การเลือกใช้สีในเว็บไซต์มีความซับซ้อนพอสมควร เริ่มตั้งแต่กระบวนการเข้าเรื่องการแสดงออกของสีภายใต้สิ่งแวดล้อมที่ต่างกันของบราวเซอร์ จอมอนิเตอร์ และระบบปฏิบัติการ ตลอดจนถึงการเข้าใจทฤษฎีสี รู้จักเลือกใช้สีให้เหมาะสมเพื่อการสื่อความหมายอย่างสวยงาม
รูปแบบชุดสีพื้นฐาน (Simple Color Scheme)
ชุดสีร้อน (Warm Color Scheme) ชุดสีเย็น (Cool Color Scheme)
ชุดสีแบบสีเดียว (Monochromatic Color Scheme)
ชุดสีแบบสามเส้า (Triadic Color Scheme)
ชุดสีที่คล้ายกัน (Analogous Color Scheme)
ชุดสีตรงข้าม (Complementary Color Scheme)
ชุดสีตรงข้ามข้างเคียง (Split Complementary Color Scheme)
ชุดสีตรงข้ามข้างเคียง 2 ด้าน (Double Split Complementary Color Scheme)
กงล้อสี (Color Wheel)
ระบบสีที่ใช้ในการออกแบบเว็บไซต์
ระบบสี RGB (Red Green Blue) เป็นที่นิยมใช้กันสำหรับการออกแบบเว็บไซต์ โดยสีจะเกิดจากแม่สี 3 สี คือ สีแดง สีเขียว และสีน้ำเงิน ผสมกันจะทำให้เกิดเฉดสีกว่า16.7 ล้านสี ในการออกแบบเว็บไซต์นั้น HTML จะอาศัยการกำหนดสีพื้นหลังหรือตัวอักษร หรือลิงค์ต่างๆ โดยใช้ค่า RGB ในระบบเลขฐาน 16 ในการระบุค่าสีหนึ่งๆ
ตัวอย่าง
#FF0000 หมายถึง สีแดงที่มีความเข้มสูงสุดโดยปราศจากสีเขียวและสีน้ำเงิน
#00FF00 หมายถึง สีเขียวที่มีค่าความเข้มสูงสุดโดยปราศจากสีแดงและสีน้ำเงิน
#0000FF หมายถึง สีน้ำเงินที่มีค่าความเข้มสูงสุดโดยปราศจากสีแดงและสีเขียว
ไม่มีความคิดเห็น:
แสดงความคิดเห็น