Çoğu ekip tasarım sistemine bir renk paleti ve birkaç düğme çeşidiyle başlar, altı ay sonra elinde birbirine benzemeyen dört farklı düğme ve kimsenin güncellemediği bir dosya kalır. Sorun yeteneksizlik değil, katman kurgusunun eksikliğidir. Sağlam bir tasarım sistemi üç katmandan oluşur: token, bileşen ve dokümantasyon. Her katmanın kendi sahibi, kendi değişim hızı ve kendi kalite ölçütü vardır.
Katman 1: Token'lar
Token, tasarım kararının en küçük adlandırılmış birimidir. Kritik nokta, token'ları da kendi içinde ikiye ayırmaktır.
- İlkel (primitive) token'lar ham değerleri tutar: gri-900, mavi-500, uzay-4, yaricap-md. Bunlar anlamsızdır, sadece envanterdir ve arayüzde doğrudan kullanılmaz.
- Anlamsal (semantic) token'lar bu değerlere rol atar: zemin-yuzey, metin-birincil, kenar-odak, uyari-zemin. Arayüz yalnızca bunları kullanır.
Bu ayrım karşılığını koyu tema eklerken verir. Anlamsal katman varsa koyu temayı geçmek, yalnızca eşlemeleri değiştirmek demektir; ilkel değerler her yere serpiştirilmişse yüzlerce dosyada arama yapmak demektir. Aynı mantık boşluk, tipografi, gölge, yarıçap ve hareket süreleri için de geçerlidir. Token'lar tek bir kaynakta tutulmalı ve hem tasarım aracına hem koda oradan dağıtılmalıdır; iki ayrı elle güncellenen liste kaçınılmaz olarak ayrışır.
Katman 2: Bileşenler
Bileşen, token'ların bir araya gelip davranış kazandığı yerdir. İyi bir bileşenin sözleşmesi nettir: hangi girdileri alır, hangi durumları vardır, neyi yapmaz. Her bileşen için en az beş durumu baştan tasarlayın: varsayılan, üzerine gelme, odak, devre dışı ve yükleniyor. Buna hata durumunu ve içerik yokken görünen boş durumu da ekleyin. Sahada en çok kırılan yer, tasarımcının yalnızca ideal durumu çizmiş olmasıdır.
Bileşenleri sınıflarken üç seviye işe yarar: temel ögeler (düğme, alan, etiket), bileşikler (form satırı, kart, tablo) ve şablonlar (liste sayfası düzeni, detay sayfası düzeni). Şablon seviyesini atlarsanız her yeni sayfa sıfırdan tasarlanır ve sistem yavaş yavaş çözülür.
Bir de esneklik dengesi var. Aşırı yapılandırılabilir bileşenler zamanla her şeyi yapabilen ama hiçbir şeyi iyi yapmayan devlere dönüşür. Kural basit: yeni bir varyant eklemeden önce üç gerçek kullanım örneği isteyin. Tek seferlik ihtiyaçlar sisteme değil, kullanıldığı sayfaya ait olmalıdır.
Katman 3: Dokümantasyon
Kimsenin okumadığı dokümantasyon, olmayan dokümantasyondur. Etkili olması için üç soruyu cevaplaması yeterlidir: Bu bileşen ne zaman kullanılır? Ne zaman kullanılmaz? Nasıl kullanılır? Her bileşen sayfasında canlı bir örnek, kopyalanabilir kod, erişilebilirlik notları ve yaygın hatalar bölümü bulunmalı. "Kullanma" örnekleri, çoğu zaman "kullan" örneklerinden daha öğreticidir.
Dokümantasyona bir de karar kaydı ekleyin. Neden iki yerine tek bir uyarı bileşeni olduğunu, neden ikonların yalnızca belirli boyutlarda çalıştığını yazın. Ekip değiştiğinde sistemin mantığını koruyan şey bu kayıtlardır.
Sistemi yaşatmak
Tasarım sistemi bir proje değil, bir üründür; kullanıcıları da kendi ekibinizdir. Yaşaması için üç mekanizma gerekir:
- Katkı süreci. Yeni bileşen önerisi nasıl yapılır, kim onaylar, kabul ölçütü nedir? Bu yol açık değilse insanlar sistemi baypas eder.
- Sürümleme. Kırıcı değişiklikleri ayırın, değişiklik günlüğü tutun, eskiyen bileşenleri bir geçiş süresi tanıyarak kaldırın. Sessizce değişen bir bileşen güveni bitirir.
- Benimsenme ölçümü. Kaç ekran sistem bileşenlerini kullanıyor, kaç yerde hâlâ elle yazılmış stil var? Bu oran, sistemin sağlık göstergesidir.
Küçük ekipler için sade bir başlangıç
Sistem kurmak için büyük bir ekip gerekmez; gereken şey sıradır. Pratikte işe yarayan başlangıç şudur: önce mevcut arayüzün envanterini çıkarın. Kaç farklı gri tonu, kaç farklı gölge, kaç farklı düğme yüksekliği kullanılıyor? Bu liste neredeyse her zaman şaşırtıcı derecede uzundur ve sistemin ilk işi bu çeşitliliği makul bir sete indirmektir.
Ardından en çok tekrar eden üç bileşeni seçin; çoğu projede bunlar düğme, form alanı ve karttır. Yalnızca bu üçünü token'lara bağlayarak, bütün durumlarıyla ve dokümantasyonuyla bitirin. Dördüncü bileşene, ilk üçü gerçek sayfalarda kullanıma girmeden geçmeyin. Bu yaklaşım hem erken değer üretir hem de sistemin sonu gelmeyen bir iç projeye dönüşmesini engeller.
Ölçek büyüdüğünde aynı disiplini içerik diline de taşıyın: düğme metinleri, hata mesajları ve boş durum yazıları da tasarım sisteminin parçasıdır. Aynı işlemi bir ekranda "Kaydet", diğerinde "Tamam" diye adlandırmak, görsel tutarsızlıktan daha çok kafa karıştırır.
Son olarak sistemi erişilebilirlik açısından merkezden çözün. Odak halkası, kontrast oranları, dokunma hedefi boyutu ve klavye davranışı bileşen seviyesinde bir kez doğru kurulduğunda, o bileşeni kullanan her sayfa bedava kazanır. Ekip olarak bu kurgunun nasıl kurulduğunu marka kimliği ve arayüz çalışmalarımızda birlikte ele alıyoruz.
