Designing Web Colors
ซ่อนข้อความ
ประโยชน์ของสีในเว็บไซต์
1. สามารถชักนำสายตาผู้อ่านให้ไปยังทุกบริเวณในหน้าเว็บเพจ ที่เราต้องการได้ เช่น ข้อมูลใหม่ หรือโปรโมชั่นพิเศษ
2. ช่วยเชื่อมโยงบริเวณที่ได้รับการออกแบบเข้า
3. สามารถนำไปใช้ในการแบ่งบริเวณต่างๆ ออกจากกัน
4. สามารถใช้ในการดึงดูดความสนใจของผู้อ่าน
5. สามารถสร้างอารมณ์โดยรวมของเว็บ
6. ช่วยสร้างระเบียบให้กับข้อความต่างๆ เช่น การใช้สีแยกส่วนระหว่างหัวเรื่องกับตัว
7. สามารถส่งเสริมเอกลักษณ์ขององค์กรหรือหน่วยงานนั้นๆ
ความรู้เบื่องต้นเกี่ยวกับสี
- แม่สีขั้นต้น(Primary color)
- สีขั้นที่สาม
- สี่ขั้นที่สี่
การผสมสี(Color Mixing)
1. สามารถชักนำสายตาผู้อ่านให้ไปยังทุกบริเวณในหน้าเว็บเพจ ที่เราต้องการได้ เช่น ข้อมูลใหม่ หรือโปรโมชั่นพิเศษ
2. ช่วยเชื่อมโยงบริเวณที่ได้รับการออกแบบเข้า
3. สามารถนำไปใช้ในการแบ่งบริเวณต่างๆ ออกจากกัน
4. สามารถใช้ในการดึงดูดความสนใจของผู้อ่าน
5. สามารถสร้างอารมณ์โดยรวมของเว็บ
6. ช่วยสร้างระเบียบให้กับข้อความต่างๆ เช่น การใช้สีแยกส่วนระหว่างหัวเรื่องกับตัว
7. สามารถส่งเสริมเอกลักษณ์ขององค์กรหรือหน่วยงานนั้นๆ
ความรู้เบื่องต้นเกี่ยวกับสี
- แม่สีขั้นต้น(Primary color)
o สีแดง
o สีน้ำเงิน
o สีเหลือง
- สีขั้นที่สอง
- สีขั้นที่สาม
การผสมสี(Color Mixing)
- ผสมแบบบวก(Additive mixing)
เป็นรูปแบบการผสมของแสง ไม่ใช่การผสมของวัตถุที่มีสีบนกระดาษ
การนำไปใช้งาน : ใช้ในสื่อใดๆที่ใช้แสงส่องออกมา เช่น จอโปรเจคเตอร์ ทีวี หรือจอมอนิเตอร์
- ผสมแบบลบ(Subtractive mixing)
การผสมสีแบบนี้ไม่เกี่ยวข้องกับแสง แต่เกี่ยวเนื่องกับการดูดกลืนและสะท้อนแสงของวัตถุต่างๆ
การนำไปใช้งาน : ใช้ในสื่อที่เกี่ยวข้องกับการใช้วัตถุมีสี เช่น ภาพวาดของศิลปิน รูปปั้น หรือสิ่งพิมพ์ต่างๆ
วงล้อสี (Color Wheel)
เป็นรูปแบบหนึ่งในการจัดเรียงสีทั้งหมดไว้ในวงกลม และเป็นการจัดเรียงลำดับเฉดสีอย่างมีเหตุผลและง่ายต่อการใช้งาน
- วงล้อสีแบบลบ(Subtractive Color Wheel)
- วงล้อสีแบบบวก(Additive Color Wheel)
ที่เป็นกลาง(Neutral Colors)
คือสีกลุ่มหนึ่งที่ไม่ได้ถูกบรรจุไว้ในวงล้อสี เพราะเป็นสีที่ไม่ได้รับอิทธิพลมากจากสีอื่น ซึ่งก็คือสีเทา ขาว และดำ
รูปแบบชุดสีพื้นฐาน(Simple Color Schemes)
- ชุดสีร้อน(Warm Color Scheme) สร้างความรู้สึกอบอุ่น สบาย และรู้สึกต้อนรับแก่ผู้ชม ประกอบด้วย สีม่วงแกมแดง แดงแกมม่วง แดง ส้ม เหลือง และเขียวอมเหลือง
- ชุดสีเย็น (Cool Color Scheme) ให้ความรู้สึกเย็นสบาย ดูสุภาพ เรียบร้อย ประกอบด้วย สีม่วง น้ำเงิน น้ำเงินอ่อน ฟ้า น้ำเงินแกมเขียว และสีเขียว
- ชุดสีแบบเดียว(Monochromatic Color Scheme) รูปแบบชุดสีที่ง่ายที่ชุด คือ มีค่าของสีบริสุทธิ์เพียงสีเดียว แต่เพิ่มความหลากหลายโดยการเพิ่มความเข้ม อ่อนในระดับต่างๆ
- ชุดสีแบบสามเส้า(Triadic Color Scheme) ชุดสีที่อยู่ที่มุมของสามเหลี่ยมด้านเท่าทั้งสาม มีระยะห่างในวงล้อสีที่เท่ากัน จึงมีความเข้ากันอย่างลงตัว
- ชุดสีที่คล้ายคลึงกัน (Analogous Color Scheme) ประกอบด้วยสี 2 หรือ 3 สีที่อยู่ติดกันในวงล้อ สามารถเพิ่มเป็น 4 หรือ 4 สีได้ แต่อาจส่งผลให้ขอบเขตของสีกว้างออกไป
- ชุดสีตรงข้าม (Complementary Color Scheme) สีคู่ที่อยู่ตรงข้ามกันในวงล้อสี เมื่อนำสีทั้งสองมาใช้คู่กันจะทำให้สีทั้งสองมีค่าความสว่างและสดใสมากยิ่งขึ้น
- ชุดสีตรงข้ามข้างเคียง (Split Complementary Color Scheme) ชุดสีที่เปลี่ยนแปลงมาจากชุดสีตรงข้าม มีความหลากหลายเพิ่มขึ้น แต่จะมีผลให้ความสดใส ความสะดุดตา และความเข้ากันนของสีลดลงด้วย
- ชุดสีตรงข้ามข้างเคียง 2 ด้าน (Double Split Complementary Color Scheme) ดัดแปลงมาจากชุดสีตรงกันข้ามเช่นกัน แต่สีตรงข้ามทั้ง 2 สีถูกแบ่งแยกเป็นสีด้านข้างทั้ง 2 ด้าน มีความหลากหลายของสีที่มากขึ้น แต่จะมีความสดใสและความกลมกลืนของสีลดลง
posted on 08 Sep 2011 14:40 by 5250110069
กระบวนการพัฒนาเว็บไซต์
Web Development Processes
Web Development Processes
ข้อความซ่อน
(การจัดระบบโครงสร้างข้อมูลเป็นพื้นฐานในการออกแบบเว็บไซต์ที่ดี ได้แก่ รูปแบบการนำเสนอ ระบบการทำงานแบบจำลอง ระบบเนวิเกชั่น และอินเตอร์เฟสของเว็บ ดังนั้นการจัดระบบโครงสร้างข้อมูลจะเป็นสิ่งสำคัญที่เกี่ยวข้องอยู่ในกระบวนการออกแบบเว็บไซต์
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. ดูแลและพัฒนาต่อเนื่อง
)
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. ดูแลและพัฒนาต่อเนื่อง
)
posted on 08 Sep 2011 20:14 by 5250110069
การออกแบบเนวิเกชั่น
ข้อความซ่อน
ความสำคัญของระบบเนวิเกชั่น
การออกเเบบโครงสร้างข้อมูลที่ดีช่วยให้ผู้ใช้เข้าถึงข้อมูลได้ง่ายขึ้น ส่วนระบบเนวิเกชั่นเป็นส่วนเสริมในการสร้างสิ่งเเวดล้อมที่สื่อความหมายเพื่อช่วยให้ผู้ใช้ท่องเว็บได้อย่างคล่องตัว โดยไม่หลงทาง โดยทำให้ผู้ใช้สามารถรู้ได้ว่าตัวเองกำลังอยู่ที่ไหน ได้ผ่านที่ใดมาบ้างเเละควรจะไปไหนต่อ
เนวิเกชั่นที่ดี จะต้องบรรลุวัตถุประสงค์ต่อไปนี้
1.ผู้ชมกำลังอยู่ในส่วนใดของเว็บ
2.สามารถเข้าถึงข้อมูลได้อย่างไร
3. สามารถกลับไปยังหน้าเดิมได้อย่างไร
4. หน้าเว็บเพจใดที่ได้เยี่ยมชมข้อมูลเเล้ว
องค์ประกอบของระบบเนวิเกชั่นหลัก
ระบบเนวิเกชั่นที่สำคัญเเละพบมากที่สุด คือเนวิเกชั่นที่อยู่หน้าเีดียวกับเนื้อหา ไม่ใช่เนวิเกชั่นที่อยู่ภายในเว็บ ซึ่งได้แก่ เนวิเกชั่นบาร์ เนวิเกชั่นระบบเฟรม
pull down
pop up menu
image map
searchbox
การออกแบบระบบเนวิเกชั่น
สร้างระบบเนวิเกชั่นหลัก
การออกแบบที่ดีควรเริ่มจากการทีโครงสร้างลำดับขั้นของข้อมูลที่เหมาะสม รายการหลักในกลุ่มข้อมูลชั้นเเรกเป็นตัวกำหนดว่าระบบเนวิเกชั่่นเเบบโกบอลจะต้องมีอะไรบ้าง รายการหลักจะถูกลิงค์ให้เข้าถึงได้ทุกหน้าในเว็บเเละเป็นต้นเเบบให้กับระบบเนวิเกชั่นเเบบโลคอลเเละเเบบเฉพาะทีต่อไปทุกลำดับขั้นข้อมูลที่สูงกว่า
เนวิเกชั่นเเบบกราฟฟิก VS ตัวอักษร
จะเลือกใช้เเบบใด้ก็ได้ขึ้นอยู่กับผู้ออกแบบ โดยปรกติรูปแบบกราฟิกจะดูสวยกว่าเเบบตัวอักษรอยู่เเล้ว เเต่อาจทำให้การเเสดงผลช้าลง
เนวิเกชั่นเเบบกราฟิกพร้อมคำอธิบาย
เนวิเกชั่นเเบบกราฟิกหรือไอคอนเพื่อเพิ่มความน่าสนใจของลิงค์ ควรใส่คำอธิบายควบคู่
กับกราฟฟิกด้วย
พื้นฐานของระบบเนวิเกชั่น
หลักการออกแบบเนวิเกชั่นคือการอำนวยความสะดวกตามเป้าหมายของผู้ใช้ เพื่อให้รู้ว่า
ตอนนี้กำลังอยู่ที่ไหน มีหลายสิ่งที่ทำให้รู้สถานที่ได้โดยเร็วไม่ว่าจะเป็นเเผนที่ ป้ายบอกทาง เสียง อากาศ
เพิ่มความคล่องตัวในการเคลื่อนที่
สามารถเข้าถึงได้ในทุกๆหน้า ควรจะมีลิงค์อย่างน้อยที่สุด 1 ลิงค์เพื่อกลับไปยังหน้า Home เเละป้องกันปัญหาการเกิดหน้าทางตันที่ไม่มีลิงค์ไปสู่ส่วนใดๆ ในเว็บ
การออกเเบบโครงสร้างข้อมูลที่ดีช่วยให้ผู้ใช้เข้าถึงข้อมูลได้ง่ายขึ้น ส่วนระบบเนวิเกชั่นเป็นส่วนเสริมในการสร้างสิ่งเเวดล้อมที่สื่อความหมายเพื่อช่วยให้ผู้ใช้ท่องเว็บได้อย่างคล่องตัว โดยไม่หลงทาง โดยทำให้ผู้ใช้สามารถรู้ได้ว่าตัวเองกำลังอยู่ที่ไหน ได้ผ่านที่ใดมาบ้างเเละควรจะไปไหนต่อ
เนวิเกชั่นที่ดี จะต้องบรรลุวัตถุประสงค์ต่อไปนี้
1.ผู้ชมกำลังอยู่ในส่วนใดของเว็บ
2.สามารถเข้าถึงข้อมูลได้อย่างไร
3. สามารถกลับไปยังหน้าเดิมได้อย่างไร
4. หน้าเว็บเพจใดที่ได้เยี่ยมชมข้อมูลเเล้ว
องค์ประกอบของระบบเนวิเกชั่นหลัก
ระบบเนวิเกชั่นที่สำคัญเเละพบมากที่สุด คือเนวิเกชั่นที่อยู่หน้าเีดียวกับเนื้อหา ไม่ใช่เนวิเกชั่นที่อยู่ภายในเว็บ ซึ่งได้แก่ เนวิเกชั่นบาร์ เนวิเกชั่นระบบเฟรม
pull down
pop up menu
image map
searchbox
การออกแบบระบบเนวิเกชั่น
สร้างระบบเนวิเกชั่นหลัก
การออกแบบที่ดีควรเริ่มจากการทีโครงสร้างลำดับขั้นของข้อมูลที่เหมาะสม รายการหลักในกลุ่มข้อมูลชั้นเเรกเป็นตัวกำหนดว่าระบบเนวิเกชั่่นเเบบโกบอลจะต้องมีอะไรบ้าง รายการหลักจะถูกลิงค์ให้เข้าถึงได้ทุกหน้าในเว็บเเละเป็นต้นเเบบให้กับระบบเนวิเกชั่นเเบบโลคอลเเละเเบบเฉพาะทีต่อไปทุกลำดับขั้นข้อมูลที่สูงกว่า
เนวิเกชั่นเเบบกราฟฟิก VS ตัวอักษร
จะเลือกใช้เเบบใด้ก็ได้ขึ้นอยู่กับผู้ออกแบบ โดยปรกติรูปแบบกราฟิกจะดูสวยกว่าเเบบตัวอักษรอยู่เเล้ว เเต่อาจทำให้การเเสดงผลช้าลง
เนวิเกชั่นเเบบกราฟิกพร้อมคำอธิบาย
เนวิเกชั่นเเบบกราฟิกหรือไอคอนเพื่อเพิ่มความน่าสนใจของลิงค์ ควรใส่คำอธิบายควบคู่
กับกราฟฟิกด้วย
พื้นฐานของระบบเนวิเกชั่น
หลักการออกแบบเนวิเกชั่นคือการอำนวยความสะดวกตามเป้าหมายของผู้ใช้ เพื่อให้รู้ว่า
ตอนนี้กำลังอยู่ที่ไหน มีหลายสิ่งที่ทำให้รู้สถานที่ได้โดยเร็วไม่ว่าจะเป็นเเผนที่ ป้ายบอกทาง เสียง อากาศ
เพิ่มความคล่องตัวในการเคลื่อนที่
สามารถเข้าถึงได้ในทุกๆหน้า ควรจะมีลิงค์อย่างน้อยที่สุด 1 ลิงค์เพื่อกลับไปยังหน้า Home เเละป้องกันปัญหาการเกิดหน้าทางตันที่ไม่มีลิงค์ไปสู่ส่วนใดๆ ในเว็บ
ไม่มีความคิดเห็น:
แสดงความคิดเห็น