ReadyPlanet.com
dot

dot
เลือกเวอร์ชั่น Text Editor
Editor Manual
แนะนำวิธีทำเว็บไซต์เบื้องต้น
Function Update
dot
dot
เว็บไซต์รูปแบบ Responsive web design
จัดการเมนูหลัก
เมนูโค้ดและสคริปต์ภายใต้ <head>
ประวัติการใช้งานระบบ
ตัวนับผู้ชมเว็บ
Google Service/Sitemap
จัดการอีเมลสมัครรับข่าวสาร
dot
dot
ระบบผู้ช่วย
ระบบ Chat
dot
dot
การตั้งอีเมล Pop Mail
dot
dot
bulletจัดการเว็บไซต์
bulletระบบพื้นฐาน
bulletระบบเสริม
bulletบริการสมาชิก
bulletเทคนิคอื่นๆ
bulletText Editor
dot
dot
bulletจัดการแบบฟอร์มติดต่อกลับ


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


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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

 

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

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


 เว็บไซต์ร้านรับซักรีดเสื้อผ้า www.fongfab.com

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


  เว็บไซต์ธุรกิจแฟรนไชส์กาแฟสด www.raicholadacoffee.com

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


 เว็บไซต์ให้คำปรึกษาด้านกฎหมาย www.laslaws.com

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

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

 

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

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

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

  

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

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

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


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

 

ตัวอย่างการเลือกเฉดสีสำหรับเว็บไซต์ Oxygen.ReadyPlanet.com 

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

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

 

 

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

การตั้งค่าพื้นฐานในแท็บ "สี"

- เปลี่ยนสีพื้นหลังที่แสดงกลุ่มบทความและกลุ่มสินค้าในหน้าแรก ด้วย Dynamic Layout

จัดการสีส่วนแสดงบทความ (กำหนดสีและขนาดอักษรทั่วไปของเว็บไซต์)

- จัดการสีส่วนเมนูหลัก

- จัดการสีส่วนเมนูย่อย

- จัดการสีที่พื้นที่ด้านล่างของเว็บไซต์

 

Jittima  Suebsook
www.ReadyPlanet.com




วิธีใส่ข้อมูลและตกแต่งเว็บไซต์สำเร็จรูป ReadyPlanet เบื้องต้น

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