เลือกใช้สีในหน้าเว็บไซต์อย่างไรให้เหมาะสม?


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

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

ดังนั้น รีบมาเช็คกันดีกว่าค่ะว่า การเลือกใช้สีให้เหมาะสมกับเว็บไซต์ควรทำอย่างไร แต่ละสีจะสื่อออกมาในอารมณ์และความรู้สึกแบบไหน และมีการแสดงผลที่เอื้ออำนวยต่อการอ่านข้อมูลของผู้ชมเว็บไซต์ด้วย

 

 

เข้าใจความหมายและอารมณ์ของสี

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

 สีส้ม  เป็นสีแห่งความสร้างสรรค์ อบอุ่น สดใส มีสติปัญญา ความทะเยอทะยาน

 สีแดง  เป็นสีที่กระตุ้นระบบประสาทของเราได้รุนแรงที่สุด ให้ความรู้สึกเร้าใจ ตื่นเต้น ท้าทาย ตื่นตัว

 สีชมพู ให้ความรู้สึกอบอุ่น อ่อนโยน นุ่มนวล อ่อนหวาน ความรัก

 สีเหลือง ให้ความรู้สึกแจ่มใส ความสดใส ความอบอุ่น ความร่าเริง  ความสุกสว่างใส

 สีเขียว  เป็นสีที่เด่นที่สุดบนโลก ให้ความรู้สึกร่มเย็น สบายตา ผ่อนคลาย ปลอดภัย ทำให้เกิดความหวังและความสมดุล

 สีน้ำเงิน  เป็นสีที่สร้างความสุขุม เยือกเย็น หนักแน่นและละเอียดรอบคอบ  น่าเชื่อถือ

 สีฟ้า  เป็นสีที่ให้ความรู้สึกสงบเยือกเย็น เป็นอิสระ ปลอดโปร่ง สบาย ปลอดภัย ใจเย็น สะอาด

 สีม่วง  เป็นสีแห่งผู้รู้ ห้ความรู้สึกมีเสน่ห์ น่าติดตาม เร้นลับ น่าค้นหา

 สีขาว ให้ความรู้สึกบริสุทธิ์ สะอาด สดใส เบาบาง อ่อนโยน

 สีทอง ให้ความรู้สึกความหรูหรา โอ่อ่า มีราคา สง่างาม  เป็นต้น

(ข้อมูลอ้างอิงจาก : http://th.wikipedia.org/wiki/สีบำบัด)

 

คำนึงถึงความสอดคล้องของสีกับจุดประสงค์ของเว็บไซต์

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


 เว็บไซต์หนังสือสวดมนต์ แสงบุญ www.saengbul.com

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


  เว็บไซต์จำหน่ายเครื่องเขียน อุปกรณ์การเรียน www.vmapgroup.com

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


 เว็บไซต์ให้บริการแปลภาษา แปลเอกสาร th.grandtranslation.com

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

 

เลือกใช้กลุ่มสีที่มีความกลมกลืนกัน

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

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

  

เลือกใช้สีตัวอักษรให้อ่านง่าย

สีของตัวอักษร ควรเป็นสีที่ตรงกันข้ามหรือตัดกับสีพื้นหลังของเว็บไซต์  กล่าวคือ หากเว็บไซต์ของคุณมีสีพื้นหลังเป็นสีอ่อน  ควรเลือกใช้สีตัวอักษรเป็นสีเข้ม 

ในทางกลับกัน ถ้าเว็บไซต์ของท่านมีสีพื้นหลังเป็นสีเข้ม สีตัวอักษรก็ควรจะเป็นสีอ่อนหรือสีที่สว่าง แต่ควรหลีกเลี่ยงสีสว่างบางสี เช่น สีเหลืองสด สีแดง สีเขียวสะท้อนแสง เป็นต้น เพราะจะสะท้อนแสงสู่สายตาผู้อ่านอย่างมาก ทำให้อ่านตัวอักษรได้ยากยิ่งขึ้น  (ยกเว้น กรณีใช้สีสว่างในการเน้นตัวอักษรบางประโยคให้เป็นจุดเด่น เพื่อการโฆษณาประชาสัมพันธ์ บอกโปรโมชั่นต่าง ๆ ) 


ตัวอย่างการแสดงผลหน้าเว็บไซต์ที่เลือกใช้สีตัวอักษรและสีพื้นหลังที่ทำให้อ่านยาก

 

ลิงก์คู่มือการตั้งค่าสีและการแสดงผลส่วนต่าง ๆ ของเว็บไซต์พร้อมใช้ VelaEasy

- วิธีเลือก Theme และตกแต่งเว็บไซต์

วิธีกำหนดค่าทึบแสงของพื้นหลัง (Theme)

- ขั้นตอนการเลือกใช้งาน Smart Theme และปรับแต่งสี

 

 




VelaEasy Tips

เตรียมข้อมูลทำเว็บไซต์อย่างไรดี
เริ่มต้นใส่ข้อมูลในระบบเว็บไซต์พร้อมใช้ VelaEasy
แนะนำขนาดรูปภาพสำหรับใส่ในเว็บไซต์ VelaEasy
วิธีใส่รูปภาพในเนื้อหาของเว็บไซต์
วิธีอัพโหลดไฟล์เอกสารและสร้างลิงก์สำหรับดาวน์โหลด
วิธีสร้างลิงก์ให้กับข้อความและรูปภาพ
เทคนิคการจัดการเมนูด้านบนที่สวยและดี
จัดการข้อมูลเมนูด้านข้างอย่างไรดี?
วิธีใส่คีย์เวิร์ดในเว็บไซต์เพื่อให้ Google จัดเว็บไซต์ในอันดับที่ดี
4 วิธี เคลียร์เนื้อหายาวๆ ในเว็บไซต์ ให้น่าอ่าน
5 องค์ประกอบของเว็บไซต์ที่ดี
5 สิ่งที่ต้องมี บนโฮมเพจเว็บไซต์
เทคนิคการสร้างลิงก์ไปยังตำแหน่งที่ต้องการ ด้วยเครื่องมือ Anchor
แนะนำวิธีหากลืมรหัสผ่านเข้าสู่หน้าแก้ไขเว็บไซต์สำเร็จรูป VelaEasy
วิธีติดตั้งโค้ดนับจำนวนผู้เข้าชมเว็บไซต์
การติดตั้ง Facebook Page Plugin (Like Box) ในระบบ VelaEasy
วิธีแสดงผล VDO ในเว็บไซต์ VelaEasy
แนะนำโปรแกรมตกแต่งและใส่กรอบรูปภาพฟรี! ใช้ง่าย นำไปแต่งเว็บให้โดดเด่นได้เลย
ใช้ระบบ Chat บนหน้าเว็บไซต์ ช่วยถามตอบทุกข้อสงสัย พร้อมเพิ่มโอกาสปิดการขายได้มากกว่า
โชว์เส้นทาง สร้างแผนที่บนเว็บไซต์ง่ายๆ ใช้ Google Map
Google Verification (วิธียืนยันการเป็นเจ้าของเว็บไซต์กับทาง Google)
วิธีการสร้างและยืนยัน Sitemap ของเว็บไซต์ระบบ VelaEasy กับทาง Google
วิธีติดตั้งโค้ด Google Analytics ในระบบ VelaEasy
ติดตั้งเครืองมือแปลภาษา Google Translate บนหน้าเว็บไซต์
ไขข้อข้องใจ "การทำเว็บไซต์ภาษาที่สอง"
สร้างฐานลูกค้าออนไลน์อย่างง่ายแต่มั่นคง ด้วยระบบสมาชิก
เทคนิคสร้างลิงก์และปุ่มโทรบนเว็บไซต์ เพื่อการติดต่อที่ง่าย แค่คลิก แล้วโทร
วิธีเพิ่มลิงก์ Add LINE และปุ่ม LINE it! บนหน้าเว็บไซต์ ช่วยผู้ชมแชทง่าย แชร์ข้อมูลได้สะดวก
เทคนิคแสดงผลแบนเนอร์กิจกรรม ด้วยรูปภาพที่คุณออกแบบเอง
วิธีการแก้ปัญหา hotmail ไม่ได้รับอีเมลแจ้งรหัสผ่าน article