กระบวนการพัฒนาเว็บไซต์
การจัดระบบโครงสร้างข้อมูล (Information Architecture)
ในกระบวนการพัฒนาเว็บไซต์ที่กำลังจะได้ศึกษาต่อไปนี้ได้อาศัยหลักการจัดระบบโครงสร้างข้อมูลที่เรียกว่าInformation Architecture อยู่ในหลาย ๆ ส่วน ตั้งแต่ขั้นแรกจนถึงขั้นที่ได้เป็นรูปแบบโครงสร้างสุดท้าย (Final Architecture Plan) ซึ่งถือเป็นกระบวนการที่สำคัญมากที่จะทำให้เว็บไซต์บรรลุตามเป้าหมายที่ตั้งไว้
การจัดระบบโครงสร้างข้อมูล คือ การพิจารณาว่าเว็บไซต์ควรจะมีข้อมูลและการทำงานใดบ้าง ด้วยการสร้างเป็นแผนผังโครงสร้างก่อนที่จะเริ่มลงมือพัฒนเว็บเพจ โดยเริ่มจากการกำหนดเป้าหมายเว็บไซต์ และกลุ่มผู้ใช้เป้าหมาย ต่อมาก็พิจารณาถึงเนื้อหาและการใช้งานที่จำเป็น แล้วนำมาจัดกลุ่มให้เป็นระบบ จากนั้นก็ถึงเวลาในการออกแบบโครงสร้างข้อมูลในหน้าเว็บ ให้พร้อมที่จะนำไปออกแบบกราฟิก และหน้าตาให้สมบูรณ์ต่อไป การจัดทำระบบโครงสร้างข้อมูลเป็นพื้นฐานสำคัญในการออกแบบเว็บไซต์ที่ดี ที่จะช่วยพัฒนาแบบแผนรายละเอียดข้อมูลในการออกแบบเว็บไซต์ ซึ่งได้แก่ รูปแบบการนำเสนอ ระบบการทำงาน แบบจำลอง ระบบเนวิเกชัน และอินเตอร์เฟสของเว็บ ดังนั้นการจัดระบบโครงสร้างข้อมูลจึงเป็นสิ่งสำคัญที่เกี่ยวข้องอยู่ในกระบวนการออกแบบเว็บไซต์
หลักการออกแบบหน้าเว็บ1.สร้างลำดับชั้นความสำคัญขององค์ประกอบ(Visual Hierarchy)
จัดตำแหน่งและลำดับขององค์ประกอบ แสดงลำดับความสำคัญของข้อมูลที่ต้องการให้ผู้ใช้ได้รับ เนื่องจากภาษาส่วนใหญ่จะอ่านจากซ้ายไปขวา และจากบนลงล่างจึงควรจัดวางสิ่งที่สำคัญไว้ที่ส่วนบนหรือด้านซ้ายของหน้าอยู่เสมอ เพื่อให้ผู้ใช้มองเห็นได้ก่อน
สีและความแตกต่างของสี แสดงถึงความสำคัญและความสัมพันธ์ของสิ่งต่างๆ ภายในหน้า สีที่เด่นชัดเหมาะสำหรับองค์กรที่สำคัญมาก ส่วนองค์ประกอบที่ใช้สีเดียวกันย่อมสื่อความหมายถึงความสัมพันธ์ที่ใกล้ชิดและความสำคัญที่เท่าเทียมกัน การใช้สีที่แตกต่างกันอย่างชัดเจนจะสามารถดึงดูดควาามสนใจจากผู้ใช้ให้มองเห็นและตอบสนองได้อย่างรวดเร็ว
ภาพเคลื่อนไหว เป็นสิ่งที่ดึงดูดความสนใจได้เป็นอย่างดีแต่จะต้องใช้อย่างจำกัดและระมัดระวังเพราะใช้สิ่งเคลื่อนไหวมากเกินไปจะทำให้จุดสนใจบนหน้าจอมากจนตัดสินใจได้ยากกว่าสิ่งไหนสำคัญ
2.สร้างรูปแบบ บุคลิก และสไตล์
รูปแบบ การเลือกรูปแบบเว็บที่เหมาะสมจะช่วยสร้างความเข้าใจของผู้ใช้ได้ดีขึ้น
บุคลิก เว็บแต่ละประเภทอาจมีบุคลิกลักษณะแตกต่างกันชึ้นอยู่กับเนื้อหาและเป้าหมายในการนำเสนอ บุคลิกที่เหมาะกับเนื้อหาย่อมทำให้ผู้ใช้เข้าถึงเนื้อหาได้ดีขึ้น
สไตล์ คือลักษณะการจัดโครงสร้างของหน้า รูปแบบกราฟิกชนิดและการจัดตัวอักษร ชุดสีที่ใช้ รวมถึงองค์ประกอบอื่นๆ ซึ่งไม่ควรสร้างสไตล์ของเว็บตามใจชอบแต่ควรคำนึงถึงความเหมาะสม
ไม่ว่าจะเลือกรูปแบบ บุคลิก และสไตล์ใดมาใช้ ควรใช้ลักษณะเหล่านั้นให้สม่ำเสมอตลอดทั้งเว็บเพื่อป้องกันความสับสนที่อาจเกิดขึ้นได้
3.สร้างความสม่ำเสมอตลอดทั่วทั้งไซต์
ความสม่ำเสมอของโครงสร้างหน้าเว็บและระบบเนวิเกชันทำให้ผู้ใช้รู้สึกคุ้นเคยและสามารถคาดการณ์ลักษณะของเว็บได้ล่วงหน้า
ทางด้านเทคนิคเราสามารถใช้ CSS ช่วยในการกำหนดสไตล์มาตรฐานได้
ข้อควรระวัง คือบางครั้งอาจกลายเป็นข้อจำกัดทำให้เว็บดูน่าเบื่อ แนวทางแก้ไขคือการสร้างความต่างที่น่าสนใจในแต่ละหน้าโดยใช้องค์ประกอบที่คล้ายคลึงกัน แต่มีสีหรือลักษณะ ต่างกันเล็กน้อยเพื่อทำให้เกิดลักษณะพิเศษของหน้านั้น
4.จัดวางองค์ประกอบทีสำคัญไว้ในส่วนบนของหน้าเสมอ
ส่วนบนของหน้า หมายถึง ส่วนแรกของหน้าที่จะปรากฏขึ้นในหน้าบราวเซอร์ดดยที่ยังไม่มีการเลื่อนหน้าจอใดๆ
ส่วนบนสุดนี้ควรประกอบด้วย
1.ชื่อของเว็บ เพื่อให้ผู้ใช้ได้รู้ทันทีว่ากำลังอยู่ในเว็บอะไร
1.ชื่อของเว็บ เพื่อให้ผู้ใช้ได้รู้ทันทีว่ากำลังอยู่ในเว็บอะไร
2.ชื่อหัวเรื่องหรือชื่อแสดงหมาวหมู่ของเนื้อหาที่ปรากฏ
3.สิ่งสำคัญที่เราต้องการโปรดมตเว็บ
4.ระบบเนวิเกชัน เพื่อให้ผู้ใช้คลิกส่วนที่ต้องการได้ทันที
5.สร้างจุดสนใจด้วยความแตกต่าง
5.สร้างจุดสนใจด้วยความแตกต่าง
การจัดองค์ประกอบในภาพรวมของหน้ามีความแตกต่างเป็นสิ่งสำคัญที่จะนำสายตาผู้อ่านไปยังบริเวณต่างๆ เว็บที่ออกแบบมาไม่ดีโดยเน้นการใช้กราฟฟิกหรือตัวอักษรที่มากเกินไป จะทไให้ยากต่อการมองหาข้อมูลที่มีความสำคัญจริงๆ เราสามารถใช้ความแตกต่างของสีเข้ามาช่วยสร้างลักษณะเด่นในหน้าเว็บ เพื่อนำสายตาผู้อ่านไปยังส่วนสำคัญของเนื้อหาได้
6.จัดแต่งหน้าให้เป็นระเบียบและเรียบง่าย
เนื้อหาในหน้าเว็บจำเป็นต้องอยู่ในรูปแบบที่ดูง่ายแยกเป้นสัดส่วน และดูไม่แน่นจนเกินไป การมีข้อมูลหรือองค์ประกอบที่มากเกินไปทำให้ผู้อ่านขาดความสนใจ เราจำเป็นต้องจัดการข้อมูลในหน้าเว็บให้มีความรู้สึกที่เรียบร้อยเป็นกันเอง การจัดวางตัวอักษร และรูปภาพให้เกิดพื้นที่ว่าง ทำให้ภาพรวมไม่แน่นจนเกินไป รวมถึงควรจัดวางหัวข้อและเนื้อเรื่องอย่างเป็นระบบและชัดเจน
6.จัดแต่งหน้าให้เป็นระเบียบและเรียบง่าย
เนื้อหาในหน้าเว็บจำเป็นต้องอยู่ในรูปแบบที่ดูง่ายแยกเป้นสัดส่วน และดูไม่แน่นจนเกินไป การมีข้อมูลหรือองค์ประกอบที่มากเกินไปทำให้ผู้อ่านขาดความสนใจ เราจำเป็นต้องจัดการข้อมูลในหน้าเว็บให้มีความรู้สึกที่เรียบร้อยเป็นกันเอง การจัดวางตัวอักษร และรูปภาพให้เกิดพื้นที่ว่าง ทำให้ภาพรวมไม่แน่นจนเกินไป รวมถึงควรจัดวางหัวข้อและเนื้อเรื่องอย่างเป็นระบบและชัดเจน
เนื้อหาที่มีบรรทัดยาวเต็มความกว้างของหน้าจอเป็นสิ่งที่สร้างความลำบากต่อการอ่าน ควรจัดตัวหนังสือให้อยู่ในคอลัมน์ที่ไม่กว้างเกินไปข้อควรระวัง การมีคอลัมน์ขนาดเล็กหลายคอลัมน์ต่อกันผู้อ่านต้องอ่านจากบนลงล่างและต้องเลื่อนหน้าจอขึ้นมาด้านบนเพื่ออ่านคอลัมน์ถัดไป เพราะเป็นสิ่งที่ไม่สะดวกอย่างยิ่ง
7.ใช้กราฟฟิกอย่างเหมาะสมควรใช้กราฟฟิกที่เป็นไอคอน ปุ่ม ลายเส้น และสิ่งอื่นๆ ตามความเหมาะสมและไม่มากเกินไป เพื่อหลีกเลี่ยงโครงสร้างของหน้าที่ยุ่งเหยิงและไม่เป็นระเบียบ ส่วนตัวอักษรขนาดใหญ่ด้วยคำสั่ง H1 และ H2 ควรใช้ในบริมาณน้อยๆ เพื่อให้ได้ผลลัพธ์สูงสุด การใช้กราฟฟิกมากเกินความจำเป็ฯทำให้เกิดจุดเด่นทั่งทั้งหน้าเป็นผลให้ไม่มีอะไรในหน้านั้นเด่นขึ้นมาจริงๆ
การเลือกใช้สีสำหรับเวปไซต์
ประโยชน์ของสีในเว็บไซต์
1.สามารถชักนำสายตาผู้อ่านผู้อ่านให้ไปยังหน้าเพจที่เราต้องการได้
2.สีช่วยเชื่อมโยงบริเวณที่ได้รับการออกแบบเข้าด้วยกัน
3.สีสามารถนำไปใช้แบ่งบริเวณต่างๆ
4.สีใช้ดึงดูความสนใจผู้อ่านได้
5.สีสามารถสร้างอารมณ์โดยรวมของเวปเพจได้
สีขั้นที่ 1 (สีขั้นต้นหรือแม่สี Primary Color ) ประกอบด้วย สีแดง สีเหลือง และสีน้ำเงิน
สีขั้นที่ 2 (Binary Color) เกิดจากการนำเอาสีขั้นที่ 1 มาผสมกันในอัตราส่วนเท่าๆ กัน ประกอบด้วย สีเขียว สีส้ม และสีม่วง
สีเขียว เกิดจากการนำเอา สีเหลือง กับ สีน้ำเงิน มาผสมกันในอัตราส่วนเท่าๆ กัน
สีส้ม เกิดจากการนำเอา สีเหลือง กับ สีแดง มาผสมกันในอัตราส่วนเท่าๆ กัน
สีม่วง เกิดจากการนำเอา สีแดง กับ สีน้ำเงิน มาผสมกันในอัตราส่วนเท่าๆ กัน
สีขั้นที่ 3 (Intermediate Color) เกิดจากการนำเอาสีขั้นที่ 2 ผสมกับสีขั้นต้นที่อยู่ใกล้เคียงกันได้สีต่างกันออกไป ได้แก่ สี เหลืองแกมเขียว สีน้ำเงินแกมม่วง สีแดงแกมม่วง สีแดงแกมส้ม สีเหลืองแกมส้ม และสีน้ำเงินแกมเขียว
สีเหลืองแกมเขียว เกิดจากการผสมกันระหว่าง สีเหลืองกับ สีเขียว อย่างละเท่าๆ กัน
สีน้ำเงินแกมม่วง เกิดจากการผสมกันระหว่าง สีน้ำเงิน กับ สีม่วง อย่างละเท่าๆ กัน
สีแดงแกมม่วง เกิดจากการผสมกันระหว่าง สีแดง กับ สีม่วง อย่างละเท่าๆ กัน
สีแดงแกมส้ม เกิดจากการผสมกันระหว่าง สีแดง กับ สีส้ม อย่างละเท่าๆ กัน
สีเหลืองแกมส้ม เกิดจากการผสมกันระหว่าง สีเหลือง กับ สีส้ม อย่างละเท่าๆ กัน
สีน้ำเงินแกมเขียว เกิดจากการผสมกันระหว่าง สีน้ำเงิน กับ สีเขียว อย่างละเท่าๆ กันออกแบบกราฟฟิกสำหรับเว็บไซต์
รูปแบบกราฟฟิกสำหรับเว็บ(GIF,JPG และ PNG)
►GIF ย่อมาจาก Graphics Interchange Format
-ได้รับความนิยมในยุคแรก
-มีระบบสีแบบ Index ซึ่งมีข้อมูลสีขนาด 8 บิต ทำให้มีสีมากที่สุด 256 สี
-มีการบีบอัดข้อมูลตามแนวของพิกเซล เหมาสำหรับกราฟฟิกที่ประกอบด้วยสีพื้น
►JPG ย่อมาจาก Joint Photographic Experts Group
-มีข้อมูลสีขนาด 24 บิต(True Color) สามารถแสดงสีได้ถึง 16.7ล้านสี
-ใช้ระบบการบีบอัดที่มีลักษณะที่สูญเสีย(lossy)
-ไฟล์ประเภทนี้ควรนำไปใช้กับรูปถ่ายหรือกราฟฟิกที่มีการไล่ระดับสีอย่างละเอียด
►PNG ย่อมาจาก Portable Network Graphic
-สามารถสนับสนุนระบบสีได้ทั้ง 8 บิต 16 บิต 24บิต
-มีระบบการบีบอัดแบบ Deflate ที่ไม่ทำให้เกิดการสูญเสีย(lossless)
-มีระบบการควบคุมค่าแกมม่า(Gamma) และ ความโปร่งใส(Transparency)ในตัวเอง