กระบวนการพัฒนาเว็บไซต์
• การจัดระบบโครงสร้างข้อมูล คือการพิจารณาว่า เว็บควรจะมีข้อมูลและการทำงานใดบ้าง โดยเริ่มจากการกำหนด
เป้าหมาย กลุ่มผู้ใช้เป้าหมาย เนื้อหาและการใช้งานที่จำเป็น นำมาจัดกลุ่มให้เป็นระบบ
การจัดระบบโครงสร้าง
เป็นพื้นฐานการออกแบบเว็บไซต์ที่ดี ได้แก่ รูปแบบการนำเสนอ ระบบการทำงานแบบจำลอง ระบบเนวิเกชัน และอินเตอร์เฟสของเว็บดังนั้น การจัดระบบโครงสร้างข้อมูลจึงเป็นสิ่งสำคัญที่เกี่ยวข้องอยู่ในกระบวนการออกแบบเว็บไซต์
จัดระบบโครงสร้างข้อมูล(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.ดูแลและพัฒนาต่อเนื่อง
บทที่8
เลือกใช้สีสำหรับเว็บไซต์
สีสันเป็นสิ่งสำคัญมากในการดึงดูดความสนใจของผู้ใช้ เนื่องจากเป็นสิ่งแรกที่ผู้ใช้มองเห็น
- การใช้สีพื้นใกล้เคียงกับตัวอักษร บางครั้งลำบากในการอ่าน
- การใช้สีมากเกินอาจสร้างความสับสนให้ผู้อ่านได้
- การใช้สีที่กลมกลืน ช่วยให้น่าดูมากยิ่งขึ้น
ประโยชน์ของสีในเว็บไซต์
- ชักนำสายตาทุกบริเวณในหน้าเว็บ
- เชื่อมโยงบริเวณที่ไดรับการออกแบบเข้าด้วยกัน
- แบ่งบริเวณต่างๆออกจากกัน
- ดึงดูดความสนใจของผู้อ่าน
- สร้างอารมณ์โดยรวมของเว็บ
- สร้างระเบียบ
- ส่งเสริมเอกลักษณ์ขององค์กรหรือหน่วยงานนั้นๆ
การผสมสี มี 2 แบบ
- การผสมแบบบวก เป็นรูปแบบการผสมของแสงไม่ใช่การผสมของวัตถุที่มีสีบนกระดาษ
- การผสมแบบลบ ไม่เกี่ยวข้องกับแสงแต่เกี่ยวกับการดูดกลืนและสะท้อนแสงของวัตถุต่างๆ
รูปแบบชุดสีพื้นฐาน (Simple Color Schemes)
- ชุดสีร้อน
- ชุดสีเเบบเดียว
- ชุดสีที่คล้ายคลึงกัน
- ชุดสีตรงข้ามเคียง
- ชุดสีตรงข้ามข้างเคียงทั้ง 2 ด้าน
- ชุดสีเย็น
- ชุดสีเเบบสามเส้า
- ชุดสีตรงข้าม
สีกับอารมณ์ ความรู้สึก เเละความสัมพันธ์กับสิ่งต่างๆ
สีเเดง เเสดงถึง พลัง อำนาจความโมโห ความก้าวร้าว
สีน้ำเงิน เเสดงถึง ความซื่อสัตย์ ความมั่นคง ปลอดภัย
สีเขียว เเสดงถึง ธรรมชาต สุขภาพ ความยินดี
สีเหลือง เเสดงถึง ความสดใส ร่าเริง การมองโลกในเเง่ดี ความหวัง ความอบอุ่น
สีม่วง เเสดงถึง ความสูงส่ง ความสร้างสรรค์ ความรอบรู้ ความแปลกใหม่
สีส้ม เเสดงถึง กำลังความสามารถ ความเข้มเเข็ง กระตือรือร้น
สีน้าตาล เเสดงถึง ความเรียบง่าย ความสะดวกสบาย ความมั่นคง เชื่อถือได้
สีเทา แสดงถึง ความสุภาพ ความเป็นไปได้ ความมั่นคง
สีขาว เเสดงถึง ความบริสุทธฺ์ ความไร้เดียงสา ความรัก ความฉลาด
สีดำ เเสดงถึง อำนาจ ความฉลาด ความเป็นเลิศ ความสุขม รอบคอบ
บทที่ 10
การจัดรูปแบบตัวอักษรสำหรับเว็บไซต์
ตัวอักษรมีความสำคัญในการสื่อข้อความถึงผู้ใช้
- แต่ละชนิดจะให้อารมณ์และความรู้สึกที่แตกต่างกัน ควรเลือกใช้ตัวอักษรให้เหมาะสมกับเนื้อหา
รูปแบบตัวอักษร แบ่งเป็น 2 ประเภท
1. ตัวอักษรที่มีขนาดสัมพันธ์กับรูปร่าง หรือตัวอักษรที่มีขนาดไม่คงที่
- ตัวอักษรแต่ละตัวมีพื้นที่ตามแนวนอนไม่เท่ากัน ขึ้นกับรูปร่างของตัวอักษรนั้น
- สิ่งพิมพ์ที่ผลิตด้วยคอมพิวเตอร์ส่วนใหญ่จะใช้ตัวอักษรนี้เพื่อให้ดูเหมาะสมและอ่านง่าย
2. ตัวอักษรที่มีขนาดคงที่
- มีพื้นที่ตามแนวนอนเท่ากันหมด เป็นรูปแบบที่เรียบง่าย คล้ายตัวพิมพ์ดีด
ตัวอักษรประเภท serif และ sans-serif
ตัวอักษรประเภท serif
- มีลายเส้นเพิ่มขึ้นที่ส่วนปลาย
- เช่น Times New Roman , Garamond, Georgia เป็นต้น
- เหมาะจะใช้ในส่วนที่เป็นรายละเอียดเนื้อหา ไม่เหมาะกับการใช้เป็นตัวหนา
ตัวอักษรประเภท sans-serif
- ไม่มีลายเส้นตกแต่งติดอยู่กับตัวอักษร
- เช่น Arial, Verdana, Geneva
- เหมาะที่จะใช้กับหัวข้อหรือตัวอักษรขนาดใหญ่
- ไม่เหมาะกับลักษณะเอียงเพราะจะทำให้รูปร่างเปลี่ยนไปมาก
ความสะดวกในการอ่าน (Legibility)
- หลีกเลี่ยงการใช้คำที่เป็นตัวพิมพ์ใหญ่ทั้งหมด เพราะจะทำให้อ่านยาก และลดความสะดุดตาลง
- การใช้ตัวพิมพ์เล็กทั้งหมดในประโยค จะสร้างความรู้สึกไม่เป็นทางการ และแสดงถึงความไม่ สมบูรณ์ของเนื้อหา
- ใช้ตัวพิมพ์ใหญ่สำหรับตัวอักษรแรกของแต่ละคำในประโยค ควรใช้อย่างจำกัด
- สิ่งที่ไม่ควรทำคือการแบ่งครึ่งตัวอักษร เพราะจะทำให้ภาพรวมของตัวอักษรขาดหายไป และ ยากต่อการอ่าน
การจัดข้อความในหน้าเว็บ
การจัดตำแหน่ง
ในภาษา HTML สามารถจัดตำแหน่งตัวอักษรได้ด้วยคำสั่ง Align และสามารถเลือกค่าเป็น left, right, center, justify ช่วงว่างระหว่างตัวอักษร และช่วงว่างระหว่างคำ
- ตัวอักษรบางคู่ที่อยู่ติดกันอาจมีระยะที่ไม่เหมาะสม จึงต้องมีการ Kerning เพื่อที่สายตาจะได้
- การจัดตำแหน่งแบบ justify ทำให้เกิดช่องว่างที่ไม่สวยงามได้ ระยะห่างระหว่างบรรทัด
- เนื้อหาที่มีปริมาณมาก ควรมีระยะห่างระหว่างบรรทัดมาก เพื่อเพิ่มความสะดวกในการอ่านเป็น เวลานาน
ความยาวหน้าเว็บ
- หน้าเว็บที่ยาวมากๆ จะทำให้ผู้ชมรู้สึกเหนื่อยล้าที่จะอ่าน
- ควรจัดแบ่งเป็น paragraph หรือตัดแบ่งเป็นหลายๆหน้า
ขนาดของตัวอักษร
- ใช้ตัวอักษรหลายขนาดเพื่อสร้างลำดับความสำคัญของข้อมูล
- ใช้ตัวอักษรขนาดใหญ่เริ่มต้นประโยค และอาจใช้รูปแบบของการสลับสี
การเน้นข้อความให้เด่นชัด
- ใช้ขนาดและน้ำหนักของตัวอักษร การทำตัวเอียง ขีดเส้นใต้ ตำแหน่งของตัวอักษร แนวทาง ของตัวอักษร พื้นที่ว่าง
การใช้สีกับตัวอักษร
- กำหนดสีหลักสำหรับเว็บ
- ใช้สีของตัวอักษรอย่างมีความหมายสม่ำเสมอ
- ใช้สีที่แตกต่างกันในแต่ละส่วนของข้อมูล
- กำหนดสีของ link ให้เหมาะสม
การกำหนดขอบแบบ Aliased และ Anti-aliased
- Aliased คือลักษณะขอบที่เป็นรอยหยักๆ
- Anti-aliased ใช้เทคนิคของโทนสีเข้ามาช่วย ด้วยการเพิ่มสีที่อยู่ระหว่างสีของตัวอักษรจะทำให้ ขอบดูเรียบขึ้น
คำแนะนำในการใช้ตัวอักษรในเว็บเพจ
- ไม่ควรใช้ตัวอักษรที่หายากหรือไม่ได้มาพร้อมกับโปรแกรมต่างๆ
