การเลือกโทนสีสำหรับเว็บไซต์ก็เป็นเรื่องที่น่ากลัวอยู่เหมือนกัน โดยเฉพาะอย่างยิ่งเมื่อคุณไม่มั่นใจในทักษะการเลือกสีให้เข้ากันของตัวเอง หรือคิดว่าตัวเองไม่ได้เป็นนักออกแบบที่เก่งนัก
3 ขั้นตอนเลือกโทนสีของเว็บไซต์ที่ควรทำ
มีอยู่ 3 สีหลักด้วยกัน ที่ควรต้องคำนึงถึงเมื่อนำสีมาออกแบบเว็บไซต์เลย
1. เลือก 1 สีหลัก ใช้เป็นสีประจำแบรนด์ของคุณ
สีหลักคือสีของแบรนด์หรือบริษัทของคุณ เช่นสีหลักของโคคาโคล่าก็คือสีแดงนั่นเอง
นี่คือสีที่คุณอยากให้ผู้คนที่ได้เห็นจดจำไว้และนึกถึงคุณเมื่อเห็นมัน
สีนี้จะเป็นสีที่ช่วยโน้มน้าว ปลุกใจให้คนเกิดความรู้สึกบางอย่างที่คุณต้องการให้ผู้ชมรู้สึกเมื่อเข้ามาในเว็บไซต์ เช่น ความตื่นเต้น ความเร่าร้อน ความเชื่อมั่น หรือแม้กระทั่งความหิว
บริษัทและแบรนด์ใหญ่ ๆ ไม่ได้เลือกสีหลักของมาโดยบังเอิญหรือเลือกมาง่าย ๆ แต่จะเลือกโดยใช่กลยุทธ์ต่าง ๆ ที่วางไว้แล้วเพื่อเป็นส่วนหนึ่งในแผนการตลาดและการสร้างแบรนด์ของพวกเขา
2. เลือก 1- 2 สีใช้เน้น (accent colors) เพื่อนำมารวมเป็นโทนสีของเว็บไซต์
ไม่มีใครทนดูเว็บไซต์ที่ทั้งเว็บมีอยู่สีเดียวได้ เพราะฉะนั้น เราจึงต้องทำให้ดีไซน์ของเว็บซับซ้อนมากขึ้น แต่ยังคงความเป็นมืออาชีพไว้ ด้วยการเลือกสีที่ใช้เน้นมา 1-2 สี เพื่อใช้ในการทำให้องค์ประกอบสำคัญของเว็บไซต์ที่เราอยากให้คนเห็นได้ชัดเจนนั้นเด่นชัดขึ้นมา เช่น ปุ่ม call-to-actions เมนู และ หัวข้อต่าง ๆ
จำกัดสีใช้เน้นนี้ไว้ 1-2 สี เพราะถ้ามีมากเกินไป จะทำให้โทนสีหรือพาเลตสีของเว็บซับซ้อนยุ่งเหยิง และจะทำให้ผู้ชมรู้สึกหนักตาเพราะการใช้สีมากเกินไปด้วย
3. เลือกสีพื้นหลัง 1 สี เพื่อทำให้ดีไซน์ออกมาสมบูรณ์
คุณอยากให้ผู้ที่เข้ามาชมรู้สึกสบายตา ไม่ใช่รำคาญตาหรือทำให้เนื้อหาอื่น ๆ มองเห็นยาก อ่านยาก เพราะฉะนั้นเราจึงควรเลือกสีที่ไม่ฉูดฉาดเกินไป หรือกลืนกับตัวหนังสือและองค์ประกอบอื่น ๆ เกินไป
ยกตัวอย่างเช่นในร้านเสื้อผ้า มักจะเลือกเสื้อผ้าสีโดดเด่นมาโชว์บนพื้นหลังที่เป็นร้านค้า เพื่อให้ผู้คนมองเห็นเสื้อผ้าได้ชัดเจนและเดินเข้ามาชมในร้าน
ในทางตรงข้ามกัน คุณคงอยากให้พื้นหลังและองค์ประกอบอื่น ๆ เข้ากันได้ดี วางอยู่ด้วยกันแล้วดูสวยงาม มองแล้วดูไม่ขัดกัน ทำให้รู้สึกสบายตาและผ่อนคลาย การที่จะเลือกเทคนิคไหนนั้น ขึ้นอยู่กับจุดประสงค์ของเว็บไซต์ของคุณเอง
ติดตามเทคนิคและความรู้เพิ่มเติม ที่ yeswebdesignstudio.com
คำถามที่พบบ่อยเกี่ยวกับ Color Scheme เว็บไซต์
เลือก Color Scheme เว็บไซต์ยังไง?
1. ตรง Brand Identity 2. ใช้ 60-30-10 Rule 60% Primary 30% Secondary 10% Accent 3. ตรวจสอบ Color Contrast WCAG AA 4. ทดสอบ Color Blindness 5. ดูจิตวิทยาสีตามอุตสาหกรรม
จิตวิทยาสีในเว็บไซต์?
ฟ้า = Trust, Tech, Finance. แดง = Urgency, Sale, Food. เขียว = Growth, Eco, Health. ม่วง = Luxury, Beauty. เหลือง = Energy, Optimism. ส้ม = Friendly, Innovation. ดำ = Sophistication, Luxury Brand
เครื่องมือเลือกสีเว็บฟรี?
1. Coolors.co สร้าง Palette 2. Adobe Color CC 3. Color Hunt 4. Canva Color Wheel 5. Paletton 6. Material Design Colors 7. Tailwind CSS Colors 8. WebAIM Contrast Checker
ตัวอย่าง Color Scheme เว็บที่ดี?
Apple ขาว+ดำ+ฟ้า Premium. Spotify เขียว+ดำ Energy. Airbnb ชมพู+ขาว Friendly. McDonald แดง+เหลือง Appetite. SCB ม่วง+เหลือง Trust+Energy. Lazada น้ำเงิน+ส้ม Trust+Action
