จัดรูปแบบตัวอักษรสำหรับเว็บไซต์
Typography on the Web)
·
ตัวอักษรมีหลายชนิด
แต่ละชนิดจะให้อารมณ์และความรู้สึกที่แตกต่างกัน ควรเลือกใช้ตัวอักษรให้ เหมาะสมกับเนื้อหาและข้อมูลที่ต้องการสื่อ
·
ตัวอักษรมีความสำคัญในการสื่อข้อความถึงผู้ใช้
ส่วนประกอบของตัวอักษร
Ascender : ส่วนบนของตัวอักษรพิมพ์เล็กที่สูงกว่าความสูง
x-height ของตัวอักษร
Descender : ส่วนล่างของตัวอักษรพิมพ์เล็กที่ต่ำกว่าเส้น
baseline
Baseline : เส้นสมมติที่ตัวอักษรส่วนใหญ่ตั้งอยู่
Cap height : ความสูงจากเส้น baseline ไปถึงส่วนบนสุดของตัวอักษรพิมพ์ใหญ่
X-height : ความสูงของตัวอักษร x ในแบบพิมพ์เล็ก ซึ่งมักใช้อ้างถึงความสูงของตัวอักษรที่ไม่รวม ascender และ descender
Point size
: ระยะความสูงทั้งหมดวัดจากส่วนบนสุดถึงส่วนล่างสุดของตัวอักษร
ค่าความสูง x-height : จะมีผลต่อภาพรวมของตัวอักษรและความยากง่ายในการอ่าน
ความสะดวกในการอ่าน (Legibility)
·
หลีกเลี่ยงการใช้คำที่เป็นตัวพิมพ์ใหญ่ทั้งหมด
เพราะจะทำให้อ่านยาก และลดความสะดุดตาลง
·
การใช้ตัวพิมพ์เล็กทั้งหมดในประโยค
จะสร้างความรู้สึกไม่เป็นทางการ และแสดงถึงความไม่สมบูรณ์ของเนื้อหา
·
การใช้ตัวพิมพ์ใหญ่สำหรับตัวอักษรตัวแรกของแต่ละคำในประโยค
ควรใช้อย่างจำกัด เพราะเป็นการรบกวนรูปแบบโดยรวมของคำ ส่งผลให้อ่านยากขึ้น
·
ไม่ควรแบ่งครึ่งสีตัวอักษรเพราะทำให้ภาพรวมของตัวอักษรขาดหายไป
สิ่งที่ควรคำนึงในการจัดข้อความให้หน้าเว็บ
·
การจัดตำแหน่ง (Alignment)
·
ช่องว่างระหว่างตัวอักษร
และช่องว่างระหว่างคำ
·
การจัดตำแหน่งแบบ
justify ทำให้เกิดช่องว่างของแต่ละคำ
·
ระยะห่างระหว่างบรรทัด
·
ความยาวของหน้าเว็บ
·
ขนาดของตัวอักษร
·
ดึงดูดความสนใจด้วยอักษรตัวใหญ่
·
การเน้นข้อความให้เด่นชัด
·
การใช้สีกับตัวอักษร
·
การกำหนดขอบแบบ Aliased และ
Anti-aliased
คำแนะนำในการใช้ตัวอักษรในหน้าเว็บ
·
ไม่ควรใช้ตัวอักษรชนิดที่หายากหรือไม่ได้มาพร้อมกับโปรแกรมต่างๆหรือเครื่องคอมฯ
·
ระบุชนิดตัวอักษรให้ครอบคลุม
·
กำหนดลักษณะของตัวอักษรที่อยู่ในทุกช่องของตาราง
·
ระบุขนาดของตัวษรเสมอ
·
ใช้ CSS ในการควบคุมรูปแบบการแสดงผล
ออกแบบกราฟฟิกสำหรับเว็บไซต์
รูปแบบกราฟฟิกสำหรับเว็บ
รูปแบบหลักมี
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
กระบวนการพัฒนาเว็บไซต์
การจัดระบบโครงสร้างข้อมูล คือการพิจารณาว่า
เว็บควรจะมีข้อมูลและการทำงานใดบ้าง โดยเริ่มจากการกำหนดเป้าหมาย
กลุ่มผู้ใช้เป้าหมาย เนื้อหาและการใช้งานที่จำเป็น
นำมาจัดกลุ่มให้เป็นระบบเป็นพื้นฐานในการออกแบบเว็บไซต์ที่ดี มีทั้งหมด 5
Phase
Phase 1 : สำรวจปัจจัยสำคัญ (Research)
1. รู้จักตัวเอง-กำหนดเป้าหมายและสำรวจความพร้อม
2 .เรียนรู้ผู้ใช้-ระบุกลุ่มผู้ใช้และศึกษาความต้องการ
3. ศึกษาคู่แข่ง-สำรวจการแข่งขันและการเรียนรู้คู่แข่ง
สิ่งที่ได้รับ
1. เป้าหมายหลักของเว็บ
2. ความต้องการของผู้ใช้
3 .กลยุทธ์ในการแข่งขัน
Phase 2 : พัฒนาเนื้อหา (Site Content)
4 .สร้างกลยุทธ์การออกแบบ
5 .หาข้อสรุปขอบเขตเนื้อหา
สิ่งที่ได้รับ
1. แนวทางการออกแบบเว็บ
2. ขอบเขตเนื้อหาและการใช้งาน
3. ข้อมูลที่ถูกจัดอย่างเป็นระบบ
Phase 3 : พัฒนาโครงสร้างเว็บไซต์ (Site
Structure)
6. จัดระบบข้อมูล
7. จัดทำโครงสร้างข้อมูล
8. พัฒนาระบบเนวิเกชัน
สิ่งที่ได้รับ
1. แนวทางการออกแบบเว็บ
2. ขอบเขตเนื้อหาและการใช้งาน
3. ข้อมูลที่ถูกจัดอย่างเป็นระบบ 7
Phase 4 : ออกแบบและพัฒนาหน้าเว็บ (Visual Design)
9. ออกแบบลักษณะหน้าตาเว็บ
10. พัฒนาเว็บต้นแบบและข้อกำหนดสุดท้าย
สิ่งที่ได้รับ
1. ลักษณะหน้าตาของเว็บ
2. เว็บต้นแบบที่จะใช้ในการพัฒนา
3. รูปแบบโครงสร้างของเว็บ
4. ข้อกำหนดในการพัฒนาเว็บ
Phase 5 : พัฒนาและดำเนินการ (Production &
Operation)
11. ลงมือพัฒนาเว็บ
12. เปิดเว็บไซต์
13. ดูแลและพัฒนาต่อเนื่อง
สิ่งที่ได้รับ
1. เว็บที่สมบูรณ์
2. เปิดตัวเว็บและทำให้เป็นที่รู้จัก
3. แนวทางการดูแลและพัฒนาต่อไป
ไม่มีความคิดเห็น:
แสดงความคิดเห็น