เมื่อใช้ชุดรูปแบบสีฉันจะใช้กับการออกแบบเว็บไซต์ได้อย่างไร


22

เพื่อให้มีสิ่งที่เป็นรูปธรรมที่จะพูดคุยว่าฉันมีโทนสีนี้:

โทนสีฤดูใบไม้ผลิ

แหล่ง

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

มีกฎของหัวแม่มือหรือแนวทางทั่วไปที่ช่วยให้คนตัดสินใจว่าสีไหนไปไหน?


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

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

1
เป็นคำถามที่ดีมาก! น่าเสียดายที่ภาพนั้นเป็น 404 ในขณะนี้
Animesh

สำหรับผู้ที่สงสัยฉันได้สร้างชุดรูปแบบสีใหม่จากลิงก์ตายด้านบน การเลือกรหัสสีจากคำตอบและความคิดเห็นให้จานสีนี้: color.adobe.com/create/color-wheel/…
สปริงโหลด

คำตอบ:


13

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

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

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

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

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

และ ... Voila! ตอนนี้คุณมีรูปแบบสี 4 แบบ (ขั้นพื้นฐาน) ฉันหวังว่ากระบวนการนี้จะช่วยคุณได้มากเท่าที่มันช่วยฉัน :)!


3

เว็บไซต์ที่คุณเชื่อมโยงไปถึงแสดงวิธีใช้สีเหล่านั้น:

#28363D for the active state 
#2F575D as the navigation background 
#DEE1DD as background 
#C4CDC1 as banner ...

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

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

หวังว่ามันจะช่วย


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

ฉันไม่คิดว่าจะมีอย่างใดอย่างหนึ่ง ตัวอย่างเช่นหากฉันต้องเพิ่มสีเหล่านั้นในเว็บไซต์นั้นฉันจะไม่ได้จัดเรียงสีเหล่านั้นในลักษณะนั้น ตัวอย่างเช่นวิธีที่พวกเขาใช้สีที่นี่lavishbootstrap.com/?image_url=http://design-seeds.com/palettes/…นั้นน่ากลัวในความคิดของฉันถึงแม้ว่าสีจะดีมาก แต่ - ในความคิดของฉัน - จัดไม่ดี ดังนั้นคุณต้องเล่นกับสี ฉันไม่คิดว่าจะมีวิธีช่าง - ถ้ามีฉันอยากจะแนะนำให้คุณเล่นกับการออกแบบของคุณและอย่าใช้มัน!
aurel

3

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

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

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

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

คุณจะรู้ได้อย่างไรว่าดีหรือไม่? ง่ายทันทีที่คุณพูดว่า "สิ่งนี้ดี" นั่นคือเมื่อใดก็ตามที่มันดี มันจะช่วยให้ได้รับการคัดค้านครั้งที่สองจากคนอื่น ๆ

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

@ การรวมสี: ชุดค่าผสมที่จัดทำโดยเว็บไซต์นั้นดีพอที่จะเริ่มต้นด้วย


2

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

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

โดยการใช้ไซต์ของเรา หมายความว่าคุณได้อ่านและทำความเข้าใจนโยบายคุกกี้และนโยบายความเป็นส่วนตัวของเราแล้ว
Licensed under cc by-sa 3.0 with attribution required.