บทที่ 2 กระบวนการพัฒนาเว็บไซต์
การจัดระบบโครงสร้างข้อมูลคือ การพิจารณาว่า เว็บควรจะมีข้อมูลและการทำงานใดบ้าง โดยเริ่มจากการกำหนดเป้าหมาย กลุ่มผู้ใช้เป้าหมาย เนื้อหาและการใช้งานที่จำเป็น นำมาจัดกลุ่มให้เป็นระบบเป็นพื้นฐานในการออกแบบเว็บไซต์ที่ดี มีทั้งหมด 5 Phase
Phase 1 : สำรวจปัจจัยสำคัญ (Research)
1. รู้จักตัวเอง-กำหนดเป้าหมายและสำรวจความพร้อม
2 .เรียนรู้ผู้ใช้-ระบุกลุ่มผู้ใช้และศึกษาความต้องการ
3. ศึกษาคู่แข่ง-สำรวจการแข่งขันและการเรียนรู้คู่แข่ง
สิ่งที่ได้รับ 1. เป้าหมายหลักของเว็บ
2. ความต้องการของผู้ใช้
3 .กลยุทธ์ในการแข่งขัน
Phase 4 : ออกแบบและพัฒนาหน้าเว็บ (Visual Design) 9. ออกแบบลักษณะหน้าตาเว็บ
10. พัฒนาเว็บต้นแบบและข้อกำหนดสุดท้าย
สิ่งที่ได้รับ 1. ลักษณะหน้าตาของเว็บ
2. เว็บต้นแบบที่จะใช้ในการพัฒนา
3. รูปแบบโครงสร้างของเว็บ
4. ข้อกำหนดในการพัฒนาเว็บ
Phase 5 : พัฒนาและดำเนินการ (Production & Operation)
11. ลงมือพัฒนาเว็บ
12. เปิดเว็บไซต์
13. ดูแลและพัฒนาต่อเนื่อง
สิ่งที่ได้รับ 1. เว็บที่สมบูรณ์
2. เปิดตัวเว็บและทำให้เป็นที่รู้จัก
3. แนวทางการดูแลและพัฒนาต่อไป
2 .เรียนรู้ผู้ใช้-ระบุกลุ่มผู้ใช้และศึกษาความต้องการ
3. ศึกษาคู่แข่ง-สำรวจการแข่งขันและการเรียนรู้คู่แข่ง
สิ่งที่ได้รับ 1. เป้าหมายหลักของเว็บ
2. ความต้องการของผู้ใช้
3 .กลยุทธ์ในการแข่งขัน
Phase 4 : ออกแบบและพัฒนาหน้าเว็บ (Visual Design) 9. ออกแบบลักษณะหน้าตาเว็บ
10. พัฒนาเว็บต้นแบบและข้อกำหนดสุดท้าย
สิ่งที่ได้รับ 1. ลักษณะหน้าตาของเว็บ
2. เว็บต้นแบบที่จะใช้ในการพัฒนา
3. รูปแบบโครงสร้างของเว็บ
4. ข้อกำหนดในการพัฒนาเว็บ
Phase 5 : พัฒนาและดำเนินการ (Production & Operation)
11. ลงมือพัฒนาเว็บ
12. เปิดเว็บไซต์
13. ดูแลและพัฒนาต่อเนื่อง
สิ่งที่ได้รับ 1. เว็บที่สมบูรณ์
2. เปิดตัวเว็บและทำให้เป็นที่รู้จัก
3. แนวทางการดูแลและพัฒนาต่อไป
บทที่ 9 ออกแบบกราฟฟิกสำหรับเว็บไซต์
GIF ย่อมาจากคำว่า Graphic Interchange Format
Phase 3 : พัฒนาโครงสร้างเว็บไซต์ (Site Structure)
6. จัดระบบข้อมูล
7. จัดทำโครงสร้างข้อมูล
8. พัฒนาระบบเนวิเกชัน
สิ่งที่ได้รับ
1. แนวทางการออกแบบเว็บ
2. ขอบเขตเนื้อหาและการใช้งาน
3. ข้อมูลที่ถูกจัดอย่างเป็นระบบ 7
โปรแกรมกราฟฟิกสำหรับเว็บ
ปัจจุปันมีโปรแกรมหลายประเภทที่นำมาใช้ในการสร้างกราฟฟิกสำหรับเว็บ
ค่าพื้นฐานที่สามารถเลือกปรับได้คือ รูปแบบไฟล์, ชุดสีที่ใช้, จำนวนสี, ระดับความสูญเสีย,ความโปร่งใส และสีพื้นหลัง
บทที่10 จัดรูปแบบสำหรับเว็บไซต์
ความสะดวกในการอ่าน (Legibility)
∙ หลีกเลี่ยงการใช้คำที่เป็นตัวพิมพ์ใหญ่ทั้งหมด เพราะจะทำให้อ่านยากและลดความสะดุดตาลง
∙ การใช้ตัวพิมพ์เล็กทั้งหมดในประโยค จะสร้างความรู้สึกไม่เป็นทางการ และแสดงถึงความไม่สมบรูณ์ของเนื้อหา
การจัดข้อความในหน้าเว็บช่องว่างระหว่างตัวอักษรและระหว่างคำ
ขนาดของตัวอักษร
การใช้สีกับตัวอักษร
รูปแบบกราฟฟิกสำหรับเว็บ
รูปแบบหลักมี 2 ประเภท คือ GIF และ JPG
GIF ย่อมาจากคำว่า Graphic Interchange Format
- ได้รับความนิยมในยุคแรก
- มีระบบสีแบบ Index ซึ่งมีข้อมูลสีขนาด 8 บิต ทำให้มีสีมากสุด 256 สี
- มีการบีบอัดข้อมูลตามแนวของพิกเซล เหมาะสำหรับกราฟฟิกที่ประกอบด้วยสีพื้น
JPG ย่อมาจากคำว่า Joint Photographic Experst Group
- มีข้อมูลสีขนาด 24 บิต (True Color) สามารถแสดงสีได้ถึง 16.7ล้านสี
- ใช้ระบบการบีบอัดที่มีลักษณะที่สูญเสีย (lossy)
- ไฟล์ประเภทนี้ควรนำไปใช้กับรูปถ่ายหรือกราฟฟิกที่มีการไล่ระดับสีอย่างละเอียดระบบการวัดความละเอียดของรูปภาพ
- ระบบการวัดความละเอียดของรูปภาพที่แสดงผลบนมอนิเตอร์ควรใช้หน่วย pixel por inch (ppi)
- การใช้งานจะนำหน่วย dor per inch (dpi) ซึ่งเป็นหน่วยวัดความละเอียดของสิ่งพิมพ์มาใช้งานแทน ppi
- ความละเอียดของรูปภาพที่ใช้ในเว็บไซต์ควรมีความละเอียดแค่ 72 ppi
Phase 2 : พัฒนาเนื้อหา (Site Content)
4 .สร้างกลยุทธ์การออกแบบ
5 .หาข้อสรุปขอบเขตเนื้อหา
สิ่งที่ได้รับ
1. แนวทางการออกแบบเว็บ
2. ขอบเขตเนื้อหาและการใช้งาน
3. ข้อมูลที่ถูกจัดอย่างเป็นระบบ
5 .หาข้อสรุปขอบเขตเนื้อหา
สิ่งที่ได้รับ
1. แนวทางการออกแบบเว็บ
2. ขอบเขตเนื้อหาและการใช้งาน
3. ข้อมูลที่ถูกจัดอย่างเป็นระบบ
Phase 3 : พัฒนาโครงสร้างเว็บไซต์ (Site Structure)
6. จัดระบบข้อมูล
7. จัดทำโครงสร้างข้อมูล
8. พัฒนาระบบเนวิเกชัน
สิ่งที่ได้รับ
1. แนวทางการออกแบบเว็บ
2. ขอบเขตเนื้อหาและการใช้งาน
3. ข้อมูลที่ถูกจัดอย่างเป็นระบบ 7
โปรแกรมกราฟฟิกสำหรับเว็บ
ปัจจุปันมีโปรแกรมหลายประเภทที่นำมาใช้ในการสร้างกราฟฟิกสำหรับเว็บ
☺ Adobe PhotoShop
☺ Adobe ImageReady ☺ Firework
ค่าพื้นฐานที่สามารถเลือกปรับได้คือ รูปแบบไฟล์, ชุดสีที่ใช้, จำนวนสี, ระดับความสูญเสีย,ความโปร่งใส และสีพื้นหลัง
จัดรูปแบบตัวอักษรสำหรับเว็บไซต์
∙ ตัวอักษรมีความสำคัญในการสื่อข้อความถึงผู้ใช้
∙ ตัวอักษรมีหลายชนิด แต่ละชนิดจะให้อารมณ์และความรู้สึกที่แตกต่างกัน ควรเลือกใช้ตัวอักษรให้เหมาะสมกับเนื้อหาและข้อมูลที่ต้องการสื่อ
ส่วนประกอบของตัวอักษร
Ascender : ส่วนบนของตัวอักษรพิมพ์เล็กที่สูงกว่าความสูง x-height ของตัวอักษร
Descender : ส่วนล่างของตัวอักษรพิมพ์เล็กที่ต่ำกว่าเส้น baseline
Baseline : เส้นสมมติที่ตัวอักษรส่วนใหญ่ตั้งอยู่
Cap height : ความสูงจากเส้น baseline ไปถึงส่วนบนสุดของตัวอักษรพิมพ์ใหญ่
Point size : ระยะความสูงทั้งหมดวัดจากส่วนบนสุดถึงส่วนล่างสุดของตัวอักษร
X-height : ความสูงของตัวอักษร x ในแบบพิมพ์เล็ก ซึ่งมักใช้อ้างถึงความสูงของตัวอักษรที่ไม่รวมascender และ descender
∙ ค่าความสูง x-height จะมีผลต่อภาพรวมของตัวอักษรและความยากง่ายในการอ่าน
ความสะดวกในการอ่าน (Legibility)
∙ การใช้ตัวพิมพ์เล็กทั้งหมดในประโยค จะสร้างความรู้สึกไม่เป็นทางการ และแสดงถึงความไม่สมบรูณ์ของเนื้อหา
การจัดข้อความในหน้าเว็บช่องว่างระหว่างตัวอักษรและระหว่างคำ
∙ ตัวอักษรบางคู่ที่อยู่ติดกันอาจมีระยะที่ไม่เหมาะสม จำเป็นต้องมีการปรับแต่งที่เรียกว่า Kerningเพื่อที่สายตาจะได้เคลื่อนที่อย่างราบเรียบและสม่ำเสมอ
∙ การจัดตำแหน่งแบบ justify ทำให้ช่องว่างของแต่ละคำแตกต่างไปในแต่ละบรรทัด ซึ่งอาจทำให้เกิดช่องว่างที่ไม่สวยงามได้
ความยาวของหน้าเว็บ
∙ หน้าเว็บที่ยาวมาก ๆ จะทำให้ผู้ชมรู้สึกเหนื่อยล้าที่จะอ่าน
∙ ควรจัดแบ่งเป็น paragraph หรือ ตัดแบ่งเป็นหลาย ๆ หน้าขนาดของตัวอักษร
ขนาดของตัวอักษร
∙ ใช้ตัวอักษรหลายขนาดเพื่อสร้างลำดับความสำคัญของข้อมูล
∙ ลำดับในการอ่านโดยทั่วไป ผู้อ่านจะอ่านจากบนลงล่าง และจากซ้ายไปขวา
การใช้สีกับตัวอักษร
∙ กำหนดสีหลักสำหรับเว็บ
∙ ใช้สีของตัวอักษรอย่างมีความหมายสม่ำเสมอ
∙ ใช้สีที่แตกต่างกันในแต่ละส่วนข้อมูล
∙ กำหนดสีของ link ให้เหมาะสม
ไม่มีความคิดเห็น:
แสดงความคิดเห็น