วิธีการเลือกสีให้เหมาะกับการทำเว็บไซต์

ทฤษฎีการเลือกใช้สีในการออกแบบเว็บไซต์

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

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

 

สัดส่วน 10 30 60

เราจะมาพูดถึงหลักการใช้สีเบื้องต้นที่ใครๆ ก็สามารถนำไปใช้ได้ เช่น การตกแต่งบ้าน ออฟฟิศ และอื่นๆ แต่การที่เรานั้นแบ่งสีในอัตราส่วน 60% 30% 10% ซึ่งในส่วนนี้จะทำให้สีนั้นออกมาดูดีมีความกลมกลืนและสมดุลกันมากยิ่งขึ้น แต่ก็ไม่จำเป็นที่จะต้องใช้ถึง 3 สี เพราะฉะนั้นเราจะมาจำหลักการง่ายๆ กันครับ เรามาพูดถึงส่วนแรกกันก่อนคือ 60% คือสีที่เราจะใช้เป็นสีหลักที่กินพื้นที่ส่วนใหญ่ของหน้าเว็บเพื่อคลุมคุณภาพของเว็บไซต์ ส่วนที่สองคือสีรอง 30% สีรองนี้จะทำให้ดูมีมิติและน่าสนใจ และส่วนที่สาม 10% ใช้เพื่อเน้นข้อความหรือปุ่ม Call-to-action ให้ดูโดดเด่นขึ้นมา

 

เพิ่มความจัดจ้านด้วยการคอนทราสต์

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

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

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

 

เทคนิคการใช้รูปเข้ามาช่วย

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

    

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

มาดูเทคนิคง่ายๆ กันเลยครับ ที่เรานั้นสามารถนำไปปรับใช้ได้

1. ใช้ Gradient Overlay หรือสร้างการไล่ระดับสีแล้วเททับลงบนรูปภาพมันซะเลย ผู้อ่านสามารถเลือกใช้สีที่แตกต่างกัน 2 สีหรือมากกว่านั้น โดยอิงมาจาก Primary Colors ที่เรากำหนดไว้ก่อนหน้านี้แล้ว

2.ปรับอุณหภูมิสีของภาพหรือนำกลุ่มสีกลางๆ มาใช้เพื่อปรับสีให้สมดุลกัน

3.ลดค่าความอิ่มของสี (Vibrance) ลง เพื่อให้โทนสีของทั้งภาพดูเท่ากัน

4.ปรับรูปภาพให้เป็นสีขาว-ดำ หรือ เกรย์สเกล (Greyscale)

 

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

 

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

 

 

 

 

 

 

 

ข้อมูลจาก: makewebeasy.com