Lecture

บทที่2

                                                      กระบวนการพัฒนาเว็บไซต์

                 

1. จัดระบบโครงสร้างข้อ้อมูล (Information Architecture)

• การจัดระบบโครงสร้างข้อมูล คือการพิจารณาว่า เว็บควรจะมีข้อมูลและการทำงานใดบ้าง โดยเริ่มจากการกำหนด

เป้าหมาย กลุ่มผู้ใช้เป้าหมาย เนื้อหาและการใช้งานที่จำเป็น นำมาจัดกลุ่มให้เป็นระบบ

การจัดระบบโครงสร้าง

    เป็นพื้นฐานการออกแบบเว็บไซต์ที่ดี ได้แก่ รูปแบบการนำเสนอ ระบบการทำงานแบบจำลอง ระบบเนวิเกชัน และอินเตอร์เฟสของเว็บดังนั้น การจัดระบบโครงสร้างข้อมูลจึงเป็นสิ่งสำคัญที่เกี่ยวข้องอยู่ในกระบวนการออกแบบเว็บไซต์

จัดระบบโครงสร้างข้อ้อมูล(Information Architecture)

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.ข้อมูลที่ถูกจัดอย่างเป็นระบบ

Phase 4 : ออกแบบและพัฒนาหน้าเว็บ(Visual Design)

9.ออกแบบลักษณะหน้าตาเว็บ

10.พัฒนาเว็บต้นแบบและข้อกำหนดสุดท้าย

• สิ่งที่ได้รับ

1.ลักษณะหน้าตาของเว็บ

2.เว็บต้นแบบที่ใช้ในการพัฒนา

Phase 5 : พัฒนาและดำเนินการ (Production & Operation)

11.ลงมือพัฒนาเว็บ

12.เปิดเว็บไซท์

13.ดูแลและพัฒนาต่อเนื่อง

• สิ่งที่ได้รับ

1.เว็บที่สมบูรณื

2.เปิดตัวเว็บให้เป็นที่รู้จัก

3.แนวทางการดูแลและพัฒนาต่อไป



บทที่5

ออกแบบระบบเนวิเกชั่น

ความสำคัญของระบบเนวิเกชั่น

การออกเเบบโครงสร้างข้อมูลที่ดีช่วยให้ผู้ใช้เข้าถึงข้อมูลได้ง่ายขึ้น ส่วนระบบเนวิเกชั่นเป็นส่วนเสริมในการสร้างสิ่งเเวดล้อมที่สื่อความหมายเพื่อช่วยให้ผู้ใช้ท่องเว็บได้อย่างคล่องตัว   โดยไม่หลงทาง โดยทำให้ผู้ใช้สามารถรู้ได้ว่าตัวเองกำลังอยู่ที่ไหน ได้ผ่านที่ใดมาบ้างเเละควรจะไปไหนต่อ

เนวิเกชั่นที่ดี จะต้องบรรลุวัตถุประสงค์ต่อไปนี้

1.ผู้ชมกำลังอยู่ในส่วนใดของเว็บ

2.สามารถเข้าถึงข้อมูลได้อย่างไร

3. สามารถกลับไปยังหน้าเดิมได้อย่างไร

4. หน้าเว็บเพจใดที่ได้เยี่ยมชมข้อมูลเเล้ว

องค์ประกอบของระบบเนวิเกชั่นหลัก

      ระบบเนวิเกชั่นที่สำคัญเเละพบมากที่สุด คือเนวิเกชั่นที่อยู่หน้าเีดียวกับเนื้อหา ไม่ใช่เนวิเกชั่นที่อยู่ภายในเว็บ ซึ่งได้แก่    เนวิเกชั่นบาร์  เนวิเกชั่นระบบเฟรม

  pull down

  pop up menu

  image map

  searchbox

การออกแบบระบบเนวิเกชั่น

สร้างระบบเนวิเกชั่นหลัก

การออกแบบที่ดีควรเริ่มจากการทีโครงสร้างลำดับขั้นของข้อมูลที่เหมาะสม รายการหลักในกลุ่มข้อมูลชั้นเเรกเป็นตัวกำหนดว่าระบบเนวิเกชั่่นเเบบโกบอลจะต้องมีอะไรบ้าง รายการหลักจะถูกลิงค์ให้เข้าถึงได้ทุกหน้าในเว็บเเละเป็นต้นเเบบให้กับระบบเนวิเกชั่นเเบบโลคอลเเละเเบบเฉพาะทีต่อไปทุกลำดับขั้นข้อมูลที่สูงกว่า

เนวิเกชั่นเเบบกราฟฟิก VS ตัวอักษร

จะเลือกใช้เเบบใด้ก็ได้ขึ้นอยู่กับผู้ออกแบบ โดยปรกติรูปแบบกราฟิกจะดูสวยกว่าเเบบตัวอักษรอยู่เเล้ว เเต่อาจทำให้การเเสดงผลช้าลง

เนวิเกชั่นเเบบกราฟิกพร้อมคำอธิบาย

เนวิเกชั่นเเบบกราฟิกหรือไอคอนเพื่อเพิ่มความน่าสนใจของลิงค์ ควรใส่คำอธิบายควบคู่

กับกราฟฟิกด้วย

พื้นฐานของระบบเนวิเกชั่น

หลักการออกแบบเนวิเกชั่นคือการอำนวยความสะดวกตามเป้าหมายของผู้ใช้ เพื่อให้รู้ว่า

ตอนนี้กำลังอยู่ที่ไหน มีหลายสิ่งที่ทำให้รู้สถานที่ได้โดยเร็วไม่ว่าจะเป็นเเผนที่ ป้ายบอกทาง เสียง อากาศ

เพิ่มความคล่องตัวในการเคลื่อนที่

สามารถเข้าถึงได้ในทุกๆหน้า ควรจะมีลิงค์อย่างน้อยที่สุด 1 ลิงค์เพื่อกลับไปยังหน้า Home  เเละป้องกันปัญหาการเกิดหน้าทางตันที่ไม่มีลิงค์ไปสู่ส่วนใดๆ ในเว็บ

 

บทที่8

เลือกใช้สีสำหรับเว็บไซต์

สีสันเป็นสิ่งสำคัญมากในการดึงดูดความสนใจของผู้ใช้ เนื่องจากเป็นสิ่งแรกที่ผู้ใช้มองเห็น

       - การใช้สีพื้นใกล้เคียงกับตัวอักษร บางครั้งลำบากในการอ่าน

       - การใช้สีมากเกินอาจสร้างความสับสนให้ผู้อ่านได้

       - การใช้สีที่กลมกลืน ช่วยให้น่าดูมากยิ่งขึ้น

ประโยชน์ของสีในเว็บไซต์

       - ชักนำสายตาทุกบริเวณในหน้าเว็บ

       - เชื่อมโยงบริเวณที่ไดรับการออกแบบเข้าด้วยกัน

       - แบ่งบริเวณต่างๆออกจากกัน

       - ดึงดูดความสนใจของผู้อ่าน

       - สร้างอารมณ์โดยรวมของเว็บ

       - สร้างระเบียบ

       - ส่งเสริมเอกลักษณ์ขององค์กรหรือหน่วยงานนั้นๆ

การผสมสี มี 2 แบบ

       - การผสมแบบบวก เป็นรูปแบบการผสมของแสงไม่ใช่การผสมของวัตถุที่มีสีบนกระดาษ

       - การผสมแบบลบ ไม่เกี่ยวข้องกับแสงแต่เกี่ยวกับการดูดกลืนและสะท้อนแสงของวัตถุต่างๆ

รูปแบบชุดสีพื้นฐาน (Simple Color Schemes)

- ชุดสีร้อน
- ชุดสีเเบบเดียว
- ชุดสีที่คล้ายคลึงกัน
- ชุดสีตรงข้ามเคียง
- ชุดสีตรงข้ามข้างเคียงทั้ง 2 ด้าน
- ชุดสีเย็น
- ชุดสีเเบบสามเส้า
- ชุดสีตรงข้าม

สีกับอารมณ์ ความรู้สึก เเละความสัมพันธ์กับสิ่งต่างๆ
สีเเดง      เเสดงถึง พลัง อำนาจความโมโห ความก้าวร้าว

สีน้ำเงิน   เเสดงถึง ความซื่อสัตย์ ความมั่นคง ปลอดภัย

สีเขียว     เเสดงถึง ธรรมชาต สุขภาพ ความยินดี

สีเหลือง   เเสดงถึง ความสดใส ร่าเริง การมองโลกในเเง่ดี ความหวัง ความอบอุ่น

สีม่วง       เเสดงถึง ความสูงส่ง ความสร้างสรรค์ ความรอบรู้ ความแปลกใหม่

สีส้ม        เเสดงถึง กำลังความสามารถ ความเข้มเเข็ง กระตือรือร้น

สีน้าตาล  เเสดงถึง ความเรียบง่าย ความสะดวกสบาย ความมั่นคง เชื่อถือได้

สีเทา       แสดงถึง ความสุภาพ ความเป็นไปได้ ความมั่นคง

สีขาว       เเสดงถึง ความบริสุทธฺ์ ความไร้เดียงสา ความรัก ความฉลาด

สีดำ        เเสดงถึง อำนาจ ความฉลาด ความเป็นเลิศ ความสุขม รอบคอบ