Web tasarımında Renk: Kullanıcı istediği duyguyu neden nasıl
İpuçları / / December 19, 2019
İnsanlık tarihi boyunca usta-sanatçılar nedeniyle renk ile çalışmak için yeteneği evrensel tanıma aldı. reklam ve web tasarım - Günümüz dünyasında ticaret ve iş amaçlı renkleri birleştirmek edebiliyoruz az tanıma uzmanları, almazlar.
Kullanım renkleri yeteneği sonsuza kadar pompalanır. İnsan maruz kalma fırsatların gerçek derinliği var.
Biz renk teorisi ve renk düzeni temelleri hakkında size ve sonra belirli renklerin duygusal etkisi bahsedeceğiz.
renk teorisi
renk teması, çok biz tamamen üstelemezler, bütün bir kitap adamak ve arayüz tasarımı geliştirme kullanılabilecek yararlı bilgiler, yetiniyoruz edebilirsiniz.
Bu üç bölüme renk teorisi ayrılabilir:
kontrast
Her gölge tabiri caizse, tersidir, bu renk ile büyük tezat onun "yeminli düşman" nin. Bir renk bulmak için, renk tekerleğini kullanabilirsiniz. Basitçe dairenin karşı tarafında renk seçin.
ilave
Bu renkler her zaman birbiriyle çakışmaz. Tamamlayıcı renkler kontrast aksine birbirini vurgulamak. mavi ve pembe - renk çarkı, bu tür renkler böyle mor tamamlayıcı renkler olarak birbirine vardır.
rezonans
Her renk belirli bir ruh halidir. Parlak sıcak renkler insan enerjisi ile dolu (kırmızı, turuncu, sarı), bunu uyandırmak, soğuk koyu renkler (yeşil, mavi, mor), tam tersine, dinlenmek ve yatıştırmaya.
Örneğin, BBC News onun heyecanlı devleti güçlendirme, okuyucuyu uyandırmak için kırmızı gezinme çubuğunu kullanın. Sitenin özgüllüğü verildiğinde - sansasyonel haberler - kırmızı mantıklı bir çözümdür.
web tasarımında renk teorisi - sadece dekorasyon daha fazladır. Renk sitenizin algısını değiştirmek ve işinizde önemli bir rol oynayabilir.
rengin Duygusal algı
Hiç kimse renk ve duygu yakın etkileşimi inkar edecektir. Ve tabii ki, herhangi bir web tasarımcısı her site için belirli bir atmosfer yaratmak için bu etkiyi kullanmak istiyor.
Birkaç çalışmalara dayanarak - analizde, web sitesinde yayınlanan Vandelay TasarımVe renklerin postalıyorsanız Smash Dergisi - biz renkler duygular ve yardım UX-tasarım oluşturmak nasıl etkilediğini açıklar.
Dünyada farklı kültürler rengin farklı algılara sahip olduğunu hatırlamak önemlidir. Biz Batı kültürüne özgü duygusal ilişkileri açıklanacaktır.
kırmızı
Duygular ve dernekler: Güç, önemi, gençlik.
en tahrik edici rengi, bu yüzden enerji yüklü, hatta kan basıncını arttırabilir. Kırmızı daha başka renkler daha çok sık önemli uyarılar ve duyurular için kullanılan, dikkat çekmek tutku ve gücü temsil eder.
Örneğin, kırmızı çok uygundur sitesidir Olmaz NSAKimin amacı - iddia edilen tehditleri önlemek için.
Sayfanın en kırmızı bir sürü kullanın - bu mesajda önemli bilgilere dikkat çeker, çünkü bu büyük bir çözümdür. Aynı zamanda, insanlar hızla kırmızı rengin "tehlike bölgesi" bırakın ve aşağı kaydırmak eğilimindedir. Bu da, kullanıcının daha fazla içerik göstermesini sağlar.
o saldırganlık veya aşırı uyarılma neden olabilir, çünkü Ama bu renk, size karşı çalışabilir. Eğer daha rahat bir atmosfer yaratmak istiyorsanız, orta kırmızı kullanmak ve kırmızı hafif gölgeler seçmeye çalışın.
turuncu
Duygular ve dernekler: dostu, enerji ve tekliği.
Sıcak tonlarda en sessiz olarak turuncu çeşitli duyguların bütün spektrumunu neden olabilir. Temel renk olarak, ilgi ve desteğin olabilir, ve ikincil olarak - müdahaleci olmayan bir şekilde bu özellikleri muhafaza fakat.
Buna ek olarak, Portakal hareket ve enerji hissi oluşturmasına yardımcı olur. Örneğin, karikatür web sitesinde harika görünüyor FantaHangi gençlik ve hareketin düşündürür. tanıdık marka duygusu korurken Renk, yaratıcılıkla ilişkilidir.
sarı
Duygular ve dernekler: mutluluk, coşku, archaism (koyu renk).
Bu renkler ve onun yarattığı duyguları çok yönlü çoğu biridir büyük bir ölçüde gölgede bağlıdır.
Açık san renkli enerji ekler, kırmızı mevcut olan şiddeti ve sertlik olmadan. Hala dinç olsa sarı renklerin Orta tonları, rahatlık duygusu uyandırmak. (Altın dahil) Koyu tonları antik duygusu sağlamak, uzay zamansızlık, bilgelik ve merakı doldurun.
Örneğin, web tasarım ajansı ana sayfasındaki flaş Medya Sarı tonlu terlemek enerji, merakı ve otorite daha koyu. Bu renk kendi istişareler kazanmak ve onların profesyonellik vurgulamak isteyen şirketler için idealdir.
yeşil
Duygular ve dernekler: Büyüme, istikrar, çevre temasını çevreleyen finans konular.
Yeşil - daha soğuğa sıcak ve serin gölgeler, ancak bilgisayar belleği arasında bir köprü. Bu araçlar o yeşil rahatlatıcı etkisi mavi rengi vardır, ama aynı zamanda sarıdan canlılığı biraz vardır.
Sonuç olarak, bu çok dengeli ve istikrarlı bir ortam yaratır. yeşilin koyu renk tonlarından hem online, bolluk ve zenginlik izlenimi yaratmak Ameritrade.
mavi
Duygular ve dernekler: zihin, güvenlik, açıklık (hafif gölge), güvenilirlik (koyu tonları) barış.
Sarı renkte durumunda olduğu gibi, etkisi mavi tonlarda son derece bağlıdır. Mavinin tüm tonları rahatlama ve güvenlik açısından çok yönlü, ama parlak renkler samimiyeti ve karanlıkta ilişkili - üzüntüyle.
Twitter ve Facebook gibi sosyal ağlar mavinin daha hafif ve orta tonları kullanılır ve kurumsal siteler güç ve güvenilirlik koyu tonlarını tercih ederim.
Buna en iyi örnek - olay tasarım ajansı Van Vliet & Tuzak. arka plan olarak mavi renk kullanarak, görsel çiçek tasarımı konusundaki bilgi ve becerilerini ima değil, aynı zamanda güvenilirlik ve güven duygusu yaratılır.
Onlar düğün ile örneğin görsel kısmı için önemli olan olaylar, çalışmak gibi bu, büyük önem taşımaktadır.
mor
Duygular ve dernekler: lüks, romantizm (ışık tonları), mistisizm ve sır (koyu renkler).
Mor renk tarihsel olarak kraliyet ihtişam, lüks de ipuçlarıyla ilişkilendirilmiştir. Mor tonları, örneğin, onlara moda ve lüks mallar için mükemmel bir seçim (hatta çikolata kılan bir bütün olarak cömertlik ve zenginlik, yansıtmak CadburyKim) yaptığı marka rengini seçti.
koyu renk tonlarının daha şık ve gizemli görünür oysa böyle lavanta (eklenmesiyle mor pembe) olarak Çakmak tonları, romantizm ile ilgili düşündürücü.
siyah
Duygular ve dernekler: Gücü, kültürü, sinirlilik.
Siyah - - hemen her web sitesinde göründüğünü nötr renklerin en güçlü. Bu aşırı kullanıldığında farklı dernekler, onlara eşlik rengine bağlı veya hakim neden olabilir.
gücü ve siyah tarafsızlığı o büyük metin bloklarını için mükemmel bir seçim yapar, ama hatta sinirlilik hissi oluşturabilir veya ana renk kötülük ilişkilendirilebilir.
Çoğu site için siyah zarafet duygusu oluşturmak için kullanılır. siyah ve beyaz minimalist tasarımın birleşimi sitesinde hem şıklık ve tarz izlenimi verir Rüya ve Reach Şirket BOSE.
beyaz
Duygular ve dernekler: saflık, sadelik, iyilik.
Batı kültüründe, beyaz saflık, iyilik ve masumiyet ile ilişkilidir. Bu renk genelde minimalist ve sade sitelerin arka plan için kullanılır.
Buna ek olarak, renklerin hiçbiri beyaz gibi diğer renkler için bu kadar dikkat çekmek için izin vermeyecektir. Örneğin, web sitesi Bütün çalışmalarında Toshev Awwwards Kloina kazanan sadece illüstrasyonlar ayırır beyaz zemin üzerine yerleştirilir ve zarif bir galerinin izlenimi yaratır edilir.
gri
Duygular ve dernekler: tarafsızlık, formalite, melankoli.
Bazı durumlarda gri bir kasvetli ve melankolik atmosfer yaratabilirsiniz olmasına rağmen, hala sık sık profesyonel tasarımcılar tarafından kullanılır.
tonlarında şey: Onları alternatif, siyah beyaz hem yol açtığı tüm duyguları alabilirsiniz. Genel olarak, gri - Doğru ellerde güçlü bir araçtır.
Ama gri arkaplan tasarımında daha canlı renklerle birlikte modern fakat kasvetli, gibi görünüyor Awwwards.
bej
Duygular ve dernekler: diğer renklerin karakterini taşır.
Kendi başına, oldukça donuk ve ifadesiz bej, ama dikkate değer bir özelliği vardır: bej onu çevreleyen renk karakterine bürünür. o kısıtlama bej ifade etmek değil amaçlanan nedenle, bir arka plan veya ikinci renk olarak hizmet vermektedir.
bej Koyu tonları gelenek ve sıradan duygusu yaratmak, daha taze ve daha modern görünüyor kağıt ve çakmak tonlarının doku hissi verir.
örnek bünyesindeki restoranda için Dishoom geleneksel mutfak yeni bir bakış - adları ve koyu kenarlarda açık bej rengi bu restoran izlenimi verir.
fildişi
Duygular ve dernekler: konfor, zarafet, sadelik.
Fildişi ve krem beyaz hemen hemen aynı duyguları üretirler. minimalizm korurken, daha büyük bir rahatlık hissi yaratan beyaz dışında Ancak fildişi sıcak (veya daha az steril).
Bunu ve daha koyu renkler arasındaki kontrastı yumuşatmak için beyaz yerine fildişi kullanabilirsiniz. Örneğin, site Benim Coffee Sanat kahverengi-turuncu elemanları sıcaklık hissi korur (grimsi görünüyor) bir fildişi zemin üzerine yerleştirilir.
renk tayfı
Her site ana renkler daha büyük bir boşluğu doldurmak için kullanılan hangi renk aralığı vardır. Daha önce de söylediğimiz gibi, bu renklerin kullanımı çoğunlukla bilinçsizce zihin ve ruh etkiler. Yani dikkatle seçin.
renkleri birleştirmek için birçok yol vardır gerçeğine rağmen, biz durulacak üç en başarılı ve yaygın olarak kullanılan.
Üçlü (üçlü uyum üçgen)
Triad - üç renk ana ve en dengeli sistemi. Bu rezonans ve renkler eklenmesini kullanır, ancak karmaşık bir kontrast yüzünden üçlü en güvenilir aralık ne olduğu vardır.
bir ana arka plan için renk ve içerik ve navigasyon çubuğu için iki: 12 renk renk tekerleği üzerinde, birbirlerinden 120 derece bulunan herhangi üçünü seçin.
Çift tamamlayıcı sistem
Bu aralık uygulamak daha zordur, ancak uygun maliyetli bir çözüm olabilir. İki zıt ve iki ek: Dört renk kullanılır.
sayfa derece böyle bir şema dayalı Florida Flourish, nasıl göründüğüne bakın. Bitki ve metnin bloklarda Kırmızı ve yeşil renk kontrastı ve mavi arka plan ve portakal çöl etkili bir resmi tamamlamaktadır.
Analoglar (sıralı sistem)
Gama benzer renkler esas olarak tamamlayıcı renk kullanır. Bu, bazı nitelikleri vurgulamak ve bazı duygular neden en açık verir.
Örneğin, kırmızı, turuncu ve sarı vurgular canlılığı ve canlılık bir arada. Böyle ölçekte kullanılması çok basittir, ancak kombinasyon dahil edilecek hangi renk seçmek zor. o yanlış olamaz böylece Onların etkisi abartılı olacaktır.
Örneğin, sitenin tasarımında mavi, turkuaz ve yeşil renklerin kullanımı Blinksale Barış ve huzur ortamı yarattı. Sarı renk önemli noktaları vurgulamak için kullanılır nasıl dikkat edin.
Bu sadece etkileyici bir özel tasarım oluşturmak için yardımcı olabilir renk teorisi temelleri, ve sitenizde renkler açısından ne kadar ileri gidebileceğimizi herhangi bir sınırlama yoktur.
Araçlar bir renk seçmek için bir yardımcı
Neyse ki, yardım pratiğe renk teorisi getirdiği birçok araç bulunmaktadır. Onun yaratılmasına sıfırdan başlamak zorunda değildir, bu paletleri deneyin:
- Adobe Renk CC, Daha önceden Adobe Kuler olarak da bilinir. Bu seçme renklerde en güvenilir araçlardan biridir.
- Paletton. Eğer hızlı renk seçimi için basit bir aracı gerekirse, Paletton mükemmeldir.
- Düz UI Renk Seçici. mükemmel bir araç kullanıcı arayüzü renkleri seçin.
Bu araçlar size uygun etmezsek, burada başka bir var paletleri ile 28 siteler Renk seçimi için ve farklı araçlar.
renk ve duygular arasında doğrudan bir ilişki
Kullanıcılar nadiren haber hatırla ve arka plan, gezinti çubuğu, bireysel parçaların rengini takdir ediyorum ama o renk onlardan etkilenmez anlamına gelmez. Sadece bu bilinç altında gerçekleşir.
Kullanıcı yapar, site veya marka ilişkidir, herhangi bir duyguyu yaşamaya Belirli eylemler: tersine, o eylem için istemi veya düğmeleri değil tıklayıp aşağı kaydırarak onları fark. Ve renk bu çok büyük bir rol tümünde oynar.
yorumlarınızla web tasarımı, lütfen payındaki renk kullanımı üzerinde tavsiye varsa.