⌛ การออกเเบบหน้าเว็บไซต์
หลักสำคัญในการออกเเบบหน้าเว็บไซต์ คือ การใช้รูปภาพเเละองค์ประกอบต่างๆ ร่วมกันเพื่อสื่อความหมายเกี่ยวกับเนื้อหาหรือลักษณะสำคัญของเว็บให้น่าสนใจ บนพื้นฐานของความเรียบง่ายเเละสะดวกของผู้ใช้
⌛เเนวคิดในการออกเเบบหน้าเว็บ
➪เรียนรู้จากเว็บไซต์ต่างๆ
➪ประยุกต์รูปแบบจากสื่อพิมพ์ ใช้เเบบจำลองเปรียบเทียบ (Metaphor)
➪ออกแบบอย่างสร้างสรรค์
· ⌛ใช้เเบบจำลองเปรียบเทียบ (Metaphor)
การใช้เเบบจำลองเปรียบเทียบ คือการใช้สิ่งที่คุ้นเคในการอธิบายถึงสิ่งที่ไม่คุ้นเคย ไม่ว่าจะเป็น
รูปภาพจาก สิ่งพิมพ์หรือรูปแบบของร้านขายของ สิ่งสำคัญ คือ รูปแบบที่เลือกมาใช้ต้องมีลักษณะ
ที่คนส่วนใหญ่คุ้นเคย เข้าใจง่าย สนับสนุนเเนวคิดเเละส่งเสริมกระบวนการสื่อสารของเว็บ
ลักษณะต่างๆ ของเเบบจำลองการใช้เเบบจำลองมีด้วยกัน 3 ประเภท ดังนี้
1. จำลองเเบบการจัดระบบ (Organizational metaphor) คือใช้ประโยชน์จากความคุ้นเคยของ
การจัดระบบที่คุ้นเคย เพื่อให้ผู้ใช้เข้าถึงโครงสร้างในระบบใหม่ได้ง่ายขึ้น
2. จำลองการใช้งาน (Functional metaphor)
คือเชื่อมโยงการใช้งานที่สามารถทำได้ในชีวิตจริงกับการใช้งานเว็บ เช่น เว็บโรงภาพยนต์
3. จำลองลักษณะที่มองเห็น (Visual metaphor)
คือวิธีนี้จะเกี่ยวข้องกับสิ่งที่มีลัษณะที่คุ้นเคยของคนทั่วไป
· ⌛หลักการออกเเบบหน้าเว็บ
1. สร้างลำดับชั้นความสำคัญขององค์ประกอบจัดตำเเหน่งเเละลำดับขององค์ประกอบ เเสดงลำดับความสำคัญของข้อมูลที่ต้องการให้ผู้ใช้ได้รับเนื่องจากภาษาส่วนใหญ่จะอ่านจากซ้ายไปขวา เเละจากบน ลงล่าง จึงควรจัดวางสิ่งที่สำคัญไว้ที่ส่วนบนหรือด้านซ้ายของหน้าอยู่เสมอ
2. สร้างรูปแบบ บุคลิกเเละสไตล์รูปแแบบ การเลือกรูปแบบเว็บที่เหมาะสมจะช่วยสร้างความเข้าใจของผู็ใช้ได้ดีขึ้นบุคลิก เว็บเเต่ละประเภทอาจมีบุคลิกลักษณะแตกต่างกันขึ้นอยู่กับเนื้อหาเเละเป้าหมายในการนำเสนอสไตล์คือ ลักษณะการจัดโครงสร้างของหน้า ณุปแบบกราฟิก ชนิดเเละการจัดตัวอักษร ชุดสีที่ใช้ รวมถึงองค์ประกอบอื่นๆ ซึ่งไม่ควรสร้างตามใจชอบ
3. สร้างความสม่ำเสมอตลอดทั่วทั้งไซต์ความสม่ำเสมอของโครงสร้างเว็บเเละระบบเนวิเกชั่น ทำให้รู้สึกคุ้นเคยเเละสามารถคาดการณ์ลักษณะของเว็บได้ล่วงหน้า ทางด้านเทคนิดสามารถใช้ css กำหนดได้เพื่อให้เป็นมารตฐานเดียวกัน
4. จัดวางองค์ประกอบที่สำคัญไว้ในส่วนบนของหน้าเสมอควรประกอบด้วย
1.ชื่อของเว็บ เพื่อให้ผู้ใช้ได้รู้ทันทีว่ากำลังอยู่ในเว็บอะไร
2.ชื่อหัวเรื่อง
3.สิ่งสำคัญที่เราต้องการโปรโมตเว็บ
4.ระบบเนวิเกชั่น
5.สร้างจุดสนใจด้วยความเเตกต่างการจัดองค์ประกอบให้ภาพรวมของหน้ามีความเเตกต่างเป็นสิ่งสำคัญที่จะนำสายตาผู้อ่านไปยังบริเวณต่างๆ โดยการใช้สีที่ตัดกัน
6. จัดเเต่งหน้าเว็บให้เป็นระเบียบ เนื้อหาในหน้าเว็บจำเป็นต้องอยู่ในรูปแบบที่ดูง่ายเเยกเป็นสัดส่วน เเละดูไม่เเน่นจนเกินไป
7.ใช้กราฟฟิกอย่างเหมาะสม ควรใช้กราฟิกที่เป็นไอคอนปุ่ม ลายเส้น เเละสิ่งอื่นๆ ตามความเหมาะสมเเละไม่มากเกินไป เพื่อหลีกเลี่ยงโครงสร้างที่หยุ่งเหยิงเเละไม่เป็นระเบียบ ส่วนตัวอักษรขนาดใหญ่ด้วยคำสั่ง h1 เเละ h2 ควรใช้ในปริมาณน้อยๆ เพื่อให้ได้ผลลัพธ์สูงสุด
⌛การออกเเบบหน้าเว็บไซต์ให้เหมาะกับสิ่งแวดล้อม
ปัจจัยหลักที่เกี่ยวข้องกับการท่องเว็บไซต์
1. เบราเซอร์ที่ใช้
· เบราเซอร์ คือ โปรแกรที่ใช้เรียกดูเว็บ สามารถแสดงได้ทั้งตัวอักษรรูปภาพ และภาพเคลื่อนไหว เบราเซอร์ที่ได้ความนิยม เช่น Google Chrome, IE, Opera มาตรฐานกลางของเบราเซอร์ คือ W3C
· เป็นองค์กรที่กำหนดคุณสมบัติของเบราเซอร์ เราควรออกแบบตามคุณสมบัติดังนี้
1. สามารถใช้ได้กลับเบราเซอร์ได้ทุกรุ่น
2. เว็บไซต์สำหรับเบราเซอร์รุ่นล่าสุด
3. เว็บไซต์ตามความสามารถของเบราเซอร์
4. เว็บไซต์ที่มีหลายรูปแบบ
2. ระบบปฏิบัติการของคอมพิวเตอร์
เป็นระบบที่เป็นปัจจัยหลักต่อ มีผลต่อการทำง่านของเบราเซอร์มาก โดยแต่ละระบบปฏิบัติการจะมีความแตกต่างกันในเรื่องของชนิดและรุ่นของเบราเซอร์ที่ใช้ได้ระดับความละเอียดของหน้าจอ ชุดสีของระบบ และชนิดของตัวอักษรที่มาพร้อมกับระบบ
3. ความละเอียดของหน้าจอ
ความละเอียดของหน้าจอ (monitor resolution) มีหน่วยเป้น pixel ความละเอียดของหน้าจอไม่ขึ้นกับขนาดของมอนิเตอร์ที่ใช้ แต่จะขึ้นกับประสิทธิภาพของการ์ดแสดงผลว่าสามารถทำได้ได้ละเอีวดแค่ไหนการออกแบบหน้าจอผู้ใช้ส่วนใหญ่จะชอบหน้าเว็บที่เปิดมาแล้วสมบูรณ์
4. จำนวนสีที่จอของผู้ใช้สามารถแสดงได้
มอนิเตอร์มีความสามารถให้การแสดงสีแตกต่างก่อน ขึ้นอยู่กับประสิทธิภาพของการ์ดจอ จำนวนหน่วยความจำในการ์ดจอมากขึ้นจะทำให้สามารถแสดงสีได้มากขึ้น จำนวนสีที่การ์ดจอสามารถแสดงได้นั้น ขึ้นอยู่กับค่าความละเอียดของสีที่เรียกว่า bit depth and color depth ซึ่งก็คือจำนวนบิตที่ใช้ในการเก็บข้อมูลแค่ละพิกเซลชุดสีสำหรับเว็บ (Web palette) หมายถึง ชุดสีจำนวน 216 สีที่มีอยู่เหมือนกันในระบบปฏิบัติการ Windows and Mac
5. ชนิดของตัวอักษรที่มีอยู่ในเครื่อง
ชนิดของตัวอักษรมี 2 แบบ
· MS Sans Serif VS Microsoft Sans Serif
· MS Sans Serif เป็นฟอนต์แบบชิตแมท ซึ่งออกแบบขึ้นจากจุดของพิกเซล โดยมีการออกแบบแต่ละตัวอักษรไว้เป็นขนาดที่แน่นอน Microsoft Sans Serif เป็นฟอนด์ที่มีโครงสร้างของอักขระเป็นแบบเวคเตอร์หรือลายเส้น โอยมีกรออกแบบเอาท์ไลน์ไว้เพียงแบบเดียวแต่สามารถปรับขนาดได้อย่างไม่จำกัดตัวอักษรแบบกราฟิก(Graphic Text)
6. ความเร็วในการเชื่อมต่ออินเตอร์เน็ต
7. ความสว่างและค่าความต่างของโทนสี
⌛ การเลือกใช้สีสำหรับเว็บไซต์
1.เลือกใช้สีสำหรับเว็บไซต์
· สีสันในเว็บเพจเป็นสิ่งสำคัญมากในการดึงดูดความสนในของผู้ใช้
· สามารถเลือกใช้สีได้กับทุกองค์ประกอบของเว็บเพจ
· ใช้สีพื้นหลังใกล้เคียงกับสีตัวอักษร อาจสร้างความลำบากในการอ่าน
· ใช้สีมากเกินความจำเป็นอาจสร้างความสับสนให้กับผู้อ่านได้
· การใช้สีกลมกลืนกันช่วยให้เว็บไซต์น่าดูน่าชมมากขึ้น
2.ประโยชน์ของสีในเว็บไซต์
· สามารถชักนำสายตาผู้อ่านให้ไปยังทุกบริเวณในหน้าเว็บเพจที่เราต้องการได้
· สีช่วยเชื่อมโยงบริเวณที่ได้รับการออกแบบเข้าด้วยกัน
· ใช้ในการดึงดูดความสนในของผู้อ่าน
· สร้างอารมณ์โดยรวมของเว็บเพจได้
· ช่วยสร้างความเป็นระเบียบให้กับข้อความต่าง ๆ ได้
· ส่งเสริมเอกลักษณ์ขององค์กรหรือหน่วยงานได้
3.การผสมสี (Color Mixing)
· การผสมสีแบบบวก (Additive mixing) จะเป็นรูปแบบการผสมของแสง ไม่ใช่การผสมของวัตถุที่มีสีบนกระดาษ
· การผสมสีแบบลบ (Subtraction mixing) จะไม่เกี่ยวข้องกับแสงแต่จะเกี่ยวข้องกับการดูดกลืนและสะท้อน แสงของวัตถุต่าง ๆ
· การนำไปใช้งาน
· การผสมแบบบวก จะนำไปใช้ในสื่อใด ๆ ที่ใช้แสงส่องออกมา เช่น จอโปรเจ็คเตอร์ ทีวี
· การผสมแบบลบ จะนำไปใช้ในสื่อที่เกี่ยวข้องกับการใช้วัตถุมีสี เช่นภาพวาดของศิลปิน รูปปั้น
4.วงล้อของสี (Color Wheel)
· เป็นรูปแบบการจัดลำดับเฉดสีอย่างมีเหตุผลและก็ง่ายต่อการนำไปใช้งาน จะมี 2 แบบ คือ วงล้อสีแบบลบ กับ วงล้อสีแบบบวก
· สีที่เป็นกลาง(Neutral Color) สีกลุ่มหนึ่งที่ไม่ได้ถูกบรรจุไว้ในวงล้อสี เพราะเป็นสีที่ไม่ได้รับอิทธิพลมากกว่าสีอื่น คือ สีเทา สีขาวสีดำ สีอ่อน สีเข้ม และโทนสี(Tint Shade and Tone)
5.การผสมสีกลางเข้ากับสีบริสุทธิ์
· จะเกิดเป็นสีต่าง ๆ เช่น สีบริสุทธิ์ผสมกับสีขาว จะได้เป็นสีอ่อน , สีบริสุทธิ์ ผสมกับสีเทา จะได้โทนสีระดับต่าง ๆ , สีบริสุทธิ์ผสมกับสีดำ จะได้เป็นสีเข้ม สีอ่อน สีเข้ม และโทนสี จะช่วยทำให้สามารถแสดงออกถึงความรู้สึกได้หลายแบบ
6.ความกลมกลืนของสี (Color Harmony)
· การใช้สีที่จืดชืดเกินไป จะทำให้เกิดความรู้สึกที่น่าเบื่อ และไม่สามารถดึงดูดความสนใจจากผู้ชมได้
· การใช้สีมากเกินไป ก็จะดูวุ่นวาย ขาดระเบียบ และอาจสร้างความสับสนให้กับผู้ชม
7.รูปแบบชุดสีพื้นฐาน
· ชุดสีร้อน (Warm Color Scheme) จะสร้างความรู้สึกอบอุ่นสบาย และรู้สึกต้อนรับแก่ผู้ชม
· ชุดสีเย็น(Cool Color Scheme) จะทำให้รู้สึกเย็นสบาย ดูสุภาพ เรียบร้อย และตามหลักจิตวิทยาจะทำให้ดูเศร้า
· ชุดสีแบบเดียว(Monochromatic Color Scheme) เป็นรูปแบบสีที่ง่ายที่สุด จะทำให้ขาดความสนใจจากผู้ชม
· ชุดสีแบบสามเส้า(Tricia Color Scheme) เป็นชุดสีที่อยู่ที่มุมของสามเหลี่ยมด้านเท่าทั้งสาม จะทำให้รู้สึกว่า หน้าเว็บดูมีชีวิตชีวา
· ชุดสีคลายคลึงกัน(Analogous Color Scheme) ประกอบด้วยสี 2 หรือ 3 สีที่อยู่ติดกันในวงล้อ เช่น โทน ส้ม- เหลือง จะให้บรรยากาศต้อนรับและความอบอุ่น
· ชุดสีตรงข้าม(Com;commentary Color Scheme) เช่นเว็บไซต์ที่ใช้สีน้ำเงินและส้มเป็นสีหลัก ซึ่งจะเป็นคู่สีที่ ตรงข้ามที่ตัดกันอย่างสะดุดตา
· ชุดสีตรงข้ามข้างเคียง(Split Complementary Color Scheme) เป็นชุดสีที่เปลี่ยนแปลงมาจากชุดสีตรงข้าม
· ชุดสีตรงข้ามข้างเคียงทั้ง 2 ด้าน (Double Split Complementary Color Scheme) จะมีความหลากหลายของสีมากขึ้น แต่จะสร้างความสดใสและความกลมกลืนของสีที่ลดลง ผลทางจิตวิทยาที่มีต่อสี (Color Psychology) มนุยษ์เราจะตอบสนองต่อสีด้วยจิตใจ ไม่ใช่สมอง
8.สีกับอารมณ์ ความรู้สึก และความสัมพันธ์กับสิ่งต่าง ๆ
· สีแดง คือ ความมีพลัง อำนาจ ความรัก ความอบอุ่น
· สีน้ำเงิน คือ ความซื่อสัตย์ ความมั่นคง ความปลอดภัย
· สีเขียว คือธรรมชาติ ความอบอุ่น การเริ่มต้นใหม่
· สีเหลือง คือ ความสดใส่ ร่าเริง การมองโลกในแง่ดี
· สีน้ำตาล คือ ความสะดวกสบาย ความมั่นคง ความน่าเชื่อถือ
· สีขาว คือ ความบริสุทธิ์ ความไร้เรียงสา ความฉลาด
· สีดำ คือ อำนาจ ความฉลาด ความเป็นเลิศ
0 ความคิดเห็น:
แสดงความคิดเห็น