5 ตัวเลือกสีที่คุณต้องหลีกเลี่ยงอย่างยิ่งเมื่อออกแบบเว็บ

เผยแพร่แล้ว: 2016-07-06

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

สำหรับมืออาชีพด้านการออกแบบ นั่นไม่ใช่ปัญหามากนัก พวกเขามีความเข้าใจอย่างลึกซึ้งในทฤษฎีสีและจิตวิทยาสี

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

ดังนั้นคุณต้องหลีกเลี่ยงสีใดในหน้าเว็บของคุณ

เพียวแบล็ค

มาเริ่มกันที่ black - pure black - สิ่งที่เข้ารหัสเป็น #000000 ใน HTML

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

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

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

5 ตัวเลือกสีที่คุณต้องหลีกเลี่ยงอย่างยิ่งเมื่อออกแบบเว็บ 1

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

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

สีนีออนในองค์ประกอบอินเทอร์เฟซ

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

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

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

5 ตัวเลือกสีที่คุณต้องหลีกเลี่ยงอย่างยิ่งเมื่อออกแบบเว็บ 2

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

กฎทั่วไปที่จะครอบคลุมตัวเลือกสีสองสีแรกที่ควรหลีกเลี่ยง คือการหลีกเลี่ยงสีที่ในการเข้ารหัส HTML มีความโดดเด่นในสเปกตรัมสี - ค่าศูนย์และ Fs โดยเฉพาะอย่างยิ่งในพื้นหลังข้อความและข้อความ ชนพวกเขาให้ห่างจากสีที่บริสุทธิ์อย่างไม่เป็นธรรมชาติเล็กน้อยและพวกเขาจะประมวลผลได้ง่ายขึ้นและทิ้งความประทับใจให้กับผู้เยี่ยมชมของคุณมากขึ้น

ชุดค่าผสมที่มีคอนทราสต์สูงเกินไป

นอกจากการหลีกเลี่ยงสีที่บริสุทธิ์เกินไปแล้ว ให้ระวังการผสมสีบางสีด้วย

แม้ว่าจะเป็นแก่นของเทศกาลคริสต์มาส สีแดงและสีเขียวก่อให้เกิดปัญหามากมายในการออกแบบไซต์ - มากเสียจนบทกวีเล็กๆ ในหมู่นักออกแบบดำเนินไปว่า "ไม่ควรเห็นสีแดงและสีเขียว หากไม่มีสีคั่นกลาง"

นั่นเป็นเพราะวิธีที่สมองประมวลผลสองสีนั้น สีแดงลงทะเบียนเป็นสีที่อบอุ่นที่สุดและกระตุ้นกิจกรรมในสมอง เป็นสีที่ได้รับความสนใจอย่างรวดเร็วที่สุด สีแดงทำให้สมองปั่นป่วน

5 ตัวเลือกสีที่คุณต้องหลีกเลี่ยงอย่างยิ่งเมื่อออกแบบเว็บ 3

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

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

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

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

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

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

ชุดค่าผสมคอนทราสต์ต่ำเกินไป

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

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

5 ตัวเลือกสีที่คุณต้องหลีกเลี่ยงอย่างยิ่งเมื่อออกแบบเว็บ 4

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

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

พื้นหลังหลากสี

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

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

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

5 ตัวเลือกสีที่คุณต้องหลีกเลี่ยงอย่างยิ่งเมื่อออกแบบเว็บ 5

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

บทสรุป

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

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

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