Koyu Mod Arayüzü Tasarlamak: Yüzey, Renk, Görsel ve Token

Koyu mod renkleri tersine çevirmek değildir

Koyu mod (dark mode), arayüzün açık zemin üzerine koyu metin yerine koyu zemin üzerine açık metinle sunulduğu ayrı bir renk temasıdır. Pek çok kişi bunu açık temadaki renkleri ters çevirmek sanır; sonuç ise çoğunlukla göz yoran, hiyerarşisi bozulmuş bir arayüzdür.

Koyu temada ışık, yüzeylerden değil metin ve vurgulardan gelir; gölgeler zeminle karışır, doygun renkler ekranda parlar ve büyük açık alanlar gözü yorar. Bu yüzden koyu mod, kendi kuralları olan ayrı bir tasarım işidir: yüzey kademeleri, metin renkleri, vurgu renkleri, görseller ve durum renkleri ayrıca düşünülür.

Koyu modun gerekçesi de net olmalıdır. Düşük ışıkta kullanım rahatlığı, kullanıcının sistem tercihine saygı ve bazı ekranlarda güç tasarrufu bunlardan bazılarıdır. Her kullanıcı için daha okunaklı olduğu doğru değildir: bazı kişiler açık temada daha rahat okur. Bu nedenle tema seçimi kullanıcıya bırakılır.

Zemin ve yüzeyleri kurmak

Saf siyah (tam siyah) zemin ile saf beyaz metin arasındaki aşırı karşıtlık parlama ve titreme etkisi yaratabilir; geniş ekranlarda göz yorgunluğuna yol açar. Çoğu tasarım sistemi, çok koyu gri bir zemin ve kırık beyaza yakın bir metin rengini tercih eder. Seçtiğiniz tonların okunabilirliğini mutlaka ölçerek doğrulayın.

Açık temada gölgeyle verilen derinlik, koyu temada çalışmaz; gölge koyu zeminde görünmez. Yükseklik (elevation) hissi bunun yerine yüzeyin biraz daha açık bir tonla gösterilmesiyle sağlanır: zemin en koyu, kart onun üstünde bir kademe açık, açılır menü ya da modal daha açık. Böylece üstte duran öğeler görsel olarak öne çıkar.

Bu kademeleri birkaç sabit değerle tanımlayın ve her bileşen aynı değerleri kullansın. Rastgele gri tonlarıyla üretilen yüzeyler, aralarındaki fark belirsizleştiğinde hiyerarşiyi bozar.

Metin ve vurgu renkleri

Birincil metin zeminden yeterince ayrışmalı, ancak göz yormayacak kadar yumuşak olmalıdır. İkincil metin (açıklama, ipucu) bir kademe soluk olur; fakat yine de okunabilirlik eşiğinin altına düşmemelidir. Kontrast kontrolünü açık tema için yapıp bırakmak yetmez, koyu tema için ayrıca yapılır. Kontrastın nasıl ölçüleceği için renk ve kontrast konusuna bakın.

Açık temada iyi çalışan doygun ve koyu vurgu renkleri, koyu zeminde ya çok parlak görünür ya da yeterince ayrışmaz. Genellikle vurgu renginin açık temadaki tonundan daha açık ve daha az doygun bir sürümü kullanılır. Marka rengini koruyup parlaklığını ve doygunluğunu ayarlamak, markayı bozmadan okunabilirlik sağlar.

Durum renkleri (hata, uyarı, başarı) için de aynı işlem uygulanır. Hata kırmızısı koyu zeminde gözü yakabilir; ayarlanmış ton hem okunur hem rahattır. Renk tek başına anlam taşımamalı, simge ve metinle desteklenmelidir.

Bağlantılar, odak halkaları ve seçili öğe göstergeleri de koyu zeminde yeniden kontrol edilir. Açık temada zarif görünen ince bir odak çerçevesi, koyu zeminde kaybolabilir.

Görseller, ikonlar ve gölgeler

Fotoğraflar ve illüstrasyonlar koyu zeminde farklı davranır. Beyaz zeminli logolar ve görseller koyu sayfada "kutu" gibi sırıtır; bunlar için saydam arka planlı ya da koyu tema varyantı olan dosyalar hazırlayın. Koyu mod için ayrı logo sürümü çoğu markanın ihtiyacıdır.

İkonlar çizgi kalınlığı ve renkleriyle metinle aynı kurallara uyar. Tek renkli ikonları metin rengine bağlamak, tema değişiminde otomatik uyum sağlar. Çok renkli illüstrasyonlarda ise doygunluğu azaltmak ya da koyu tema için alternatif üretmek gerekebilir.

Gölge kullanımı koyu temada sınırlıdır; derinlik için yüzey tonu, ince çerçeve ya da hafif ayırıcı çizgi kullanılır. Grafiklerde ve veri görselleştirmelerinde seri renkleri, koyu zeminde birbirinden hâlâ ayırt edilebilir olmalı; ızgara çizgileri ise çok baskın olmamalıdır.

Tema sistemini kurmak: token'lar ve geçiş

Koyu modu sürdürülebilir kılan şey, renkleri doğrudan bileşenlere gömmek yerine anlamsal isimlerle tanımlamaktır: "yüzey", "birincil metin", "kenarlık", "vurgu" gibi. Her isim, temaya göre farklı bir değere bağlanır. Bileşenler yalnızca anlamsal isimleri kullandığında, yeni bir tema eklemek ya da bir rengi değiştirmek tek yerden yapılır. Bu yaklaşımın adı tasarım token'larıdır ve tasarım araçlarındaki değişkenlerle doğrudan eşleşir.

Geçişte kullanıcının sistem tercihini varsayılan alın; web tarafında bu, tarayıcının sistem renk şeması tercihini sorgulayan bir medya özelliğiyle yapılır. Ardından kullanıcıya açık, koyu ve sisteme uy seçeneklerini veren bir anahtar sunun ve seçimi saklayın. Sayfa yüklenirken kısa süreli yanlış tema parlaması (açık tema görünüp sonra koyuya dönmesi) kullanıcıyı rahatsız eder; temayı sayfa çizilmeden önce uygulamak bunu önler.

Tasarım dosyalarında da her bileşenin her temadaki görünümü hazır olmalı. Bileşen varyantlarını ve değişken kümelerini tema başına oluşturmak, geliştiriciye aktarımı basitleştirir.

Test ve erişilebilirlik kontrolü

Koyu modu açık tema kadar ciddiyetle test edin. Her ekranı her temada gezin, hata, boş ve yükleme durumlarını da dahil edin; çünkü kenar durumlar tema denetiminden en çok kaçanlardır. Düşük ışıklı ortamda ve gerçek cihazda bakmak, masaüstü monitörde fark edilmeyen sorunları ortaya çıkarır.

Kontrast ölçümü her temada ayrı ayrı yapılır; araçlar yardımcı olur, ancak gerçek kullanıcı denemesi de değer katar. Okuma bozukluğu olan ya da ışığa hassas kullanıcılar koyu temadan farklı biçimlerde etkilenir; bu yüzden tercih kullanıcıya bırakılmalı, yüksek kontrast seçeneği varsa korunmalıdır.

Son olarak, ekran görüntüleri ve dokümantasyon gibi tema bağımlı varlıkları unutmayın: uygulama koyu modda, yardım sayfası açık modda görünüyorsa bu tutarsızlık hissedilir.

Sık yapılan hatalar

Koyu mod projelerinde tekrar eden hatalar şunlardır: renkleri otomatik ters çevirmek, saf siyah ve saf beyaza yaslanmak, gölgeyle derinlik beklemek, görselleri ve logoları unutmak, durum renklerini ayarlamamak, temayı yalnızca ana ekranlarda test etmek ve kullanıcıya seçim hakkı vermemek.

Bir diğeri kapsamdır. Her şeyi bir seferde koyu yapmaya çalışmak yerine, token yapısını kurup önce çekirdek bileşenleri, sonra ekranları taşımak daha güvenlidir. Eksik kalan ekranlar tema anahtarında göze batar; bu yüzden hangi alanların hazır olduğunu açıkça takip edin.

Mindset programlarında nerede çalışılır

Koyu mod tasarımı, UX/UI eğitimlerinde UI Tasarım Temelleri başlığında renk, tipografi ve bileşen düzeninin devamında ele alınır. Arayüz tasarımcısı ya da ürün ekibindeki UX tasarımcısı için, tema kararlarını geliştirici ekibin kullanabileceği token yapısıyla birlikte düşünme alışkanlığı kazandırır.