Dark Mode UI Tasarımı
Koyu tema sonradan yamanmış görünmesin
Koyu tema çoğu üründe renkleri ters çevirerek yapılıyor; sonuçta metin okunmuyor, gölgelerle kurulan derinlik kayboluyor, marka rengi koyu zeminde parlıyor. Renk değişkenlerini, kontrast eşiklerini ve katman mantığını iki tema için birlikte kuruyoruz.
- Tek kaynaklı renk değişkenleri
- Kontrast eşiği kontrolü
- Gölgesiz katman ve derinlik
- Sistem tercihine uyan geçiş
Birlikte çalıştığımız markalar
Dark Mode UI Tasarımı kimler için?
Uzun süre ekrana bakılan ürünler
Panel, editör ve izleme ekranları gibi kullanıcının saatlerce baktığı arayüzler. Koyu tema burada tercih değil, sık gelen bir talep.
Koyu temayı yamalı duran ekipler
Temayı sonradan eklemiş, ancak bazı ekranlarda okunmayan metin ve kaybolan sınırlarla uğraşan ürünler.
Yeni tasarım kuran ekipler
Renk yapısını baştan iki tema düşünerek kurmak isteyenler. Sonradan eklemek, baştan planlamaktan çok daha pahalı.
Kapsam ve teslimatlar
Renk değişkeni yapısı
Renkler doğrudan değil, anlamlarıyla tanımlanır. Zemin, yüzey, kenarlık, birincil metin ve ikincil metin gibi roller iki temada da aynı adı taşır.
Kontrast kontrolü
Metin, ikon ve durum renklerinin koyu zeminde okunabilirliği ölçülür. Açık temada geçen bir renk koyuda geçmeyebilir, bu yüzden iki tema ayrı ayrı kontrol edilir.
Katman ve derinlik mantığı
Koyu temada gölge iş görmez. Kart, modal ve açılır menü gibi katmanlar yüzey tonu ve kenarlıkla ayrıştırılır.
Marka renginin uyarlanması
Açık zemin için seçilmiş kurumsal renkler koyu zeminde titreyebilir ya da kontrastı düşebilir. Marka kimliğini bozmadan koyu tema karşılıkları belirlenir.
Görsel, logo ve ikon davranışı
Beyaz zeminli logolar, fotoğraflar, illüstrasyonlar ve grafik renkleri koyu temada nasıl görüneceklerine göre düzenlenir.
Tema geçişi ve tercih
Sistem tercihinin okunması, kullanıcının seçimi ve seçimin hatırlanması tasarım tarafında tanımlanır.
İki tema, iki kat bakım demek
Koyu tema kararı verilirken genellikle yalnız ilk kurulum maliyeti konuşuluyor. Asıl yük ise sonrasında başlıyor. Eklenen her bileşen iki temada da kontrol edilmek zorunda kalıyor, her yeni illüstrasyon iki zeminde de çalışmak zorunda kalıyor, yardım belgelerindeki ekran görüntüleri ve tanıtım görselleri iki halde de üretilmek zorunda kalıyor.
Bu yükü baştan görmek kararı da netleştiriyor. Bazı ürünlerde koyu tema gerçek bir talep; kullanıcı gün boyu ekrana bakıyor ve düzenli olarak soruyor. Bazı ürünlerde ise yalnız rakipte olduğu için isteniyor ve yayına girdikten sonra kimse açmıyor.
Bu yüzden işe talebin nereden geldiğine bakarak başlıyoruz. Koyu tema yapılacaksa da bakım yükünü azaltacak biçimde kuruyoruz: renkler tek bir kaynaktan geliyor, bileşenler tema başına ayrı ayrı tasarlanmıyor, kontrol listesi ekibin kendi başına tekrar kullanabileceği biçimde bırakılıyor.
Bu değerlendirme bazen kapsamı da değiştiriyor. Koyu temayı bütün ürüne yaymak yerine, kullanıcının uzun süre kaldığı ekranlarla başlamak mümkün oluyor. Böylece talep karşılanıyor, bakım yükü ise kontrollü biçimde büyüyor.
Koyu zeminde beyaz metin, olduğundan kalın görünüyor
Açık zeminde iyi ayarlanmış bir tipografi, aynı değerlerle koyu zemine taşındığında farklı davranıyor. Açık renkli metin koyu zeminin üzerine doğru taşıyor; harfler daha kalın ve daha sıkışık görünüyor. Uzun bir paragrafta bu, gözün çabuk yorulmasına yol açıyor.
Düzeltme genellikle küçük oluyor. Koyu temada bir kademe ince bir ağırlık kullanmak, harf aralığını biraz açmak ve metin rengini saf beyazdan hafifçe geri çekmek çoğu durumda yetiyor. Aynı sebeple ince çizgiler ve kenarlıklar koyu zeminde olduğundan belirgin duruyor, bu yüzden ayrı ayarlanıyor.
Bu ayarlar ölçüyle değil, gözle bitiyor. Kontrast değerleri iki temada da eşit çıksa bile okuma konforu eşit olmuyor. Bu yüzden uzun metinli ekranları iki temada yan yana açıp karşılaştırıyor, kararı tablo üzerinde değil ekranın karşısında veriyoruz.
Grafik ve ikonlar da aynı etkiden payını alıyor. İnce çizgili ikonlar koyu zeminde daha belirgin görünüyor, veri grafiklerindeki çizgiler birbirine yaklaşıyor. Bu yüzden ikon ve grafik ayarlarını metinden ayrı bir başlık olarak ele alıyoruz.
Nasıl çalışıyoruz?
Renk envanteri
Mevcut arayüzde kullanılan bütün renkleri çıkarıyoruz. Bu adımda genelde aynı işi yapan birbirine yakın onlarca renk tonu ortaya çıkıyor.
Rol tanımı
Renkleri kod değerleriyle değil, taşıdıkları anlamla tanımlıyoruz. Bir rengin nerede kullanılacağı belirsizse iki temada da tutarsız görünüyor.
Koyu tema paleti
Her rol için koyu tema karşılığını belirliyor, kontrast eşiklerini ölçüyoruz. Saf siyah zemin yerine gözü yormayan koyu tonlar tercih ediliyor.
Bileşen uyarlaması
Buton, form alanı, tablo, uyarı ve grafik gibi bileşenleri koyu temada tek tek gözden geçiriyoruz. Durum renkleri burada ayrıca sınanıyor.
Kontrol ve teslim
İki temayı aynı ekranlarda karşılaştırıp dosyayı değişken adları ve kullanım kurallarıyla teslim ediyoruz.
Kullandığımız araçlar ve platformlar
- Figma
- Figma Dev Mode
- Stark
- Storybook
- Chrome DevTools
Dark Mode UI Tasarımı fiyatını neler belirler?
Mevcut renk yapısının durumu
Renkler değişken olarak tanımlıysa iş uyarlamadan ibaret. Her ekranda ayrı renk kodları yazılıysa önce yapının toparlanması gerekir.
Bileşen ve ekran sayısı
Koyu temada her bileşenin bütün durumları yeniden kontrol edilir. Bileşen sayısı arttıkça kontrol yükü de artar.
Grafik ve görsel yoğunluğu
Veri görselleştirme, illüstrasyon ve fotoğraf ağırlıklı arayüzlerde koyu tema karşılıkları ayrı emek ister.
Marka renginin esnekliği
Kurumsal renk koyu zeminde kontrast sorunu çıkarıyorsa marka tarafıyla birlikte bir ton aralığı belirlemek gerekir.
Sıkça sorulan sorular
Renkleri tersine çevirmek yeterli olmuyor mu?
Olmuyor. Ters çevirme metin kontrastını bozar, gölgeyle kurulmuş derinliği yok eder ve marka rengini kullanılamaz hâle getirebilir. Koyu tema ayrı bir renk sistemi kararıdır.
Koyu tema kullanıcılar için daha mı okunaklı?
Duruma göre değişir. Karanlık ortamda ve uzun süreli kullanımda tercih edilir, ancak uzun metinlerde bazı kullanıcılar için okuma zorlaşır. Bu yüzden seçimi kullanıcıya bırakmak ve sistem tercihini varsayılan almak en güvenli yol.
Saf siyah zemin kullanıyor musunuz?
Genelde kullanmıyoruz. Saf siyah üzerine beyaz metin yüksek kontrast nedeniyle yorucu olabiliyor ve katmanları ayrıştırmak zorlaşıyor. Koyu gri tonlarla çalışmak hem okumayı hem derinliği kolaylaştırıyor.
Mevcut açık temamıza dokunmadan koyu tema ekleyebilir misiniz?
Çoğu zaman açık temada da küçük düzeltmeler gerekiyor, çünkü iki temanın ortak bir değişken yapısına oturması lazım. Bu düzeltmeleri en az değişiklikle planlıyor ve sizinle önceden konuşuyoruz.
Kullanıcı tercihini nasıl belirliyoruz?
Önerimiz, ilk açılışta sistem tercihini okumak ve kullanıcı arayüzden değiştirdiğinde bu seçimi hatırlamak. Tema seçimi ayarlara gömülü değil, kullanıcının kolay ulaşabileceği bir yerde olmalı.
Grafik renkleri iki temada da ayırt edilebiliyor mu?
Ayrı çalışılması gereken konulardan biri. Açık temada ayrışan seri renkleri koyu zeminde birbirine yakınlaşabiliyor. Grafik paletini iki tema için ayrı belirliyor, renk körlüğü açısından da kontrol ediyoruz.
Dark Mode UI Tasarımı için ilk adımı atalım
- 1Formu doldurun ya da bizi arayın
- 2Bir iş günü içinde ön görüşme planlayalım
- 3Size özel yol haritası ve teklif hazırlayalım