แนะนำการทำเว็บสำเร็จรูป - จะเลือกใช้สีในหน้าเว็บไซต์อย่างไรให้เหมาะสม?
แนะนำการทำเว็บสำเร็จรูป - จะเลือกใช้สีในหน้าเว็บไซต์อย่างไรให้เหมาะสม?

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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


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

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


 เว็บไซต์รีสอร์ทที่พัก www.raiphuphanresort.com

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


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

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

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

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

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

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

  

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

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

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

  

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

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

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

  

16 June 2011
Jittima  Suebsook
www.ReadyPlanet.com




เทคนิคการทำเว็บไซต์ (Howto)

เทคนิคการสร้างเส้นตรงคั่นระหว่างเนื้อหาหรือบทความด้วยเครื่องมือ Insert Horizontal Line
วิธีนำ Embed Post จาก Facebook, Twitter และ Google+ มาแสดงผลบนหน้าเว็บไซต์
เว็บไซต์สำเร็จรูป - ไขข้อข้องใจ "การทำเว็บไซต์ภาษาที่สอง"
เว็บไซต์สำเร็จรูป - ติดตั้งเครืองมือแปลภาษา Google Translate บนหน้าเว็บไซต์
เว็บไซต์สำเร็จรูป - เจาะลึกเรื่องเมนูที่ควร Do และ Don't
เว็บไซต์สำเร็จรูป - เทคนิคง่าย ๆ ในการค้นหาข้อมูลบนเว็บไซต์ ตอนที่ 2
เว็บไซต์สำเร็จรูป - เทคนิคง่าย ๆ ในการค้นหาข้อมูลบนเว็บไซต์ ตอนที่ 1
เว็บไซต์สำเร็จรูป - เทคนิคการใส่ตารางในรายละเอียดสินค้าบนระบบร้านค้าออนไลน์
เว็บไซต์สำเร็จรูป - เทคนิคการปิดปรับปรุงเว็บไซต์ โดยใช้ Intro Page
เว็บไซต์สำเร็จรูป - ติดต่อง่าย เก็บได้ข้อมูลดังใจกับ "แบบฟอร์มอิสระติดต่อกลับ"
เว็บไซต์สำเร็จรูป - ไม่พลาดการติดต่อด้วย "แบบฟอร์มมาตรฐาน"
เว็บไซต์สำเร็จรูป - ใส่กรอบและตกแต่งรูปภาพอย่างง่ายด้วยโปรแกรม PhotoScape
การทำเว็บเพื่อการตลาดออนไลน์ - ฟันธงแนวโน้มการตลาดออนไลน์
เว็บไซต์สำเร็จรูป - จัดระเบียบข้อมูลบนหน้าเว็บไซต์ด้วยเครื่องมือตาราง
แนะนำการทำเว็บสำเร็จรูป - วิธีอัพโหลดไฟล์เอกสารและสร้างลิงค์สำหรับดาวน์โหลด
แนะนำการทำเว็บสำเร็จรูป - ย่อรูปภาพอย่างง่ายด้วยเครื่องมือ "กำหนดขนาดรูปภาพ"
การทำเว็บเพื่อการตลาดออนไลน์ - Website Check Up ตรวจสุขภาพเว็บไซต์
แนะนำการทำเว็บสำเร็จรูป - สร้างลิงค์รูปภาพเล็กไปรูปภาพใหญ่ ด้วยเครื่องมือ Text Editor
แนะนำการทำเว็บสำเร็จรูป - เทคนิคใส่ตัวอักษรเคลื่อนไหวในพื้นที่ด้านล่างของเว็บไซต์
แนะนำการทำเว็บสำเร็จรูป - เทคนิคซ่อนเส้นขอบรูปภาพที่เกิดจากการสร้างลิงค์
แนะนำการทำเว็บสำเร็จรูป - วิธีสร้างภาพโลโก้ตัวอักษรอย่างง่าย
แนะนำการทำเว็บสำเร็จรูป - วิธีแสดง Profile widget จาก Twitter ในเว็บไซต์
แนะนำการทำเว็บสำเร็จรูป - วิธีติดตั้งโค้ดนับจำนวนผู้เข้าชมเว็บไซต์
การทำเว็บเพื่อการตลาดออนไลน์ - ทำอย่างไรให้เว็บไซต์เป็นที่นิยม
แนะนำการทำเว็บสำเร็จรูป - ข้อควรระวังในการทำเว็บไซต์และวิธีใส่ข้อมูลในเว็บไซต์ที่ถูกต้องปลอดภัย
แนะนำการทำเว็บสำเร็จรูป - วิธีใส่เสียงเพลงในหน้าเว็บไซต์
แนะนำการทำเว็บสำเร็จรูป - ตกแต่งเว็บไซต์ด้วยโค้ดนาฬิกาและปฏิทิน
แนะนำการทำเว็บสำเร็จรูป - สร้างลิงค์ตรวจสอบสถานะ EMS และไปรษณีย์แบบลงทะเบียนในเว็บไซต์
แนะนำการทำเว็บสำเร็จรูป - สร้างรูปภาพเคลื่อนไหวแบบ Marquee
แนะนำการทำเว็บสำเร็จรูป - ประชาสัมพันธ์เว็บไซต์ด้วยแบนเนอร์แลกลิงค์
แนะนำการทำเว็บสำเร็จรูป - สร้างลูกเล่นให้เว็บไซต์ด้วย Chat Box
การทำเว็บเพื่อการตลาดออนไลน์ - สร้างธุรกิจให้ดังและโดนด้วย Social Network
แนะนำการทำเว็บสำเร็จรูป - ตกแต่งเว็บไซต์ด้วยแบนเนอร์เทศกาล
แนะนำการทำเว็บสำเร็จรูป - วิธีสร้าง QR Code และแสดงผลบนเว็บไซต์
การทำเว็บเพื่อการตลาดออนไลน์ - E-Mail Marketing ทำการตลาดออนไลน์ด้วยอีเมล
แนะนำการทำเว็บสำเร็จรูป - วิธีสร้างไฟล์ภาพ Favorite Icon เพื่อแสดงผลในช่อง Address Bar
แนะนำการทำเว็บสำเร็จรูป - เทคนิคการสร้างลิงค์ ในหน้าเดียวกันด้วยคำสั่ง Anchor
การทำเว็บเพื่อการตลาดออนไลน์ - Google Adwords สื่อโฆษณาที่ทรงพลัง
แนะนำการทำเว็บสำเร็จรูป - เทคนิคการสร้างลิงค์เมนูและรูปภาพแบนเนอร์ในพื้นที่ด้านล่างของเว็บไซต์
แนะนำการทำเว็บสำเร็จรูป - แนะนำวิธีหากลืมรหัสผ่านเข้าสู่หน้าแก้ไขเว็บไซต์
การทำเว็บเพื่อการตลาดออนไลน์ - การติดตั้ง Facebook Page Plugin (Like Box) ในเว็บไซต์
แนะนำการทำเว็บสำเร็จรูป - วิธีแสดงผลเครื่องเล่น VDO บนหน้าเว็บไซต์
การทำเว็บเพื่อการตลาดออนไลน์ - Keyword ช่วยสร้างตัวตนบนโลกออนไลน์
แนะนำการทำเว็บสำเร็จรูป - สาเหตุและวิธีการแก้ไขหน้าเว็บไซต์ที่จำข้อมูลเดิม
การทำเว็บเพื่อการตลาดออนไลน์ - การเปลี่ยน Visitor เป็น Customer
การทำเว็บเพื่อการตลาดออนไลน์ - วิธีเชื่อมต่อ Status จาก Twitter ไปยัง Facebook อัตโนมัติ
การทำเว็บเพื่อการตลาดออนไลน์ - รู้จักผู้เข้าชมเว็บไซต์ และวัดผลด้วย Google Analytics
แนะนำการทำเว็บสำเร็จรูป - เพิ่มลูกเล่นให้เว็บไซต์ด้วยหน้าต้อนรับ Intro Page
แนะนำการทำเว็บสำเร็จรูป - วิธีระบุที่ตั้งและแสดงแผนที่ Google Map บนหน้าเว็บไซต์
การทำเว็บเพื่อการตลาดออนไลน์ - วิธีใส่คีย์เวิร์ดในเว็บไซต์เพื่อให้ Google จัดเว็บไซต์ในอันดับที่ดี
การทำเว็บเพื่อการตลาดออนไลน์ - ความหมายและความสำคัญของการจดทะเบียนโดเมนเนม
การทำเว็บเพื่อการตลาดออนไลน์ - เทคนิคการให้รายละเอียดสินค้าเพื่อปิดการขาย
การทำเว็บเพื่อการตลาดออนไลน์ - การสร้างความน่าเชื่อถือให้กับเว็บไซต์
แนะนำการทำเว็บสำเร็จรูป - จัดการข้อมูลเมนูย่อยด้านข้างอย่างไรดี?
แนะนำการทำเว็บสำเร็จรูป - เทคนิคการจัดการเมนูหลักที่สวยและดี
แนะนำการทำเว็บสำเร็จรูป - การเลือกรูปแบบเว็บไซต์และจัดโครงสร้างหน้าแรก
แนะนำการทำเว็บสำเร็จรูป - เริ่มต้นใส่ข้อมูลในระบบเว็บไซต์สำเร็จรูป
การทำเว็บเพื่อการตลาดออนไลน์ - เทคนิคการเขียนบทความบนเว็บไซต์ให้น่าสนใจ
แนะนำการทำเว็บสำเร็จรูป - เตรียมข้อมูลทำเว็บไซต์อย่างไรดี
แนะนำการทำเว็บสำเร็จรูป - 10 ข้อแนะนำ ก่อนเริ่มทำเว็บไซต์