Bir renk şeması verildiğinde, web sitesi tasarımına nasıl başvurabilirim?


22

Sadece tartışmak için somut bir şey var, bu renk şemasına sahip olduğumu söyle:

bahar tonları renk paleti

Kaynak

Tamamlayıcı renklere, tek renkli renklere vb. Dayalı tutarlı bir renk şemasının nasıl seçileceği hakkında birçok makale var, ancak bir renk setim olduğunda, hangi rengin başlık olduğuna, hangi rengin bağlantı olduğuna, hangi arka plan olduğuna nasıl karar verebilirim ve metin. Işık düzeninde karanlık veya karanlıkta bir ışık istediğime karar versem bile, diğer renkleri ekrana koymak siteyi çirkin gösterebilir.

Hangi renklerin nereye gittiğine karar vermesine yardımcı olan genel kurallar veya genel kurallar var mı?


2
Cevap, güzel görünen şeylere göre onları seçmeniz ve tasarım hedeflerine ulaşmanızdır. Ne yazık ki, bunun için bir formül yok.
DA01

@ DA01 zaten söyledi, ayrıca, herhangi bir web sitesine belirli bir renk şemasını uygulayamazsınız. Bunun yerine renk şemasına web sitesine göre karar verirsiniz.
ikartik90

1
Harika bir soru! Ne yazık ki bu görüntü şimdi 404.
Animesh

Merak edenler için, renk şemasını yukarıdaki ölü bağlantıdan yeniden oluşturdum. Cevaplardan renk kodlarını Picking ve yorumlar beni bu paleti vermek: color.adobe.com/create/color-wheel/...
yaylı olarak

Yanıtlar:


13

Pek çok insanın (katılmadığım) “doğru cevap yok” gibi şeyleri yorumladığını görüyorum ... Kesinlikle en az bir doğru cevap var, belki birkaç tane var ve eminim bir sürü yanlış cevap var, iyi tasarım, mevcut kaynaklara ve zamana dayalı olarak mümkün olan en iyi çözüme ulaşmakla ilgilidir ve elbette böyle bir çözüm birkaç alternatiften daha ağır basacaktır. Tartışma amacıyla bize bir renk paleti verdiniz, bu yüzden bunu yapacağım ve sorunuzu verilen renk paletine göre yanıtlayacağım. (Bununla birlikte çalıştığınız düzeni görmedim, hala oldukça geniş olacak, ancak takip etmeniz için bir süreç olacak.)

Bu nedenle, bir web projesinde bir renk şeması oluştururken seçmeyi sevdiğim ilk renkler, gövde için arka plan ve ana metin rengidir. Normalde bu rolleri doldurmak için en zıt iki rengi seçmek iyi bir fikirdir ve örnek paletiniz bir istisna değildir, bu nedenle renkler # DEE1DD ve # 28363D'dir. Şimdi metin için hangisinin kullanılacağına ve arka plan için hangisinin kullanılacağına karar vermeliyiz ve çoğu durumda arka plan için daha açık rengi ve metin için daha koyu rengi kullanmaya çalışıyorum. Açık renk üzerinde koyu bir rengi koyu renkte açık renkten daha kolay okuduğumuzu göstermek için önemli araştırmalar yapıldı, bu nedenle daha koyu bir görünüm için bir neden olmadıkça (ağır bir metal için bir web sitesi yapıyorsanız gibi) grup ya da başka bir şey ... burada böyle olmadığını varsayacağım). Yani,

Sonra bir sonraki en önemli öğe olan köprüler olduğunu düşünüyorum. Okunması zor olmayacak şekilde arka plandan yeterince kontrast oluşturan, ancak farkedilebilmesi için metinden yeterince kontrast oluşturan bir renk istiyorsunuz. Bu örnekte, daha açık yeşillerin çoğu açık arka plan üzerinde okunaksız olacaktır, bu nedenle en belirgin cevap # 2F575D'dir.

Daha sonra renkli olması gereken bir başlık belirlediniz ve yine arka plandan kontrast oluşturmamız gerekiyor. Minimalizm yararına, vücutta zaten kullandığım renkleri yeniden deniyorum ve yeniden kullanıyorum ve bu durumda metin rengi muhtemelen büyük miktarda alanı doldurmak için çok koyu, bu yüzden # 2F575D'yi seçmeye meyilli olacağım ve Yukarıdaki tüm nedenleri arka plan gövde rengini kullanmak istiyorum # DEE1DD Üstbilgideki herhangi bir metni veya bağlantıları doldurmak için.

Son olarak, vurgulu durumlar gibi temel olmayan tasarım öğelerini ele aldım ve aralarından seçim yapabileceğimiz birkaç farklı yeşillik var. Yine bu muhtemelen arka plandan yeterince kontrast gerekiyor, çünkü bağlantılar üzerlerinde yuvarlanırken kaybolmuyor, bu yüzden # 658B6F ile gitmeye meyilli iseniz ...

Ve ... Voila! Artık (temel) 4 renk düzeniniz var. Umarım bu süreç bana yardımcı olduğu kadar size yardımcı olur :)!


3

Bağlantı verdiğiniz web sitesi size bu renkleri nasıl kullanacağınızı gösteriyor:

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

Normalde tasarımda kendi rengimi sıçrarım - biraz yanlış olduklarını bilsem bile - en azından kabaca iki düz renk veya en az bir tane var. Sonra fikrimi ortaya koyduğumda, ana rengimi (en çok kullandığım) alıp bir renk tekerleğine ekliyorum. Bu şekilde diğer renklerimi değiştiriyorum. Ya da orijinal renklerimin çoğuna sahip görüntüler bulmaya çalışıyorum.

Dediğim makaleleri okudum, bir resim alıp çalışmanızı bu renge göre tasarladım, bunu yapamam. En az bir renk göz önünde bulundurularak kendi tasarımımı yaratıyorum ve sonra renk teorisi tekniklerini kullanıyorum

Umarım yardımcı olur


> Bağlantı verdiğiniz web sitesi size bu renkleri nasıl kullanacağınızı gösteriyor: Doğru, bu benim sorum, bunu kendim anlamaya yönelik 'algoritma' nedir?
Shahbaz

Bir tane olduğunu sanmıyorum. Örneğin, bu rengi o web sitesine eklemek zorunda kalsaydım, onları bu şekilde düzenlemezdim. Örneğin, renkleri burada nasıl kullandıkları, lavishbootstrap.com/?image_url=http://design-seeds.com/palettes/… Bence renk çok güzel ama bence - kötü düzenlenmiş. Yani jus renklerle oynamak zorunda. Mekanik bir yol olduğunu düşünmüyorum - eğer varsa tasarımlarınızla oynamanızı tavsiye ederim ve kullanmayın!
Aurel

3

Ne alacağınız, arka plan ve benzeri olması gereken bir formül yoktur, bu yüzden tasarım bir sanattır.

Normalde sahip olduğum renklerle çok fazla deneme yapacağım, örneğin hangi yazı tipi rengi hangi arka planda daha iyi görünüyor.

Kullanılan renklerin kontrastı olan bir başparmak kuralı olsa da, çoğu insan bunun koyu renk arka plana sahip açık renkli yazı tipi gibi sağduyu olduğunu söyleyecektir. Ardından, uyarı kutuları, gezinme ve benzeri gibi alt bileşenlerin rengini nasıl belirlersiniz ortaya çıkabilir.

Gördüğüm gibi, web sitesi için çıplak yapınıza hazır olmalısınız, daha sonra ana içeriğinizin hangisini, nasıl sunmak istediğinizi belirlemeniz gerekir. Belki de hemen dikkat edilmesi gerekmeyen alt bileşenler üzerinde daha yumuşak bir renk.

İyi olup olmadığını nasıl anlarsınız? Kolay, "Bu güzel" dediğiniz anda, o zaman iyi. Her zaman diğer insanlardan ikinci bir muhalefet almaya yardımcı olur.

Sonuç olarak, renk kombinasyonunu denemeye devam edin, sadece birine yapışmayın ve sonunda elde edebileceğiniz kompozisyondan şaşırabilirsiniz.

@Color Combination: Web sitesi tarafından sağlanan kombinasyon, başlamak için yeterince iyi.


2

İlk eşimin ve büyük bir tuval panelinin ve birkaç akrilik boya tüpünün olduğu bir zamanı hatırlattım. Tuvali yere koyuyoruz ve amaçsız bir şekilde rastgele renklerle fışkırdık. Kurumasına izin verdik ve sonra şöminemizin üzerine astık. Zamanla, birkaç konuk ne kadar harika göründüğünü yorumladı ve pahalı bir sanat eseri olduğunu düşündü ... yani, nasıl boyanacağını söyleyene kadar. Her şey bakanın gözündedir.

Bu hikayeyle ilgili olarak, izleyicilerin çoğuna çirkin, uyumsuz renk kombinasyonlarının olduğunu kabul ettiğimi söylemeliyim. Ancak, çok fazla yok. Ne hakkında çok fazla stres gerektiğini sanmıyorum Doğru şekilde alma . Web sitesinde bulunanlar, çok sayıda kötü renk seçimini telafi edebilir. İçerik her zaman tasarımı koyacaktır.

Sitemizi kullandığınızda şunları okuyup anladığınızı kabul etmiş olursunuz: Çerez Politikası ve Gizlilik Politikası.
Licensed under cc by-sa 3.0 with attribution required.