Bir arayüz büyüdükçe asıl maliyet yeni ekran yazmak değil, var olanları tutarlı tutmaktır. Aynı kartın altı farklı yerde altı farklı sürümü varsa, tek bir tasarım değişikliği altı ayrı düzenleme demektir.
Tek kaynak ilkesi
Sayfaları besleyen her tekrarlı içerik tek bir modülden gelmelidir. Bu sitede projeler, yazılar ve iletişim bilgileri ayrı veri dosyalarında tutuluyor; sayfalar bu verinin yalnızca görüntüleyicisi. Yeni bir proje eklemek arayüz kodunu değil, bir kaydı değiştiriyor.
Bileşenleri üç katmanda düşünün
| Katman | Sorumluluk | Örnek |
|---|---|---|
| İlkel | Tek bir görsel davranış | Buton, rozet, başlık |
| Bileşik | Bir veri kaydını sunar | Proje kartı, yazı kartı |
| Bölüm | Sayfa düzenini kurar | Hero, liste bölümü, CTA |
Bu ayrım korunduğunda yeni bir sayfa yazmak, mevcut bölümleri farklı veriyle dizmek anlamına gelir. Tasarım dili tek yerde tanımlı olduğu için de tutarlılık kendiliğinden gelir.
Tasarım tokenlarını koda gömmeyin
- Renk, tipografi ve boşluk değerleri merkezi bir stil dosyasında tanımlanır.
- Bileşenler sabit renk değil, anlamsal token kullanır (arka plan, vurgu, kenarlık).
- Yeni bir marka rengi eklemek tek satırlık bir token tanımıdır; bileşenler değişmez.
Ölçeklenebilirliğin testi
Mimarinizin sağlam olup olmadığını anlamanın basit bir yolu var: yeni bir içerik birimi eklemek kaç dosyaya dokunmayı gerektiriyor? Cevap birden fazlaysa, orada tekrar eden bir yapı henüz soyutlanmamış demektir.