Rengi ile Profesyonel Bir Bakış Nasıl Gidilir?

Bir tasarımı koordine, planlı ve profesyonel yapan nedir? Cevap: 'renk' .

Her projenin profesyonel görünmesi için şirket maviliğine ihtiyacı yoktur. Renk planlama, hangi renklerin kullanılacağını ve bunları nasıl kullanacağını açıklayan bir çerçeve oluşturmak anlamına gelir.

Renk en kaygan tasarım öğesidir. “İyi” renkler , kişisel zevk ve sezgi gibi zor şeylere ve kontrast ve monitör kalibrasyonu gibi teknik hususlara çok yakındır.

Ancak renk içerik açısından hayati önem taşır . Bir web sitesinin zaman geçirmesi için yeterince önemli olduğunu düşünürseniz, okuyucular büyük olasılıkla zaman okuması için yeterince önemli olduğunu düşüneceklerdir. İyi renk seçimleri bunu gerçekleştirir.

Bu yazıda web tasarımlarınız için güzel renk paletlerini elde etmek için bazı teknikleri inceleyeceğiz .

Bir web sitesinin planlanmamış görünmesinin en iyi yolu, renklerini rastgele seçmektir.

Ziyaretçiler bir web sitesinin ana sayfasını ilk kez kaydıklarında bile , renkler içeriğe karşı tutumlarını etkiler . Bu web sitesi heyecan verici mi? Temin etmek? Cesur? Mülayim? Siyasi? Biçimsel?

Renk, insanların tipografi kadar gördüklerini nasıl yorumladıklarını etkiler.

Doğru renkleri bulmak kolay değildir, ancak süreç sistematik olabilir.

İyi tasarım stratejisi, bir renk şemasını (yani bir ruh halini veya mesajı iletmek için seçilen bir renk aralığı) ve bu şemanın bir düzenlemesini içerir.

Profesyonel bir web sitesi tasarlamanız istendiğini varsayalım. (Ve bu çok iyi bir içki oyununa dönüşebilir: Müşterinin “profesyonel”, “temiz” veya “modern” kelimesini kullandığı her seferinde bir çekim yapın. “Bu diğer web sitesini sevdim. Kopyalayın.”).

Renk şeması, web sitesinin özel niteliğine bağlı olacaktır. Örneğin, hem bankalar hem de çiçekçiler profesyonel görünümlü web sitelerine sahip olabilirler.

Ancak insanlar kurumsal mavi ve okyanus grisi olan bir web sitesinden çiçek almak için daha az eğilimli olabilirler. Ve Amerika Bankası'nın internet sitesini lila ve sarı-yeşil renklerde hayal edin.

“Profesyonel” bir tasarım, ziyaretçilere konularını ciddiye alan bir web sitesi bulduklarını söyler, bu konu hafif yürekli olsa bile. Tonlar ve değerler ne olursa olsun, “profesyonel” koordine, planlanmış ve düşünülmüş anlamına gelir .

Gri Tonlamalı Git

Renkle çalışmanın en iyi yolu, hiçbiri ile başlamaktır.

Bir tasarımdan rengi kaldırmak, hangi tablo şeması gölgesinin en iyi şekilde çalıştığı konusunda endişelenmeden önce ele alınması gereken temel sorunları ortaya çıkarmaktadır. Tasarım siyah beyaz renkte değil ise, değişiklik yapma zamanı.

Her sayfanın net bir amacı var mı? Tasarım içeriği içeriğe yönlendiriyor mu? İçerik çekici, ilham verici veya bilgilendirici mi? Başlıklar açık mı? Linkler diğer metin ile kontrast mı? Renk bu etkileri geliştirir, ancak düzen, yazı tipi ve organizasyondaki sorunlar tek başına renk ile çözülemez .

Yeniden tasarım yapmak için, önce rengi emdirin. Aşırı doymuş primerleri yıkamanın basit etkisi, bir web sitesinin nerede durduğunu gösterir. (Aslında, hedeflerinizi ve içeriğinizi yeniden değerlendirerek yeniden tasarlamaya başlamalısınız, ancak bu başka bir hikaye.)

Bazen rengi çıkarmak kendi içinde bir çözümdür .

Bir zamanlar kendi web sitesini yeniden tasarlamak için bir web tasarım şirketi ile çalıştım. Sahipleri proje hakkında kişisel ve doğru almak için istekliydi. Ama eğer kendiniz için tasarlamayı düşünüyorsanız, bunu komite tarafından yapmayı deneyin. Sonunda, üçümüz birkaç içkiden sonra dokuzuncu taslağın ekran görüntüsüne bakıyorduk.

Kesin olarak Photoshop katmanlarını düzleştirdim ve canlı bakır-donanma tasarımını gri tonlarına dönüştürerek “Desaturate” ı vurdum. Herkesin şaşkınlığı için çalıştı.

Haftanın sonunda, kırmızı vurgularla “sıcak” bir gri tasarımımız vardı. Daha önceki müşterilerin yeni görünüme iltifat ettiğinde ve potansiyel müşterilerden daha fazla çağrı geldiğinde bir kazananımız olduğunu biliyorduk.

Renk şemanızı Photoshop “şaşı” testi ile analiz edin:

1. Web sitenizden en az üç sayfalık ekran görüntüleri alın. Onları Photoshop'ta açın.
2. Her ekran görüntüsünde arka plan katmanını çoğaltın ( Katman → Katman Katmanı veya Mac'te Command + J veya Windows'ta Control + J ).
3. Yeni katmanlara yaklaşık 10 piksel Gauss bulanıklığı uygulayın.
4. Görüntü → Ayarlamalar → Posterleştir'e gidin . 8 ila 12 seviyeleri kullanın veya Filter → Pixellate → Mosaic seçeneğine gidin . 15 ila 30 piksel kullanın.

Bu, hangi renklerin gerçekten baskın olduğunu gösterir. Daha baskın olan renkler, planın aklına daha yoğun bir şekilde yer verilir.

Web sitesinin düzeni ve organizasyonu renk olmadan çalışırsa, bir palet seçme zamanı. Fakat hangisi? Ve ne kadar kullanmalı?

Hues'nizi Hizalayın

Renk üç özelliğe sahiptir: renk tonu, doygunluk ve değer (bazen hafiflik olarak adlandırılır).

Doygunluk bir renk ne kadar zengin: neon renkler çok doygun, pastel ise daha az doymuş.

Değer , bir rengin ne kadar parlak olduğunu (yani siyah veya beyaza ne kadar yakın) gösterir.

Ton , gökkuşağının hangi kısmının kırmızı veya yeşil gibi bir rengin ait olduğunu ifade eder; insanların harekete geçtiği özellik.

Hiçbir şey, çatışan tonlar gibi bir renk şemasını öldürmez. Bir tasarımın pastel tonlardan neonuna kadar bir ton yüz tonu olabilir ve hala planlı görünebilir. Ama eğer renkler yanlış bir şekilde karışırsa, plan ayrı düşer.

Renk tonlarını engellemenin bir yolu, onları üçüncü bir renkle ayırmaktır. Siyah, gri veya beyaz bir tampon en güvenlidir, çünkü gri tonlama tonu nötrdür: gökkuşağının herhangi bir bölümünü siyah, beyaz ve gri ile koordine edebilirsiniz.

İkinci bir çözüm, tonları farklı oranlarda kullanmaktır . Bir renk şeması, menekşe ve kahverengiye sahipse, o zaman tasarım birkaç parlak menekşe vuruşuyla birçok kahverengi tonuna sahip olabilir.

Başka bir seçenek de değerleri değiştirmektir. Saf mavi ve parlak mavi, öyle bir kombinasyon yapar, ancak koyu mavi (lacivert) ve açık mavi (gök mavisi) kontrastı birbirini ayarlamak için yeterlidir. Kırmızı ve menekşe çarpışmayacak kadar farklı olabilir ama kasıtlı görünmemesi için yeterince yakındır. Açık kırmızı (pembe) ve koyu menekşe ayrımı getirir.

Ne yazık ki, kötü bir renk kombinasyonundan kaçınmak iyi bir seçim yapmakla aynı şey değildir. Bir renk düzeni memnun olduğunuzda değil, ama seyirciniz rahat hissettiğinde başarılı olur.

Harika Şemaları Keşfedin

Harika renk şemaları nereden geliyor? Yüzlerce renk ve binlerce kombinasyon ile nasıl karar veriyorsunuz?

Küçük statik web sitelerinin tasarımcıları içerikten renk çizmelidir . Bu genellikle fotoğraf demektir.

Yakın zamanda inşa ettiğim sekiz sayfalık bir web sitesinin tasarımı, bir indigo gökyüzüne karşı ayarlanmış ayrıntılı bir metal iskele ile dolduruldu. Photoshop'un damlalık aracını 5 × 5 ortalamasına ayarladığım zaman, gökyüzünün en karanlık ve en hafif kısımlarını örnekledim ve kenar çubuğu, bağlantılar, başlıklar ve altbilgiyi bu birkaç renk tonu verdi.

Müşteri bir web sitesini nasıl bu kadar iyi ve hızlı bir şekilde tasarlayabildiğimizi sorduğunda, cevabımız “Yaptığımız şey buydu.” Ama renk zaten oradaydı. Sadece onu aramak zorunda kaldım.

Stok fotoğrafları hızlı web siteleri için çalışırken , daha büyük ve daha dinamik web sitelerinin tasarımcıları, kitlelerinden ilham almalıdır .

Hangi renklerin seyircinize çekici geldiğinin mükemmel bir göstergesi günlük kıyafetleridir. Ziyaretçilerinizin ne giydiğini öğrenin ve hangi renklerin onları rahatlattığını öğreneceksiniz. Web siteniz, lig sporlarıyla ilgili ise, insanların günlük işlerinden ziyade oyunlara ne giydiğini öğrenin.

Hedef kitlenizin fotoğraflarını çekmek için yeterince şanslıysanız, onları toplu halde görüntüleyin; Kalabalığın ortalamasını istiyorsun. Ancak fotoğraflar mevcut değilse alışverişe çıkın.

İş yaşamında kalabilen giyim tasarımcıları, her bir ruh hali ve yaşam tarzı için mükemmel renk duygusuna sahiptir. 5. Cadde haute couture olmak zorunda değil. “Kamp mağazaları”, “bebek kıyafetleri”, “kayak ve mayo” ve “gündelik yaşam” ile ilgili bir Google araması, birçok iyi renk kombinasyonunu ortaya çıkaracaktır.

İnsanlar kendi zevklerine göre kıyafet giyerler. Beğendikleri renkleri kullanırsanız, web sitenizde daha rahat hissederler.

Dokular Kullanın

Ton, doygunluk veya değerdeki hafif varyasyonlar dokuları oluşturur .

Tek renkli dokular (yani sadece bir tonlu dokular) ve desenler çatışmasız çoğu web sitesine ince bir boyut kazandırır.

Özellikle basit doku arka planları oluşturmak kolaydır:

• Bir iç duvarın fotoğrafını çekin ya da çıplak olan ama kaba hissettiren bir şey.
• Photoshop'ta açın.
• Arka plan katmanını çoğaltın ve “doku 1” olarak adlandırın.
• Arka plan katmanını renk düzeninizdeki renklerle doldurun.
• “Texture 1” katmanının karışım modunu “Soft Light” ve opaklığını% 30'a ayarlayın.
• Web sitenizde deneyin. Doğru görünmüyorsa, tabakanın opaklığıyla oynayın.

Katmanın adı kasıtlı. Birden fazla fotoğrafla etrafta oynayabilir, ancak katmanlara “duvar dokusu” veya “kağıt dokusu” gibi bir şey vermekten kaçınabilirsiniz. Web sitenizdeki etkiyi, nereden geldiğini değil, odaklanmak istersiniz.

İyi Bir Düzen Oluşturmak

İyi bir renk düzeninin belirli özellikleri vardır. Bir tasarımı tutarlı tutmak için bir çerçeve veya bir dizi kılavuz olarak düşünün. Şema şunları yapmalıdır:

• Birlikte iyi çalışan iki ila beş renk tonu listeleyin.
• Bir tasarımın bu tonlardan ne kadar farklı olabileceğini açıklayın,
• Her tonun tonları için hesap,
• Siyah beyaza iyi çalışın.

İşte bir örnek:

Tasarımcı, çoğunlukla doğru hisseden sıcak tonları seçerek işe başladı. Mantık yoktu, sadece “sonbahar” ın belirsiz hedefi ve sezgisi vardı.

Photoshop'ta iki katman siyah ve beyaz tonları sağladı. Her katmanın karışım modu “Yumuşak Işık” olarak ayarlandı. Saf siyah en sağdaki renk için çok karanlıktı, bu nedenle siyah tabakanın opaklığı ayarlandı.

Renkleri birleştirmek için yeni bir katman oluşturuldu ve saf kırmızı ile dolduruldu. Karışım modu “Renk” e ayarlandı ve opaklığı yaklaşık% 40 oranında azaldı. (Not: Katmanların sırası çok önemlidir. "Tonlama" katmanı siyah-beyaz katmanların altına ayarlanırsa renkler değişir.)

Bu tasarımcıya 15 renk seçti. Bir dizi ton ve ton içeren dört kişi seçti. Burada renkler beyaza göre ayarlanmış.

Varyasyonlar önemlidir, bu yüzden tasarımcı denedi. Renkler siyaha karşı neye benziyordu? Onları hafif gölgeleyecek olursak ne olur?

Ya hepsini tamamen değiştirsek? “ Renk tonu” katmanındaki Görüntü → Ayarlamalar → Ton / Doygunluk kullanımı, belirgin bir şekilde sonbahar dışı bir his yaratır, ancak renkler hala koordine edilir. Belki de bu palet Paskalya için kullanılabilir.

Sonuç, bir renk şemasıdır: farklı (ama çok farklı olmayan) tonlar ve birlikte iyi çalışan renk tonları sağlayan bir referans. Örnek dosyayı indirin.

Çerçeveyi Kullan

Yarının grafikleri, fotoğrafları ve simgeleri bugünün renk şemasıyla çalışacak mı? Bir web sitesi altı gün, altı hafta veya altı ayda hangi görsellere ihtiyaç duyacaktır? Söylemesi zor ama içerik, renk düzeninizin bir parçası .

Bu sorunu, görüntülerinizi renk düzenini izleyerek veya renk düzeninin resimlerinize uymasını sağlayarak çözebilirsiniz.

Renk düzeninizi, fotoğraflarla bile zorlamak, tüm sayfalarda birleşik bir görünüm elde etmenin harika bir yoludur .

En kolay çözüm, şemasına uyan görüntüleri bulmaktır. Bir renk şemasının kıpırtı odasına izin verdiğini unutmayın: bir görüntünün en büyük tonları olduğu sürece, görüntü çalışmalıdır. Birçok stok fotoğraf web sitesi renkle arama yapmanıza olanak sağlar (yani ton: genellikle kırmızı, yeşil ve mavi gibi primerler).

Bir resim renk düzeninize uymuyorsa, bir renk tonu verin:

1. Resmi Photoshop'ta açın.
2. Yeni bir katman oluştur. Karışım modunu “Renk” olarak ayarlayın.
3. Bu katmanı paletinizdeki renklerden biriyle doldurun, tercihen görüntüye en yakın olanı seçin.
4. Renk katmanının opaklığını% 50'ye ayarlayın.
5. Görüntünün orijinal rengi ve web sitenizin renk paleti arasında iyi bir denge elde edene kadar opaklıkla oynayın.
6. Bu teknik, fotoğraflar, şekiller ve simgeler için çalışır - piksel tabanlı bir şey. (Görüntünün sahibi siz değilseniz, bunu değiştirmeden önce izin aldığınızdan emin olun. Web sitenizdeki görünümünü iyileştiriyor olabilirsiniz, ancak başkalarının sanatıyla hâlâ özgürlük kazanıyorsunuz.)

Profesyonel görünümlü

Hiçbir renk takımı kendi başına “profesyonel” görünmez. Aksine, koordineli ve planlanmış bir duyguya ulaşmak için bir süreci izlemelisiniz.

Web sitesi ne hakkında olursa olsun, seyirci kendisini ciddiye aldığını bilir.

İpuçları

• İyi bir renk düzenine sahip olduğunuzu düşündüğünüzde, en az bir hafta boyunca deneyin. Rengi değerlendirmek, zamanla oluşan sezgiyi gerektirir. Şemanın kişiliğini tamamen emmek için zaman ayırın.
• İyi bir renk düzenine sahip olduğunuzu düşündüğünüzde, bayat bırakmasına izin vermeyin. Ziyaretçilerinizin tadı, sizinki gibi, zamanla değişir. Dört ay sonra renkleri incelemek için not alın. O zaman sorun, hala uygun mu? Yoksa, ne değişti? Düzenlemenizi hangi faktörler etkileyecek?
• Mükemmel renkler parlak bir şekilde kullanın. Yanardöner bir şeyin sıçraması ziyaretçileri oraya çekecek, ama her yerde göreceklerse, amaçsızca dolaşacaklar.
• Bazı insanlar renk şemalarının dar bir aralığa sahip olduğunu düşünüyor. Tasarımlarınıza ek derinlik kazandırmak için biraz hareket etmesine izin verin.
• Kırmızı, yeşil, mavi ve sarı gibi saf primerlerden kaçının. Onlara gerçek karakter için bir renk verin: kırmızı, ama hafif mor, mavi bir dokunuşla mavi, turuncu bir renk tonuyla “sıcak” sarı.
• Renklerin soluklaştığından emin ol. Kırmızıyı seçerseniz, kırmızı ışığın kadınsı olabileceğini ve koyu kırmızıların pas veya kan gibi görünebileceğini unutmayın. Sarı soluk güneş ışığından koyu kahvereye gider. Koyu mavi gizemlidir ve açık mavi sükunettir - ya da aşırı ısınırsanız elektrik.
• Mac kullanıcıları, ekranınızı ayarlayın. “Sistem Tercihleri” ne gidin ve “Evrensel Erişim” e tıklayın. Ekranınızı “Gri tonlama kullan” a ayarlayın. Bu, aynı zamanda film noir için ruh halindeyken de işe yarar.
• Web sitenizin ne kadar aktif olmasını istiyorsanız, tarafsız bir arka plan kullanın. Siyah, beyaz ve gri, hemen hemen her renkte iyi çalışır.
• Büyük bir renk alanını eşleştirmek için küçük metin (14 punto ya da daha az) istiyorsanız, metnin birkaç gölgesini normalden koyu hale getirin. Bu, karakterlerin içindeki ışık sayaçlarını dengeleyecektir.
• Daha az ton olan daha fazla ton kullanın.
• “İyi görünüyor”, sezgiseldir. Ancak sezgi, egonuz, seyircinizin selameti ve projeyi finanse eden insanların otoritesi arasındaki bir savaştır.
• İçeriği öne çıkarmak için sessiz arka planlar kullanın:

  
  

  

Sadece WDD için yazılmış Ben Gremillion . Son tarihte talep edilen özelliklerin sayısıyla bir sürenin sonsuzluğunun ters orantılı olduğunu öğrenen serbest bir web tasarımcısı.

Başarılı renk şemaları nasıl oluşturulur? Neler işe yarıyor ve ne işe yaramaz?

• ← Çevrimiçi Bir Şey Nasıl Bulunur: İnternet Araştırma Uzmanı Olun
• Wikipedia Redesign: Mağazada ne var? →