เลือกใช้สีสำหรับเว็บไซต์
เลือกใช้สีสำหรับเว็บไซต์(Designing Web Colors)
การเลือกใช้สีสันในเว็บเพจเป็นสิ่งที่สำคัญมากในการดึงดูดความสนใจของผู้ใช้ เนื่องจากสิ่งแรกที่ผู้ใช้มองเห็นจากเว็บก็คือสี ซึ่งเป็นสิ่งกำหนดบรรยากาศและความรู้สึกของเว็บไซต์
►ประโยชน์ของสีในเว็บไซต์ สามารถชักนำสายตาอ่านในไปยังข้อมูลได้
สามารถเชื่อมโยงบริเวณที่ได้รับการออกแบบเข้าด้วยกัน
สามารถแยกส่วนต่างๆออกจากกันได้ง่าย
สามารถดึงดูดความสนใจของผู้อ่าน ช่วยสร้างระเบียบให้คับข้อความต่างๆ
►แม่สีขั้นต้นมี 3 สี
สีแดง
สีเหลือง
สีน้ำเงิน
►การผสมสี(Color Mixing)
มี 2แบบ
1.การผสมแบบบวก เป็นการผสมของแสง ไม่ใช่การผสมของวัตถุที่มีสีบนกระดาษ นำไปใช้กับ จอโปรเจคเตอณ์ ทีวี หรือจอมอนิเตอร์ 2.การผสมแบบลบ เป็นการผสมไม่เกี่ยวกับแสง แต่เกี่ยวกับการดูดกลืนและสะท้อนแสงของวัตถุต่างๆ การนำไปใช้งาน ภาพวาดของศิลปิน
►วงล้อสี (Color wheel)
เป็นรูปแบบหนึ่งในการจัดเรียงสีทั้งหมดไว้ในวงกลม และเป็นการจัดลำดับเฉดสีอย่างมีเหตุผลและง่ายต่อการนำไปใช้จะมี
สามารถเชื่อมโยงบริเวณที่ได้รับการออกแบบเข้าด้วยกัน
สามารถแยกส่วนต่างๆออกจากกันได้ง่าย
สามารถดึงดูดความสนใจของผู้อ่าน ช่วยสร้างระเบียบให้คับข้อความต่างๆ
►แม่สีขั้นต้นมี 3 สี
สีแดง
สีเหลือง
สีน้ำเงิน
►การผสมสี(Color Mixing)
มี 2แบบ
1.การผสมแบบบวก เป็นการผสมของแสง ไม่ใช่การผสมของวัตถุที่มีสีบนกระดาษ นำไปใช้กับ จอโปรเจคเตอณ์ ทีวี หรือจอมอนิเตอร์ 2.การผสมแบบลบ เป็นการผสมไม่เกี่ยวกับแสง แต่เกี่ยวกับการดูดกลืนและสะท้อนแสงของวัตถุต่างๆ การนำไปใช้งาน ภาพวาดของศิลปิน
►วงล้อสี (Color wheel)
เป็นรูปแบบหนึ่งในการจัดเรียงสีทั้งหมดไว้ในวงกลม และเป็นการจัดลำดับเฉดสีอย่างมีเหตุผลและง่ายต่อการนำไปใช้จะมี
1.วงล้อสีแบบลบ 2.วงล้อสีแบบบวก
►สีที่เป็นกลาง(Neutral Colors) คือกลุ่มสีที่ไม่ได้ถูกบรรจุไว้ในวงล้อสี เพราะเป็นสีที่ไม่ได้รับอิทธิพลมากจากสีอื่น ซึ่งสีเทา ขาว ดำ
►สีอ่อน สีเข้ม และโทนสี
ในการผสมสีกลางเข้าก้บสีบริสุทธ์จะเกิดเป็นสีต่างๆ จำนวนมาก เช่น สีบริสุทธิ์ผสมกับสีขาว จะได้เป็นสีอ่อน สีบริสุทธิ์ผสมสีเทา จะได้เป็นโทนสีระดับต่างๆ สีบริสุทธิ์กับสีดำจะได้เป็นสีเข็ม
►รูปแบบชุดสีสามารถจัดเป็นกลุ่มง่ายดังนี้
1.ชุดสีร้อนประกอบไปด้วยสีม่วงแกมแดง แดงแกมม่วง แดง ส้ม เหลือง และเขียวอมเหลือง สีเหล่านี้สร้างความอบอุ่น สบาย
2.ชุดสีเย็น ประกอบด้วยสีม่วง น้ำเงิน น้ำเงินอ่อน ฟ้า น้ำเงินแกมเขียว และสีเขียว ชุดสีเย็นให้ความรู้สึกเย็นสบาย ดูสุภาพ เรียบร้อย
3.ชุดสีแบบเดียว เป็นรูปแบบชุดสีที่ง่ายที่สุด คือมีค่าของสีบริสุทธิ์เพียงสีเดียว แต่งเพิ่มความหลากหลายโดยการเพื่มความเข็มอ่อนในระดับต่างๆ ชุดสีนี้จะค่อนข้างมีความกลมกลืนเห็นหนึ่งเดียว แต่งบางครั้งดูไม่มีชีวิตวีวา
4.ชุดสีแบบสามเส้า เป็นชุดสีที่อยู่มีมุมของสามเหลื่ยมด่านเท่าทั้งสาม ซึ่งเป็นสีที่มีระยะห่างในวงล้อสีเท่ากัน จึงมีความเข้ากันอย่างลงตัว
5.ชุดสีที่คล้ายคลึงกัน ประกอบด้วยสี 2 หรือ 3สีที่อยู่ติดกันในวงล้อ สามารถเพิ่มเป็น 4 หรือ5 สีก็ได้ แต่อาจส่งผลให้ขอบเขตของสีกว้างไป
6.ชุดสีตรงข้าม คือสีคู่ที่อยู่ตรงข้ามกันในว้อล้อ เมื่อนำสีทั้งสองมาใช้คู่กันจะทำให้สีทั้งสองมีความสว่างสดใส
7.ชุดสีตรงข้ามข้างเคียง เป็นชุดสีที่เปลี่ยนแปลงมาจากชุดสีตรงข้าม ชุดสีแบบนี้มีความสดใส สะดุดตา และเข้ากันของสีลดลงด้วย
8.ชุดสีตรงข้ามข้างเคียงทั้ง 2 ด้าน ดัดแปลงมาจากชุดสีตรงข้างเช่นกัน แต่สีตรงข้างทั้ง 2 สีถูกแบ่งแยกเป็นสีด้านข้างทั้ง 2 ด้าน จะมีความสดใส แต่ความกลมกลืนของสีลดลง
►สีอ่อน สีเข้ม และโทนสี
ในการผสมสีกลางเข้าก้บสีบริสุทธ์จะเกิดเป็นสีต่างๆ จำนวนมาก เช่น สีบริสุทธิ์ผสมกับสีขาว จะได้เป็นสีอ่อน สีบริสุทธิ์ผสมสีเทา จะได้เป็นโทนสีระดับต่างๆ สีบริสุทธิ์กับสีดำจะได้เป็นสีเข็ม
►รูปแบบชุดสีสามารถจัดเป็นกลุ่มง่ายดังนี้
1.ชุดสีร้อนประกอบไปด้วยสีม่วงแกมแดง แดงแกมม่วง แดง ส้ม เหลือง และเขียวอมเหลือง สีเหล่านี้สร้างความอบอุ่น สบาย
2.ชุดสีเย็น ประกอบด้วยสีม่วง น้ำเงิน น้ำเงินอ่อน ฟ้า น้ำเงินแกมเขียว และสีเขียว ชุดสีเย็นให้ความรู้สึกเย็นสบาย ดูสุภาพ เรียบร้อย
3.ชุดสีแบบเดียว เป็นรูปแบบชุดสีที่ง่ายที่สุด คือมีค่าของสีบริสุทธิ์เพียงสีเดียว แต่งเพิ่มความหลากหลายโดยการเพื่มความเข็มอ่อนในระดับต่างๆ ชุดสีนี้จะค่อนข้างมีความกลมกลืนเห็นหนึ่งเดียว แต่งบางครั้งดูไม่มีชีวิตวีวา
4.ชุดสีแบบสามเส้า เป็นชุดสีที่อยู่มีมุมของสามเหลื่ยมด่านเท่าทั้งสาม ซึ่งเป็นสีที่มีระยะห่างในวงล้อสีเท่ากัน จึงมีความเข้ากันอย่างลงตัว
5.ชุดสีที่คล้ายคลึงกัน ประกอบด้วยสี 2 หรือ 3สีที่อยู่ติดกันในวงล้อ สามารถเพิ่มเป็น 4 หรือ5 สีก็ได้ แต่อาจส่งผลให้ขอบเขตของสีกว้างไป
6.ชุดสีตรงข้าม คือสีคู่ที่อยู่ตรงข้ามกันในว้อล้อ เมื่อนำสีทั้งสองมาใช้คู่กันจะทำให้สีทั้งสองมีความสว่างสดใส
7.ชุดสีตรงข้ามข้างเคียง เป็นชุดสีที่เปลี่ยนแปลงมาจากชุดสีตรงข้าม ชุดสีแบบนี้มีความสดใส สะดุดตา และเข้ากันของสีลดลงด้วย
8.ชุดสีตรงข้ามข้างเคียงทั้ง 2 ด้าน ดัดแปลงมาจากชุดสีตรงข้างเช่นกัน แต่สีตรงข้างทั้ง 2 สีถูกแบ่งแยกเป็นสีด้านข้างทั้ง 2 ด้าน จะมีความสดใส แต่ความกลมกลืนของสีลดลง
-
การออกแบบเว็บไซต์ให้เหมาะกับสิ่งแวดล้อม
ปัจจัยหลักที่เกี่ยวข้องกับการท่องเว็บไซต์
เบราเซอร์ที่ใช้
ระบบปฏิบัติการของคอมพิวเตอร์
ความละเอียดของหน้าจอ
จำนวนสีที่จอผู้ใช้สามารถแสดงได้
ชนิดของตัวอักษรที่มีอยู่ในเครื่องของผู้ใช้
ความเร็วในการเชื่อมต่ออินเตอร์เน็ต
ขนาดหน้าต่างเบราเซอร์
ความสว่างและค่าความต่างของโทนสี
บราเซอร์ที่ใช้
เบราเซอร์คือโปรแกรมที่ใช้เรียกดูเว็บเพจโดยสามารถแสดงผลได้ทั้งรูปแบบตัวอักษร,รูปภาพและภาพเคลื่อนไหวมีเบราเซอร์หลายชนิดที่ได้รับความนิยมเช่น
► Internet Explorer
► Netscape Navigator
►The World
►Opera
►Mozilla
►Firefox
การออกแบบเว็บไซต์ตามคุณสมบัติของเบราเซอร์
►เว็บไซต์สำหรับเบราเซอร์ทุกชนิด
►เว็บไซต์สำหรับเบราเซอร์รุ่นล่าสุด
►เว็บไซต์ตามความสามารถของเบราเซอร์
►เว็บไซต์ที่มีหลายรูปแบบ
ระบบปฏิบัติการ(Opreating System)
ระบบปฏิบัติการเป็นปัจจัยที่มีผลการทำงานต่อเบราเซอร์มากโดยแต่ระบบปฏิบัติการจะมีความแตกต่างกันในเรื่องของชนิดและรุ่นของเบราเซอร์ที่ใช้ได้,ระดับความละเอียดของหน้าจอ, ชุดสีของระบบและชนิดของตัวอักษรที่มาพร้อมกับระบบ เป็นต้น
►การแสดงผลของ Windows จะมีขนาดใหญ่กว่า Mac เล็กน้อย
►ความสว่างของหน้าจอบน Mac จะมากกว่า Windows และ Linux
ความละเอียดของหน้าจอ
การออกแบบควรใช้ความละเอียด800 x 600
ชนิดของตัวอักษรที่มีอยู่ในเครื่องของผู้ใช้
Ms Sans Serif VS Microsoft Sans Serif
Ms Sans Serif เป็นพ้อนต์ที่บิตแมท ที่ออกแบบจากจุดพิกเซล โดยมีการออกแบบขนาดที่แน่นอน
MicrosoftSans Serifเป็นพ้อนต์ที่มีโครงสร้างของอักขระเป็นแบบเวคเตอร์หรือลายเส้นโดยมีการออกแบบเอ้าไลน์ไว้แบบเดียวแต่ปรับขนาดได้ไม่จำกัด
ความเร็วในการเชื่อมต่ออินเตอร์เน็ต
ผู้ออกแบบเว็บไซต์ต้องออกแบบให้เว็บมีความสวยงาม น่าสนใจ และดาวน์โหลดได้เร็ว โดยทำให้ไฟล์มีขนาดเล็กที่สุด
การออกแบบให้เว็บเพจมีขนาดคงที่ (Fixed Design)
รูปแบบนี้เหมาะสมกับผู้ที่ต้องการควบคุมโครงสร้างของหน้าเว็บไซต์ให้คงที่เสมอ
ข้อดี
เว็บเพจจะปรากฎต่อสายตาผู้ใช้เป็นรูปแบบเดียวกันเสมอ
สามารถดูความยาวของตัวอักษรในบรรทัดได้ดี ตัวอักษรไม่ยาวเกินไป
ข้อเสีย
ต้องอาศัย Scroll Bar ในการเลื่อนดูข้อมูล
ออกแบบหน้าเว็บ ( Page Design )
หน้าเว็บหน้าแรกเป็นส่วนที่สำคัญมาก เพราะมีหน้าที่เป็นสื่อกลางให้ผู้ใช้เข้าถึงข้อมูลและระบบงานของเว็บนั้นได้
การใช้แบบจำลองมีด้วยกัน 3 ประเภท ดังนี้
1.จำลองแบบการจัดระบบ ( Organizational metaphor )
คือใช้ประโยชน์จากความคุ้นเคยของการจัดระบบที่คุ้นเคย เพื่อให้ผู้ใช้เข้าถึงโครงสร้างในระบบใหม่ได้ง่ายขึ้น เช่น เว็บร้านขายหนังสือ สามารถจำลองการแบ่งหมวดหมู่หนังสือได้ตามที่ใช้ในร้านหนังสือจริง
2.จำลองการใช้งาน( Functional metaphor )
คือเชื่อมโยงการใช้งานที่สามารถทำได้ในชีวิตจริงกับการใช้งานบนเว็บ เช่น เว็บของโรงภาพยนต์ ที่ควรให้ผู้ใช้สามารถดูโปรแกรมหนัง , จองที่นั่งล่วงหน้า ได้เหมือนกับไปโรงภาพยนต์จริง
3.จำลองลักษณะที่มองเห็น( Visual metaphor )
คือวิธีนี้จะเกี่ยวข้องกับสิ่งที่มีลักษณะที่คุ้นเคยของคนทั่วไป เช่น เว็บไซต์เกี่ยวกับดนตรีที่ให้บริการฟังเพลงบนเว็บได้ การนำลักษณะของปุ่มเล่นเพลง ปิดเพลง ที่ทุกคนรู้จักจากเครื่องเสียงมาใช้ ทำให้เข้าใจง่ายและรวดเร็ว
หลักการออกแบบหน้าเว็บ
1.สร้างลำดับชั้นความสำคัญขององค์ประกอบ
2.สร้างรูปแบบ บุคลิกและสไตล์
3.สร้างความสม่ำเสมอตลอดทั่วทั้งไซต์
4.จัดวางองค์ประกอบที่สำคัญไว้ในส่วนบนของหน้าเสมอ
5.สร้างจุดสนใจด้วยความแตกต่าง
6.จัดแต่งหน้าเว็บให้เป็นระเบียบและเรียบง่าย
7.ใช้กราฟิกอย่างเหมาะสม
การออกแบบหน้าโฮมเพจ ( Home page )
สิ่งสำคัญในการออกแบบหน้าแรกคือ การคำนึกถึงสิ่งที่ ผู้ใช้คาดหวังและจัดเตรียมสิ่งเหล่านั้นไว้ให้พร้อม ทำให้ผู้ใช้รู้ได้ทันทีว่าเว็บนั้นเกี่ยวข้องกับอะไร รวมถึงการสร้างระบบเนวิเกชันให้ผู้ใช้เข้าถึงข้อมูลที่ต้องการได้อย่างสะดวกและรวดเร็ว รูปแบบของหน้าแรกขึ้นอยู่กับลักษณะและวัตถุประสงค์ของเว็บ
หน้าโฮมเพจที่ดีควรมีลักษณะ ดังนี้
1.แสดงถึงภาพรวมและสิ่งที่เป็นประโยชน์ในเว็บ
2.ดูน่าสนใจและมีลักษณะที่สัมพันธ์กับเนื้อหา
3.มีลิงค์ที่สามารถเชื่อมโยงไปสู่ส่วนหลักๆ ของเว็บ
4.แสดงผลได้อย่างรวดเร็ว โดยใช้รูปกราฟิกอย่างจำกัด
5.แสดงถึงเอกลักษณ์ของเว็บด้วยการแสดงชื่อของเว็บ
6.แสดงวันที่ปัจจุบัน
7.สร้างส่วนของเนื้อหาที่แสดงถึงสิ่งใหม่ๆ ในเว็บ
ข้อแนะนำในการออกแบบโฮมเพจ
1.ออกแบบโครงสร้างของหน้าโดยใช้โปรแกรมกราฟิก
2.กำหนดชื่อของเว็บให้สื่อความหมาย
3.สร้างความแตกต่างของสิ่งที่แตกต่างให้เห็นอย่างชัดเจน เช่น สีของลิงค์ สีของตัวอักษร
4.เลือกใช้รูปพื้นหลังที่เหมาะสม
5.หลีกเลี่ยงการใช้เทคโนโลยีขั้นสูง
6.อย่าใช้ภาพเคลื่อนไหวมากจนเกินไป 
ไม่มีความคิดเห็น:
แสดงความคิดเห็น