Please enable JavaScript.
Coggle requires JavaScript to display documents.
บทที่ 2 การเลือกใช้สีที่เหมาะสม - Coggle Diagram
บทที่ 2
การเลือกใช้สีที่เหมาะสม
ส่วนประกอบสำคัญบนหน้าเว็บเพจ
ส่วนหัวของหน้า (Header) อยู่ตอนบนสุดของหน้าและเป็นส่วนที่สำคัญที่สุด โดยจะต้องทำให้สามารถดึงดูดผู้ชมให้รู้สึกอยากติดตามเนื้อหาในเว็บไซต์ต่อไปซึ่งส่วนใหญ่ก็มักจะมีการใส่ภาพกราฟฟิคให้ดูสวยงามสิ่งสำคัญหลักๆเลยก็คือโลโก้ชื่อเว็บไซต์และเมนูหลักที่สามารถลิ้งค์ไปยังเนื้อหาในหน้าเว็บเพจต่าง ๆ ได้
ส่วนของเนื้อหา (Body)อยู่บริเวณตอนกลางของหน้าเว็บ โดยจะแสดงข้อมูลเกี่ยวกับเนื้อหาบนเว็บแบบคร่าว ๆ ซึ่งก็จะมีข้อความ กราฟฟิค ตารางข้อมูลหรือวิดีโอประกอบอยู่
ส่วนท้ายของหน้า (Footer)อยู่ล่างสุดของหน้าเว็บ ซึ่งจะมีหรือไม่มีก็ได้ ส่วนนี้จะแสดงถึงข้อมูลต่างๆเพิ่มเติมเข้าไปเช่นข้อความที่แสดงถึงการเป็นลิขสิทธิ์ข้อมูลเจ้าของเว็บไซต
การเลือกใช้สีสำหรับการออกแบบเว็บไซต์
สีโทนร้อน (Warm Colors) เป็นสีแห่งความอบอุ่น ปลอบโยนและกระตุ้นความสุขได้ดี ซึ่งจะทำให้ผู้เข้าชมรู้สึกมีชีวิตชีวาและมีแรงผลักดันมากขึ้นอีกทั้งยังช่วยดึงดูดให้ผู้ชมรู้สึกอยากติดตามเนื้อหามากขึ้น
◦สีแดง -ปราดเปรียว, อารมณ์, ความรัก, ความแข็งแกร่ง, ความรัก, ความรุนแรง
◦ชมพู -หวานโรแมนติก ขี้เล่น อบอุ่น มีเมตตาเห็นอกเห็นใจ
◦ส้ม -อบอุ่นความกระตือรือร้นความสาเร็จความมุ่งมั่นเป็นมิตร
◦สีเหลือง -อ่อนเยาว์มีชีวิตชีวา สดชื่น มองโลกในแง่ดี
สีโทนเย็น (Cool Colors) เป็นสีแห่งความสุภาพและความอ่อนโยน ทำให้ผู้ชมรู้สึกผ่อนคลายและเพลิดเพลินมากขึ้น และยังสามารถใช้โน้มน้าวจากในระยะไกลได้อีกด้วย
◦สีเขียว -สดชื่น, สงบ, ผ่อนคลาย, เชื่อถือได้, เงียบสงบ, มีความหวัง, เยียวยา
◦สีน้าเงิน-ความสะดวกสบาย ความชัดเจน ความสงบ ความน่าเชื่อถือ ความซื่อสัตย์ ความภักดี
◦สีม่วง -ความเย้ายวนใจ, พลัง, ความคิดถึง, ความหรูหรา, ความทะเยอทะยาน, จิตวิญญาณ
สีโทนกลาง (Neutral Colors)สีเหล่านี้มักจะถูกนำไปผสมกับสีอื่น ๆ เพื่อให้เกิดสีที่เป็นกลางมากขึ้น และให้ความรู้สึกที่เป็นธรรมชาติ
◦สีเทา -การเคารพ ปัญญา ความอดทน ความทันสมัย ความยืนยาว ความเฉลียวฉลาด
◦สีดำ -ทรงพลัง, กล้าหาญ, จริงจัง, สง่างาม,หรูหรา, น่าทึ่ง, เป็นทางการ
◦น้าตาล-มิตรภาพ, โลก, บ้าน, ความน่าเชื่อถือ, ความเรียบง่าย, ความอดทน
จิตวิทยาแห่งสีและการจดจำแบรนด์
สีเป็นตัวทำหน้าที่หลักในการดึงดูดความสนใจ สร้างความปรารถนาและสร้างลอยัลตี้ต่อผู้เข้าชมเพราะบางครั้งการเห็นแค่สีที่ถูกเลือกมาอย่างเหมาะสมสามารถทาให้ผู้บริโภคมองเห็นถึง แบรนด์ที่คุ้นเคยได้โดยไม่ได้เห็นแม้โลโก้แบรนด์
◦ร้านอาหารมักจะเป็นสีแดงและสีส้ม
◦ธนาคารและสถาบันการเงินมักจะเป็นสีน้าเงิน
◦ผลิตภัณฑ์หรูหรามักบรรจุในแพคเก็จสีดe
◦โรงแรมมักจะเป็นสีขาวสีน้าเงินสีดาหรือสีเขียว
การใช้ทฤษฎีสีในการออกแบบเว็บ
โครงสร้างที่ยอมรับกันทั่วไปนั้นมี3 อย่าง คือ
◦triadicการเลือกใช้สีแบบสมดุลใช้รูปสามเหลี่ยมในวงล้อสี
◦analogue colorsสามสีเรียงกันเป็นโทนสีที่ใช้สีถัดไปในวงล้อสี
◦complementaryเลือกใช้สีคู่ตรงข้ามสร้างความโดนเด่นกระตุ้นอารมณ์
การเลือกโทนสีหลัก ในการเริ่มต้นการออกแบบเว็บเป็นอันดับแรกคือการสร้างสีหลักสาหรับแบรนด์ของคุณสิ่งนี้ควรพิจารณาจากโลโก้หรือองค์ประกอบอื่น ๆ ของแบรนด์ แต่ถ้าทำไม่ได้ ให้ใช้จิตวิทยาสี
การพัฒนาโทนสีและเฉดสีเมื่อมีสีหลักในใจส าหรับเว็บไซต์แล้ว บางเว็บไซต์สามารถใช้เพียงแค่สีเดียวส าหรับการออกแบบ แต่โดยส่วนใหญ่แล้วต้องการเฉดสีหรือสีอ่อนๆ อย่างน้อยสองสามสี และไม่ควรใช้สีหลักตลอดการออกแบบทั้งชิ้นงานโดยสามารถลดระดับความอ่อนเข้มของโทนสีเพื่อสร้างความหลากหลายบนเว็บไซต์ ในขณะที่ยังคงสีฐานเดิมไว้ โดยหนึ่งในวิธีที่ดีที่สุดส าหรับการเลือกสีคือ Adobe Color Wheel ที่จะช่วยตั้งค่าตัวเลือกกลางให้เป็นสีหลัก แล้วเล่นกับกฎสี เครื่องมือนี้ใช้งานง่ายและสามารถช่วยได้มากเมื่อส ารวจโทนสีส าหรับเว็บไซต์
กฎ 60-30-10การปฏิบัติการตามกฎ 60-30-10 ซึ่งออกแบบโดย JPSDesignเทคนิคนี้ง่าย แต่มีประสิทธิภาพสาหรับการผสมสีที่ต่างกันนั่นคือควรผสมสีในสัดส่วน60% -30% -10% แต่ไม่จำเป็นต้องออกแบบด้วยสามสีเสมอไป แต่วิธีนี้ถือว่าเป็นจ านวนที่สมดุลมากที่สุดหากเลือกใช้วิธีนี้ วิธีการก็คือ 60% ควรเป็นสีเด่น 30% เป็นสีรองและ 10% เป็นสีที่ใช้เน้น เพราะสัดส่วนนี้เป็นที่พอเหมาะต่อสายตาของมนุษย์เนื่องจากจะช่วยให้องค์ประกอบภาพปรากฏออกมาทีละน้อย
ทำงานกับรูปภาพหากมีภาพอยู่ในใจที่สามารถกำหนดแบรนด์หรือลูกค้าได้ จงเลือกภาพที่สามารถดึงสีหลักจากที่นั่นแต่การทางานกับภาพหลายภาพอาจเป็นเรื่องยุ่งยากเพราะจะต้องหาวิธีในการสร้างความกลมกลืนของสีในการออกแบบ แต่ก็มีหลายวิธีในการปรับสมดุลภาพ
◦เปลี่ยนให้เป็น ระบบสี Grayscale
◦ปรับความสั่นไหวของภาพเพื่อลดโทนสี
◦ใช้สีธรรมชาติเพื่อปรับสมดุลของภาพ
◦สร้างการไล่ระดับสีด้วยเฉดของสีที่เลือกเพื่อออกแบบเว็บ
ความแตกต่างความแตกต่างของสีเป็นส่วนส าคัญขององค์ประกอบภาพ ตัวอย่างเช่นหากต้องการให้ผู้เข้าชมใส่ใจเป็นพิเศษกับพื้นที่เฉพาะของเว็บไซต์ (เช่นปุ่ม CTA) สามารถใช้สองสีที่แตกต่างกัน เช่น การจับคู่สีอย่างสีส้มและสีเขียวหรือสีแดงและสีน้าเงินสาหรับพื้นหลังและปุ่มแต่ต้องใช้อย่างระมัดระวังแนะนาให้ใช้แค่ที่ต้องการเน้นจะเหมาะกว่าเพราะหากใช้ทั้งหมดจะทาให้อ่านข้อความยาก
การเลือกใช้โทนสี
Monochromeโมโนโครม คือ จอภาพสีเดียว การเลือกใช้สีโทนเดียวเพียงแต่เราจะเพิ่มValueหรือ Saturationเข้าไปท าให้เกิดน้าหนักอ่อน-แก่
Dyadการเลือกใช้สองสีที่ตรงกันข้าม เพื่อให้เกิดเป็นภาพคู่สีที่มีความแตกต่างกัน เกิดเป็นความสวยงามและความแตกต่างอย่างลงตัว
Triadการใช้สีให้เข้ากันเป็นรูปสามเหลี่ยมจัตุรัส ซึ่งสามารถทำได้โดยวาดรูปสามเหลี่ยมบนวงล้อสี ก็จะได้สีที่เข้ากัน
Split Complementaryการเลือกสีจะมีลักษณะคล้ายๆ กับ Triad คือลักษณะการเลือกโทนสีนั้นจะเป็นรูปสามเหลี่ยมเช่นกัน แต่ฐานของสามเหลี่ยม Split Complementary นี้จะแคบเข้า
5.Analogousการเลือกใช้โทนสี 3สีที่ติดกัน
6.Tetradการเลือกโทนสีให้เป็นแบบสี่้หลี่ยม
