จัดระบบโครงสร้างข้อมูล(Information Architecture)
การจัดระบบโครงสร้างข้อมูลเป็นพื้นฐานในการออกแบบเว็บไซท์ที่ดี ได้แก่ รูปแบบการนำเสนอ ระบบการทำงานแบบจำลอง ระบบเนวิเกชัน และอินเตอร์เฟสของเว็บดังนั้น การจัดระบบโครงสร้างข้อมูลจึงเป็นสิ่งสำคัญที่เกี่ยวข้องอยู่ในกระบวนการออกแบบเว็บไซต์การจัดระบบโครงสร้างข้อมูล คือการพิจารณาว่า เว็บควรจะมีข้อมูลและการทำงานใดบ้าง โดยเริ่มจากการกำหนด
เป้าหมาย กลุ่มผู้ใช้เป้าหมาย เนื้อหาและการใช้งานที่จำเป็น นำมาจัดกลุ่มให้เป็นระบบ
Phase 1 : สำรวจปัจจัยสำคัญ(Research)1. รู้จักตัวเอง-กำหนดเป้าหมายและสำรวจความพร้อม
2. เรียนรู้ผู้ใช้-ระบุกลุ่มผู้ใช้และศึกษาความต้องการการ
3. ศึกษาคู่แข่ง-สำรวจการแข่งขันและการเรียนรู้คู่แข่ง
Phase 2 : พัฒนาเนื้อหา(Site Content)4. สร้างกลยุทธ์การออกแบบ
5. หาข้อสรุปขอบเขตเนื้อหา
Phase 3 : พัฒนาโครงสร้างเว็บไซท์(Site Structure)6. จัดระบบข้อมูล
7. จัดทำโครงสร้างข้อมูล
8. พัฒนาระบบเนวิเกชัน
Phase 4 : ออกแบบและพัฒนาหน้าเว็บ(Visual Design)9. ออกแบบลักษณะหน้าตาเว็บ
10. พัฒนาเว็บต้นแบบและข้อกำหนดสุดท้าย
Phase 5 : พัฒนาและดำเนินการ (Production & Operation)11. ลงมือพัฒนาเว็บ
12. เปิดเว็บไซท์
13. ดูแลและพัฒนาต่อเนื่อง
เป้าหมาย กลุ่มผู้ใช้เป้าหมาย เนื้อหาและการใช้งานที่จำเป็น นำมาจัดกลุ่มให้เป็นระบบ
Phase 1 : สำรวจปัจจัยสำคัญ(Research)1. รู้จักตัวเอง-กำหนดเป้าหมายและสำรวจความพร้อม
2. เรียนรู้ผู้ใช้-ระบุกลุ่มผู้ใช้และศึกษาความต้องการการ
3. ศึกษาคู่แข่ง-สำรวจการแข่งขันและการเรียนรู้คู่แข่ง
Phase 2 : พัฒนาเนื้อหา(Site Content)4. สร้างกลยุทธ์การออกแบบ
5. หาข้อสรุปขอบเขตเนื้อหา
Phase 3 : พัฒนาโครงสร้างเว็บไซท์(Site Structure)6. จัดระบบข้อมูล
7. จัดทำโครงสร้างข้อมูล
8. พัฒนาระบบเนวิเกชัน
Phase 4 : ออกแบบและพัฒนาหน้าเว็บ(Visual Design)9. ออกแบบลักษณะหน้าตาเว็บ
10. พัฒนาเว็บต้นแบบและข้อกำหนดสุดท้าย
Phase 5 : พัฒนาและดำเนินการ (Production & Operation)11. ลงมือพัฒนาเว็บ
12. เปิดเว็บไซท์
13. ดูแลและพัฒนาต่อเนื่อง
***************************************************************************************************************************
ปัจจัยหลักที่เกี่ยวข้องกับการท่องเว็บไซต์
1. เบราเซอร์ที่ใช้
- เบราเซอร์คือโปรแกรมที่ใช้เรียกดูเว็บเพจ โดยสามารถแสดงผลได้ทั้งรูปแบบตัวอักษร , รูปภาพ และภาพเคลื่อนไหว
- มีเบราเซอร์หลายชนิดที่ได้รับความนิยม เช่น
* Internet Explorer
* Netscape Navigator
* The World
* Opera
* Mozilla
* Firefox
- การออกแบบเว็บไซต์ตามคุณสมบัติของเบราเซอร์
* เว็บไซต์สำหรับเบราเซอร์ทุกร่น
* เว็บไซต์สำหรับเบราเซอร์รุ่นล่าสุด
* เว็บไซต์ตามความสามารถของเบราเซอร์
* เว็บไซต์ที่มีหลายรูปแบบ
2. ระบบปฏิบัติการ (Operating System)
- ระบบปฏิบัติการเป็นปัจจัยที่มีผลต่อการทำงานของเบราเซอร์มาก โดยแต่ละระบบปฏิบัติการจะมีความแตกต่างกันในเรื่องของชนิดและรุ่นของเบราเซอร์ที่ใช้ได้ , ระดับความละเอียดของหน้าจอ , ชุดสีของระบบ และชนิดของตัวอักษรที่มาพร้อมกับระบบ เป็นต้น
* การแสดงผลของ windows จะมีขนาดใหญ่กว่า Mac เล็กน้อย
* ความสว่างของหน้าจอบน Mac จะมากกว่า Windows และ Unix
3. ความละเอียดของหน้าจอ
- ขนาดของจอมอนิเตอร์มีหลายขนาด เช่น 15",17",21" และอื่น ๆ
- ความละเอียดของหน้าจอ (monitor resolution) มีหน่วยเป็น Pixel
* ความละเอียด 640 x 480 หมายถึง หน้าจอมีจุดพิกเซลเรียงตัวตามแนวนอน 640 พิกเซล และตามแนวตั้ง 480 พิกเซล
- ความละเอียดของหน้าจอจะไม่ขึ้นกับบขนาดของมอนิเตอร์ที่ใช้ แต่จะขึ้นกับประสิทธิภาพของการ์ดแสดงผลว่าสามารถทำได้ละเอียดแค่ไหน
* EX: จอขนาด 17" สามารถตั้งค่าความละเอียดได้ตั้งแต่ 640 x 480 จนถึง 1600x1200 เป็นต้น
4. จำนวนสีที่จอของผู้ใช้สามารถแสดงได้
- มอนิเตอร์ที่สามารถแสดงสีที่แตกต่างกัน ขึ้นอยู่กับประสิทธิภาพของการ์ดจอ (video card)
- จำนวนหน่วยความจำในการ์ดจอ (video memory) ทีมากขึ้นจะทำให้สามารถแสดงสีได้มากขึ้น
- จำนวนสีที่การ์ดจอสามารถ แสดงได้นั้น ขึ้นอยู่กับค่าความละเอียดของสีที่เรียกว่า bit depth หรือ color depth ซึ่งก็คือจำนวนบิตที่ใช้ในการเก็บข้อมูลแต่ละพิกเซล
- ชุดสีสำหรับเว็บ (Web Palette) หมายถึงชุดสีจำนวน 216 สีที่มีอยู่เหมือนกันในระบบปฏิบัติการ Windows และ Mac - ปัจจุบัน Web Palette มีความสำคัญลดน้อยลง เนื่องจากจอของผู้ใช้สามารถแสดงสีได้มากขึ้น แต่ใน tool ต่าง ๆ เช่น Dreamweaver ก็ยังเห็นชุดสีเหล่านี้ปรากฏอยู่
5. ชนิดของตัวอักษรที่มีอยู่ในเครื่องของผู้ใช้
- MS Sans Serif VS Microsoft Sans Serif
* MS Sans Serif เป็นฟอนต์แบบบิตแมพ (bitmapped font ) ที่ออกแบบขึ้นจากจุดของพิกเซล โดยมีการออกแบบแต่ละตัวอักษรไว้เป็นขนาดที่แน่นอน
* Microsoft Sans font เป็นฟอนต์ที่มีโครงสร้างของอักขระเป็นแบบเวคเตอร์หรือลายเส้น (vector font) โดยมีการออกแบบเอาท์ไลน์ไว้เพียงแบบเดียว แต่สามารถปรับขนาดได้อย่างไม่จำกัด
- ตัวอักษรแบบกราฟิก (Graphic Text)
ข้อดี
* สามารถกำหนดลักษณะของตัวอักษรได้อย่างแน่นอน ทั้งชนิด ขนาด สี
*ผู้ชมทุกคนจะมองเห็นตัวอักษรได้เหมือนกัน โดยไม่จำเป็นต้องมีตัวอักษรชนิดนั้นติดตั้งไว้ใน เครื่อง
* สามารถสร้างเอกลักษณ์เฉพาะตัวของเว็บได้จากรูปแบบของตัวอักษร
ข้อเสีย
* ใช้เวลาในการ download มากกว่า
* ลำบากในการแก้ไขและเปลี่ยนแปลง
* ข้อความที่เป็นกราฟิกจะไม่สามารถค้นหาได้ด้วย search engine
- ความละเอียดของหน้าจอจะไม่ขึ้นกับบขนาดของมอนิเตอร์ที่ใช้ แต่จะขึ้นกับประสิทธิภาพของการ์ดแสดงผลว่าสามารถทำได้ละเอียดแค่ไหน
* EX: จอขนาด 17" สามารถตั้งค่าความละเอียดได้ตั้งแต่ 640 x 480 จนถึง 1600x1200 เป็นต้น
4. จำนวนสีที่จอของผู้ใช้สามารถแสดงได้
- มอนิเตอร์ที่สามารถแสดงสีที่แตกต่างกัน ขึ้นอยู่กับประสิทธิภาพของการ์ดจอ (video card)
- จำนวนหน่วยความจำในการ์ดจอ (video memory) ทีมากขึ้นจะทำให้สามารถแสดงสีได้มากขึ้น
- จำนวนสีที่การ์ดจอสามารถ แสดงได้นั้น ขึ้นอยู่กับค่าความละเอียดของสีที่เรียกว่า bit depth หรือ color depth ซึ่งก็คือจำนวนบิตที่ใช้ในการเก็บข้อมูลแต่ละพิกเซล
- ชุดสีสำหรับเว็บ (Web Palette) หมายถึงชุดสีจำนวน 216 สีที่มีอยู่เหมือนกันในระบบปฏิบัติการ Windows และ Mac - ปัจจุบัน Web Palette มีความสำคัญลดน้อยลง เนื่องจากจอของผู้ใช้สามารถแสดงสีได้มากขึ้น แต่ใน tool ต่าง ๆ เช่น Dreamweaver ก็ยังเห็นชุดสีเหล่านี้ปรากฏอยู่
5. ชนิดของตัวอักษรที่มีอยู่ในเครื่องของผู้ใช้
- MS Sans Serif VS Microsoft Sans Serif
* MS Sans Serif เป็นฟอนต์แบบบิตแมพ (bitmapped font ) ที่ออกแบบขึ้นจากจุดของพิกเซล โดยมีการออกแบบแต่ละตัวอักษรไว้เป็นขนาดที่แน่นอน
* Microsoft Sans font เป็นฟอนต์ที่มีโครงสร้างของอักขระเป็นแบบเวคเตอร์หรือลายเส้น (vector font) โดยมีการออกแบบเอาท์ไลน์ไว้เพียงแบบเดียว แต่สามารถปรับขนาดได้อย่างไม่จำกัด
- ตัวอักษรแบบกราฟิก (Graphic Text)
ข้อดี
* สามารถกำหนดลักษณะของตัวอักษรได้อย่างแน่นอน ทั้งชนิด ขนาด สี
*ผู้ชมทุกคนจะมองเห็นตัวอักษรได้เหมือนกัน โดยไม่จำเป็นต้องมีตัวอักษรชนิดนั้นติดตั้งไว้ใน เครื่อง
* สามารถสร้างเอกลักษณ์เฉพาะตัวของเว็บได้จากรูปแบบของตัวอักษร
ข้อเสีย
* ใช้เวลาในการ download มากกว่า
* ลำบากในการแก้ไขและเปลี่ยนแปลง
* ข้อความที่เป็นกราฟิกจะไม่สามารถค้นหาได้ด้วย search engine
*********************************************************************************
เลือกใช้สีสำหรับเว็บไซต์
สีสันในเว็บเป็นสิ่งที่สำคัญมากในการดึงดูดความสนใจของผู้ใช้ เนื่องจากสิ่งแรกที่ผู้ใช้มองเห็น จากเว็บก็คือสี ซึ่งเป็นสิ่งกำหนดบรรยากาศและความรู้สึกของเว็บไซต์
- เราสามารถใช้สีกับทุกองค์ประกอบของเว็บเพจ ตั้งแต่รูปภาพ ตัวอักษร สีพื้นหลัง การใช้สีที่เหมาะสมจะช่วยในการสื่อความหมายของเนื้อหา
- การใช้สีพื้นใกล้เคียงกับสีตัวอักษร บางครั้งอาจสร้างความลำบากในการอ่าน
- การใช้สีที่มากเกินความจำเป็นอาจสร้างความสับสนให้กับผู้อ่าน
- การใช้สีที่กลมกลืนกันช่วยให้เว็บไซต์น่าดูชมมากยิ่งขึ้น
ประโยชน์ของสีในเว็บไซต์
- สามารถชักนำสายตาผู้อ่านให้ไปยังทุกบริเวณในหน้าเว็บเพจที่เราต้องการได้ เช่น ข้อมูลใหม่ หรือโปรโมชั่นพิเศษ
- สีช่วยเชื่อมโยงบริเวณที่ได้รับการออกแบบเข้าด้วยกัน
- สีสามารถนำไปใช้ในการแบ่งบริเวณต่าง ๆ ออกจากกัน
- สีสามารถใช้ในการดึงดูดความสามารถของผู้อ่าน
- สีสามารถสร้างอารมณ์โดยรวมของเว็บเพจ
- ช่วยสร้างระเบียบให้กับข้อความต่าง ๆ เช่น ใช้สีแยกระหว่างหัวเรื่องกับเนื้อเรื่อง
- สามารถส่งเสริมเอกลักษณ์ขององค์กรหรือหน่วยงานนั้น ๆ
การผสมสี (Color Mixing) มี 2 แบบ
1. การผสมแบบบวก (Additive mixing) จะเป็นรูปแบบการผสมของแสง ไม่ใช่การผสมของวัตถุที่มีสีบนกระดาษ สามารถนำไปใช้ในสื่อใด ๆ ที่ใช้แสงส่องออกมา เช่น จอโปรเจคเตอร์ ทีวี
2. การผสมแบบลบ (Subtractive mixing) การผสมสีแบบนี้ไม่เกี่ยวข้องกับแสง แต่เกี่ยวเนื่องกับการดูดกลืนและสะท้อนแสงของวัตถุต่าง ๆ สามารถนำไปใช้ในสื่อที่เกี่ยวข้องกับการใช้วัตถุมีสี เช่น ภาพวาดของศิลปิน รูปปั้น หรือ สิ่งพิมพ์ต่าง ๆ
ความกลมกลืนของสี
- ความเป็นระเบียบของสี ที่ทำให้ผู้ชมรู้สึกถึงความสมดุล และความสวยงามในเวลาเดียวกัน
*การใช้สีที่จืดชืดเกินไป จะทำให้เกิดความรู้สึกที่น่าเบื่อ และไม่สามารถดึงดูดความสนใจจาก ผู้ชมได้
* การใช้สีที่มากเกินไป ก็จะดูวุ่นวาย ขาดระเบียบ และอาจสร้างความสับสนให้กับผู้ชม
- เป้าหมายในเรื่องสี คือการนำเสนอเว็บไซต์โดยใช้ชุดสีในรูปแบบที่เข้าใจได้ง่าย น่าสนใจ
และสื่อความหมายได้อย่างเหมาะสม
และสื่อความหมายได้อย่างเหมาะสม
รูปแบบชุดสีพื้นฐาน (Simple Color Schemes)
1. ชุดสีร้อน (Warm Color Scheme) ประกอบด้วยสีม่วง , น้ำเงิน , น้ำเงินอ่อน , ฟ้า , ฟ้าเงินแกมเขียว และสีเขียว โดยจะให้ความรู้สึกเย็นสบาย องค์ประกอบที่ใช้สีเย็นจะดูสุภาพ เรียบร้อย
2. ชุดสีแบบเดียว (Monochromatic Color Scheme) เป็นรูปแบบชุดสีที่ง่ายที่สุด คือมีค่าของสีบริสุทธิ์เพียงสีเดียว แต่เพิ่มความหลากหลายโดยการเพิ่มความเข้ม อ่อนในระดับต่าง ๆ และชุดสีแบบนี้ค่อนข้างจะมีความกลมกลืนเป็นหนึ่งเดียว แต่ในบางครั้งอาจทำให้ดูไม่มีชีวิตชีวา เพราะขาดความหลากหลายของสี
3. ชุดสีที่คล้ายคลึงกัน (Analogous Color Scheme) ประกอบด้วยสี 2 หรือ 3 สีที่ติดอยู่กันในวงล้อ สามารถเพิ่มเป็น 4 หรือ 5 สีได้ แต่อาจส่งผลให้ขอบเขตของสีกว้างไป
4. ชุดสีตรงข้ามข้างเคียง (Split Complementary Color Scheme) เป็นชุดสีที่เปลี่ยนแปลงมาจากชุดสีตรงข้าม และชุดสีแบบนี้มีความหลากหลายเพิ่มขึ้น แต่จะมีผลให้ความสดใส ความสะดุดตา และความเข้ากันของสีลดลงด้วย
5. ชุดสีตรงข้ามข้างเคียงทั้ง 2 ด้าน (Double Split Complementary Color Scheme) ดัดแปลงมาจากชุดสีตรงข้ามเช่นกัน แต่สีตรงข้ามทั้ง 2 สีถูกแบ่งแยกเป็นสีด้านข้างทั้ง 2 ด้าน และชุดสีแบบนี้มีความหลากหลายของสีที่มากขึ้น แต่จะมีความสดใสและกลมกลืนของสีที่ลดลง
6. ชุดสีเย็น (Cool Color Scheme) เว็บเพจที่ใช้โทนสีเย็น ให้บรรยากาศคล้ายทะเล รู้สึกเย็นสบาย
7. ชุดสีแบบสามเส้า (Triadic Color Scheme) เป็นชุดสีที่อยู่ที่มุมของสามเหลี่ยมด้านเท่าทั้งสาม ซึ่งเป็นสีที่มีระยะห่างในวงล้อสีเท่ากัน จึงมีความเข้ากันอย่างลงตัว
8. ชุดสีตรงข้าม (Complementary Color Scheme) คือสีที่อยู่ตรงข้ามกันในวงล้อสี เมื่อนำสีทั้งสองมาใช้คู่กัน จะทำให้สีทั้งสองมีความสว่างและสดใสมากขึ้น
