Ürün arayüzünde renk sistemi kurmak: palet, anlam katmanı ve kontrast kontrolü

Arayüz rengi ile illüstrasyon rengi neden farklıdır?

Bir poster ya da pazarlama sayfasında renk duyguyu taşır. Bir ürün arayüzünde ise renk önce bilgiyi taşır: bu buton ana eylemdir, bu alan hatalıdır, bu satır seçilmiştir, bu rozet işlem tamamlandığını söyler. Güzel görünmesi gereken ama önce işlevini yerine getirmesi gereken bir dildir.

Bu yüzden arayüz renkleri tek tek seçilmez, sistem olarak tasarlanır. Sistem; marka renklerini, nötr gri skalasını, anlam taşıyan durum renklerini ve bunların farklı yüzeylerdeki davranışını içerir. Sistemsiz seçilen renkler birkaç ekran sonra tutarsızlaşır: aynı eylem başka bir sayfada başka bir maviyle çıkar, hata rengi marka renginden ayırt edilemez hale gelir.

Palet adım adım nasıl kurulur?

Yöntem genel olarak şu sırayla ilerler:

• Marka rengini belirleyin. Bu, ana eylemleri ve vurguları taşıyan çekirdek renktir. Tek bir ana renk birçok ürün için yeterlidir; başka bir vurgu rengi gerçek bir ihtiyaç doğarsa eklenir.
• Nötr skalayı çıkarın. Metin, kenarlık, arka plan ve yüzeylerin büyük bölümü nötr tonlardan oluşur. Marka renginin hafif bir tınısını içeren griler, tamamen saf grilere göre daha uyumlu görünür.
• Ana renk ve nötrler için açıktan koyuya düzenli bir ton skalası üretin. Böylece "biraz daha açık mavi" gibi sezgisel seçimler yerine skaladan bir adım seçilir.
• Durum renklerini ekleyin: başarı, uyarı, hata ve bilgi.
• Her rengi gerçek bileşenler üzerinde deneyin: buton, form alanı, tablo satırı, bildirim şeridi, grafik.

Paleti büyük tutmayın. Az sayıda iyi tanımlı ton, çok sayıda yakın ton kadar esnek ama çok daha tutarlıdır.

Semantik katman: rengi amacına göre adlandırmak

Ham renk değerlerini doğrudan bileşene yazmak bakım sorunu yaratır. Bunun yerine renklere amaçlarına göre ad verilir: "birincil eylem arka planı", "gövde metni", "ikincil metin", "çerçeve", "hata uyarısı yüzeyi". Bu adlar tasarım değişkenleri (design tokens) olarak tanımlanır ve bileşenler yalnızca bu adları kullanır.

Semantik katmanın faydası, değişikliklerin tek noktadan yönetilmesidir. Marka rengi yenilendiğinde yalnızca eşleşmeler güncellenir. Koyu tema eklenirken aynı adlar farklı değerlere bağlanır; bileşen kodunda değişiklik gerekmez. Ayrıca ekip aynı dili konuşur: tasarımcı "hata yüzeyi" dediğinde geliştirici hangi değeri kastettiğini bilir.

Durum renklerinde dikkat edilecek ilke, rengin tek başına anlam taşımamasıdır. Hata durumunda kırmızı kenarlıkla birlikte bir simge ve açıklayıcı bir metin bulunmalıdır. Renk ayrımında zorlanan kullanıcılar, ayrıca baskı çıktısı ya da düşük kaliteli ekran, yalnız renge dayalı bir mesajı kaçırır.

Kontrast nasıl ölçülür ve ne kadar yeterlidir?

Kontrast, metin ile arka plan arasındaki parlaklık farkıdır. Erişilebilirlik yönergeleri (WCAG) bu farkı bir oran olarak tanımlar ve metin boyutuna göre minimum eşikler koyar; büyük metin için daha esnek, küçük metin için daha yüksek bir eşik beklenir. Kurumsal ürünlerde hedef düzey sıklıkla AA olarak belirlenir. Eşik değerlerini yönergelerin güncel metninden doğrulayın.

Kontrastı elle tahmin etmek yanıltıcıdır, çünkü gözün algısı güvenilir değildir. Tasarım aracı eklentileri ve tarayıcı geliştirici araçları oranı otomatik hesaplar. Pratik bir alışkanlık: paleti oluştururken ton skalasının her adımının hangi arka planda hangi metin için güvenli olduğunu önceden işaretleyin. Böylece tasarımcı her ekranda yeniden hesaplamak zorunda kalmaz.

Sık gözden kaçanlar şunlardır: açık gri yer tutucu metinler, düğme içindeki beyaz yazının açık tonlu arka planda okunmaması, ikincil metnin görsel üzerinde bulunması, devre dışı bileşenlerin tamamen görünmez hale gelmesi ve form alanı kenarlığının zemine karışması. Etkileşimli bileşenlerin sınırları ve odak halkaları da metin kadar görünür olmalıdır.

Koyu tema yalnızca renklerin tersine çevrilmesi değildir

Koyu tema için açık temadaki renkleri mekanik olarak ters çevirmek sıklıkla sorun çıkarır. Saf siyah zemin üzerine saf beyaz metin göz yorar; doygun renkler koyu yüzeyde parlayarak titreşim hissi verir. Koyu tema için yüzeylerin yükselti hissini hafif parlaklık farklarıyla vermek, ana rengin tonunu biraz yumuşatmak ve metin parlaklığını kısmak gerekir.

Gölgeler koyu yüzeylerde etkisini yitirir; katman ayrımı yüzey rengi farkıyla yapılır. Görseller, illüstrasyonlar ve grafik renkleri de ayrıca gözden geçirilmelidir. İşin en güvenli yolu, semantik katmanı baştan açık ve koyu temaya hazır kurmaktır: aynı ad, temaya göre farklı değere bağlanır ve kontrast kontrolü her tema için ayrı ayrı yapılır.

Kullanıcının işletim sistemi tercihine saygı göstermek ve manuel geçiş seçeneği sunmak iyi bir varsayılandır; tema tercihi hatırlanmalı, ilk yüklemede yanlış temanın kısa süre görünmesi önlenmelidir.

Renk körlüğü ve belirsiz görme koşulları

Kullanıcıların bir kısmı kırmızı ve yeşili ayırt etmekte zorlanır; başka kişiler ekranını güneşte, düşük parlaklıkta ya da eski bir monitörde kullanır. Bunlara dayanıklı tasarım için şu alışkanlıkları edinin: renk dışı ipuçları ekleyin (simge, metin, desen), grafiklerde seri ayrımını yalnız tonla değil çizgi stili ya da etiketle destekleyin, tasarımı gri tonlamada görerek parlaklık yapısının hâlâ anlaşılır olduğunu doğrulayın.

Tasarım araçlarındaki renk körlüğü simülasyonları ve tarayıcıların görme koşulu taklit seçenekleri bu kontrolü hızlandırır. Ancak simülasyon gerçek kullanıcı testinin yerini tutmaz; mümkünse erişilebilirlik ihtiyacı olan kullanıcılarla kısa bir deneme yapılması sorunları çok daha net gösterir.

Sık yapılan hatalar ve belgeleme

• Marka rengini her yerde kullanmak: Her şey vurguysa hiçbir şey vurgu değildir. Marka rengini ana eylem ve önemli durumlara saklayın.
• Durum renklerini dekor için kullanmak: Kırmızıyı güzel göründüğü için bir banner'da kullanırsanız gerçek hata anında etkisi azalır.
• Her ekranda yeni ton üretmek: Skalada olmayan ara tonlar sistemi bozar.
• Kontrastı yalnız son ekranda denetlemek: Palet aşamasında doğrulanmayan ton, tüm bileşenlere yayılmış olur.
• Belgelememek: Tonlar, adlar ve kullanım kuralları ortak bir rehberde durmuyorsa ekip büyüdükçe palet dağılır.

Renk rehberi kısa olabilir ama şunları içermelidir: palet ve adları, hangi renk çiftinin hangi metin boyutunda kullanılabileceği, durum renklerinin kullanım örnekleri ve koyu temadaki karşılıkları. Bu belge, tasarımcı ile geliştirici arasındaki en sık tartışma konusunu önceden çözer.

Mindset programlarında bu beceriyi nerede çalışırsınız?

Arayüzde Renk Sistemleri ve Kontrast Yönetimi programı konuyu şu başlıklarla işler: renk sisteminin temelleri, semantik katman ve durum renkleri, kontrast ve erişilebilirlik, koyu tema ve belgeleme.

Erişilebilir tasarımı daha geniş ele almak isteyenler için ilgili beceri sayfaları ve tasarım sistemi içerikleri bu çalışmayı tamamlar.