Arayüz tasarımında renkler nasıl kullanılır?

Selman Ay
Selman Ay
Aug 23, 2017 · 5 min read

Basit ipuçları ve araçlar.

Renklerle ilgili araştırma yaparken Wojciech Zieliński’nin -aşağıda bağlantısını paylaştığım- bir yazısına rastladım. Okuduktan sonra oldukça faydalı bilgiler içerdiğini düşünerek, kendi yorumumla birlikte çevirmeye karar verdim. Umarım sizin için de faydalı bir kaynak olur.


Renk, her şeydir; tabi ki aşırıya kaçmadan kullanıldığında. Renk düzeninizde en fazla üç ana renge sadık kalırsanız daha iyi sonuçlar elde etme eğiliminde olursunuz. Bir tasarım projesinde renk uygulaması tamamen denge işidir ve kullandığınız renk sayısı arttıkça dengeyi sağlamak da o kadar zorlaşır.

Bir işe başladıktan sonra paletinizde tanımladığınız renklerin ötesinde ek renklere ihtiyacınız varsa, yine paletinizdeki renklerin açık ve koyu (shade ve tint) tonlarını kullanın.

60–30–10 Kuralı

Bu iç tasarım kuralı, kolay bir şekilde renk düzeni oluşturmanıza yardımcı olan zamandan bağımsız bir dekorasyon tekniğidir. %60 + %30 + %10 formülünün renkleri dengelemesi amaçlanmıştır. Bu formül, denge hissi yarattığından ve gözün bir odak noktasından diğerine rahatça geçmesine izin verdiğinden dolayı sorunsuz şekilde çalışır. Ayrıca kullanımı inanılmaz derecede basittir.

Duvar boyaları, mobilyalar, aksesuarlar.

Renklerin anlamı

Bilim insanları yüzlerce yıldır bazı renklerin fizyolojik etkilerini inceledi. Renkler, estetik kaygıların haricinde duyguların ve çağrışımların yaratıcısıdır. Renklerin anlamı kültürlere ve koşullara göre değişiklik gösterebilir. Bu yüzden siyah-beyaz moda mağazalarını görüyorsunuz. Zarif ve görkemli görünmek istiyorlar.

Asos’un siyah-beyaz sayfasının içinde yeşil bir etkileşim düğmesi… Bunun bir anlamı var.
  • Kırmızı: Tutku, Sevgi, Tehlike
  • Mavi: Sakin, Sorumlu, Güvenli
  • Siyah: Gizem, Zerafet, Kötülük
  • Beyaz: Saflık, Sessizlik, Temizlik
  • Yeşil: Yeni, Taze, Doğa

Daha fazlasını istiyorsanız bu listeye bakın — renk kültürü (İngilizce)

Önce grinin tonları

Tasarımlarımızın başında renkler ve tonlar ile oynamayı seviyoruz ama bu davranış ana rengin belirlenmesi için 3 saat harcadığınızı fark ettiğinizde size çok hızlı ihanet edebilir… Renklerle oynamak gerçekten baştan çıkarıcı ama bu tutumdan kaçınmayı öğrenmelisiniz.

Bunun yerine kendinizi, tasarım bileşenlerini hizalamaya ve yerleştirmeye odaklamaya zorlayın. Bu size zaman kazandıracaktır. Böyle bir tutum verimliliğinizi de arttırır. Tasarımınız bu aşamadayken elbette sıkıcı görünmek zorunda değil. İyi görünmesini istiyorsanız grinin 50'den fazla tonu var. Bunları kullanın.

Basit monokromatik renkler ve elemanlar üzerine odaklanılmış bir çalışma. Dribbble’de incelemek için tıklayın.

Safi gri tonlamadan ve siyahtan uzak durun

Şimdiye kadar öğrendiğim en önemli renk hilelerinden biri, doygunluk (saturation) içermeyen gri renkleri kullanmaktan kaçınmak oldu. Gerçek hayatta saf gri renkler neredeyse hiç yoktur. Aynı şey siyah için de geçerli.

Bu görseldeki en koyu renk #000 değil, #0A0A10'dır.

Renklerinize daima biraz doygunluk katmayı unutmayın. Bilinçaltı olarak, kullanıcılara daha doğal ve tanıdık gelecektir.


Doğaya inanın

En iyi renk kombinasyonları doğadan gelmektedir. Her zaman doğal görünürler. Tasarım çözümleri için çevreye bakmanın en iyi yanı renk paletinin her zaman değişiyor olmasıdır.

Zıtlığı (kontrastı) koruyun

Bazı renkler birbirleriyle çakışırken bazı renkler de birlikte iyi görünüyor. Bir renk çarkında en iyi gözlemlenebilecekleri etkileşim biçimleri için kesin kurallar vardır. Bu yöntemlerin var olduğunu bilmeniz yeterlidir yani elinizle hesaplama yapmanız gerekmez.

Renk teorisi hakkında daha fazla bilgi edinmek için — Tasarımcılar İçin Renk Teorisi: Kendi Renk Paletlerini Oluşturma (İngilizce)

İlham almaktan korkmayın

Arayüz (UI) örneklerini incelemekten bahsediyorsanız şüphesiz Dribbble bunun için en iyi yerlerden birsidir. Ayrıca, belirli renklerin diğer tasarımcılar tarafından nasıl kullanıldığına ilişkin görsel araştırmalar yapmak istediğinizde, renklerle arama yapabileceğiniz bir araç bile var. İşte bu: dribbble.com/colors

Renk toplamak için videolar, baskı tasarımları, iç mekan tasarımları, moda gibi pek çok ilham verici şey var. Hayatınızın herhangi bir noktasında karşılaştığınız bu paletlere kayıtsız kalmayın ve ilginç (güzel) görünen her şeyi kaydetmeye çalışın.

“Genellikle KPOP kliplerinden renk çalmayı seviyorum. Onlar muhteşem.” Wojciech Zieliński

Araçlar

İşleri kolaylaştırmak adına hızlıca renk paletleri oluşturabileceğiniz 2017'nin en iyi araçlarından bazılarını sizler için derledim. Bu araçlar size çok fazla zaman kazandıracaktır. Kullanmayı deneyin!

Coolors.co

Kesinlikle en sevdiğim renk toplama aracı! Palet oluşturmak için istediğiniz rengi kilitledikten sonra klavyenizden boşluk tuşuna basabilirsiniz. Coolors, ayrıca yüklediğiniz görüntüden de bir renk paleti oluşturmanızı sağlar. Bu özelliğin en güzel yanı yalnızca bir sonuçla sınırlı kalmamanızdır yani referans noktasını değiştirerek aynı görselden farklı paletler elde edebilirsiniz.

Adobe Color CC (Kuler)

Adobe Color CC, eski bilinen adıyla Kuler, Adobe’nin sunmuş olduğu ve uzun zamandır da bizimle olan ayrıca tarayıcı ve masaüstü sürümlerinin bulunduğu bir araçtır. Masaüstü sürümünü kullanıyorsanız, bir renk şemasını Photoshop’a doğrudan aktarabilirsiniz.

Paletton

Paletton, Adobe Color CC’ye benzemektedir ancak aradaki fark yalnızca 5 tonla sınırlı olmamanızdır. Birden fazla birincil renginiz olduğunda ve bunların ek tonlarıyla oynamak istediğinizde harika bir araçtır.

Designspiration.net

Renk paleti için bir fikriniz olduğunu hayal edin, ancak bu karışımın örneklerini görmek istiyorsunuz. Designspiration bunun için mükemmel bir araçtır. En fazla 5 renk seçebilir ve sorgunuzla eşleşen resimleri arayabilirsiniz.

Shutterstock Lab Spectrum

İstediğim — seçtiğim rengin fotoğraflarını aramak istersem ne olacak? Shutterstock’un Spectrum adlı bir aracı var; burada fotoğrafları belirli tonlara göre arayabilirsiniz. Filigranlı küçük önizleme resmi, palet oluşturmak için yeterli olacağından aboneliğe bile ihtiyacınız yoktur.

Tineye Multicolr

Peki fotoğraftaki renk karışımlarını aramak ve her birinin miktarını belirtmek isterseniz ne olacak? Tineye size yardımcı olacaktır. Bu web sitesi Flickr’dan gelen 10 milyon Creative Commons lisanslı görselden oluşan bir veritabanı kullanıyor. Örneğin 60–30–10 kuralına uyan görseller bulmak istediğinizde ilham almak için bu siteyi kullanabilirsiniz.


Son düşünceler

Renk, özellikle dijital çağda ustalaşmak için zor bir kavramdır. Yukarıda bahsedilen ipuçları doğru renkleri bulma işini kolaylaştıracaktır. Çarpıcı renk düzenleri oluşturmayı öğrenmenin en iyi yolu, kendinize bir iyilik yapıp renklerle oynamaya çalışmaktır. Durmayın başlayın!


4 bölümden oluşan bu yazı dizisinin diğer bölümlerini aşağıdaki bağlantılara tıklayarak okuyabilirsiniz:

Kullansınlar

Bu yayında Kullanıcı Deneyimi temelinde kullanılabilirlik, kullanıcı testleri, prototipleme veya arayüz tasarımıyla ilgili yazılar bulabilirsiniz.

)

Selman Ay

Written by

Selman Ay

Digital Product Designer at Vodafone Turkey

Kullansınlar

Bu yayında Kullanıcı Deneyimi temelinde kullanılabilirlik, kullanıcı testleri, prototipleme veya arayüz tasarımıyla ilgili yazılar bulabilirsiniz.

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade