จัดระบบโครงสร้างข้อมูล (Information Architecture)
การจัดระบบโครงสร้างข้อมูล คือการพิจารณาว่า เว็บควรจะมีข้อมูลและการทำงานใดบ้าง โดยเริ่มจากการกำหนด
เป้าหมาย กลุ่มผู้ใช้เป้าหมาย เนื้อหาและการใช้งานที่จำเป็น นำมาจัดกลุ่มให้เป็นระบบ
การจัดระบบโครงสร้าง
เป็นพื้นฐานการออกแบบเว็บไซต์ที่ดี ได้แก่ รูปแบบการนำเสนอ ระบบการทำงานแบบจำลอง ระบบเนวิเกชัน และอินเตอร์เฟสของเว็บดังนั้น การจัดระบบโครงสร้างข้อมูลจึงเป็นสิ่งสำคัญที่เกี่ยวข้องอยู่ในกระบวนการออกแบบเว็บไซต์
จัดระบบโครงสร้างข้อมูล(Information Architecture)
Phase 1 : สำรวจปัจจัยสำคัญ (Research)
1.รู้จักตัวเอง-กำหนดเป้าหมายและสำรวจความพร้อม
2.เรียนรู้ผู้ใช้-ระบุกลุ่มผู้ใช้และศึกษาความต้องการการ
3.ศึกษาคู่แข่ง-สำรวจการแข่งขันและการเรียนรู้คู่แข่ง
Phase 2 : พัฒนาเนื้อหา(Site Content)
4.สร้างกลยุทธ์การออกแบบ
5.หาข้อสรุปขอบเขตเนื้อหา
6.จัดระบบข้อมูล
Phase 3 : พัฒนาโครงสร้างเว็บไซท์(Site Structure)
7.จัดทำโครงสร้างข้อมูล
8.พัฒนาระบบเนวิเกชัน
Phase 4 : ออกแบบและพัฒนาหน้าเว็บ(Visual Design)
9.ออกแบบลักษณะหน้าตาเว็บ
10.พัฒนาเว็บต้นแบบและข้อกำหนดสุดท้าย
Phase 5 : พัฒนาและดำเนินการ (Production & Operation)
11.ลงมือพัฒนาเว็บ
12.เปิดเว็บไซท์
13.ดูแลและพัฒนาต่อเนื่อง
สีสันในเว็บเพจเป็นสิ่งที่สำคัญมากในการดึงดูดความสนใจของผู้ใช้ เนื่องจากสิ่งแรกที่ผู้ใช้มองเห็นจากเว็บก็คือสี ซึ่งเป็นสิ่งกำหนดบรรยากาศและความรู้สึกโดยของของเว็บไซต์ เราสามารถใช้สีได้กับทุกองค์ประกอบของเว็บเพจ ตั้งแต่ รูปภาพ ตัวอักษร สีพื้นหลัง การใช้สีที่เหมาะสมจะช่วยในการสื่อความหมายของเนื้อหา
การใช้สีพื้นใกล้เคียงกับสีตัวอักษร บางครั้งอาจสร้างความลำบากในการอ่าน การใช้สีที่มากเกินความจำเป็นอาจสร้างความสับสนให้กับผู้อ่านได้
การใช้สีที่กลมกลืนกันช่วยให้เว็บไซต์น่าดูชมมากยิ่งขึ้น
ประโยชน์ของสีในเว็บไซต์
· สามารถชักสายตาผู้อ่านให้ไปยังทุกบริเวณในหน้าเว็บเพจที่เราต้องการได้ เช่น ข้อมูลใหม่ หรือโปรโมชั่น
· สีช่วยเชื่อมโยงบริกเวณที่ได้รับการออกแบบเข้าด้วยกัน
· สีสามารถนำไปใช้ในการแบ่งบริเวณต่าง ๆ ออกจากัน
· สีสามารถใช้ในการดึงดูดความสนใจของผู้อ่าน
· สีสามารถสร้างอารมณ์โดยรวมของเว็บเพจ
· ช่วยสร้างระเบียบให้กับข้อความต่างๆ เช่น ใช้สีแยกระหว่างหัวเรื่องกับเนื้อเรื่องสามารถส่งเสริมเอกลักษณ์ขององค์กรหรือหน่วยงานนั้นๆ
ความรู้เบื้องต้นเกี่ยวกับสี
แม่สีขั้นต้น (Primary color)
- สีแดง
- สีเหลือง
- สีน้ำเงิน
- สีน้ำเงิน
แม่สีขั้นที่ 2
แม่สีขั้นที่ 3
แม่สีขั้นที่ 4
การผสมสี (Color Mixing)มี 2 แบบ
การผสมแบบบวก (Additive mixing)จะเป็นรูปแบบการผสมของแสง ไม่ใช่การผสมของวัตถุที่มีสีบนกระดาษ จะนำไปใช้ในสื่อใดๆที่ใช้แสงส่องออกมา เช่น จอโปรเจคเตอร์ ทีวี หรือ จอมิเตอร์
การผสมแบบลบ (Subtractive mixing)
การผสมสีแบบนี้ไม่เกี่ยวข้องกับแสง แต่เกียวเนื่องกับการดูดกลืนและสะท้อนแสงของวัตถุ จะนำไปใช้วัตถุมีสี เช่น ภาพวาดของศิลปิน รูปปั้น หรือ สิ่งพิมพ์ต่างๆ
วงล้อสี (Color Wheel)
เป็นรูปแบบหนึ่งในการจัดเรียงสีทั้งหมดไว้ในวงกลม และเป็นการจัดลำดับเฉดสีอย่างมีเหตุผลและง่ายต่อการนำไปใช้
วงล้อสีแบบลบ
วงล้อสีแบบบวก
ตัวอักษรมีความสำคัญในการสื่อข้อความถึงผู้ใช้
- แต่ละชนิดจะให้อารมณ์และความรู้สึกที่แตกต่างกัน ควรเลือกใช้ตัวอักษรให้เหมาะสมกับเนื้อหา
รูปแบบตัวอักษร แบ่งเป็น 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 ใช้เทคนิคของโทนสีเข้ามาช่วย ด้วยการเพิ่มสีที่อยู่ระหว่างสีของตัวอักษรจะทำให้ ขอบดูเรียบขึ้น
คำแนะนำในการใช้ตัวอักษรในเว็บเพจ
- ไม่ควรใช้ตัวอักษรที่หายากหรือไม่ได้มาพร้อมกับโปรแกรมต่างๆ