# Dört iş tanımı girdi, tek bir tasarım sistemi çıktı ux-skill 4.0'ı yayımlamadan önce ortak yanı olmaması gereken dört iş tanımıyla denettim. Aynı sistemi üretti. İşte bunu düzelten kural ve istemler. https://laithjunaidy.com/tr/writing/four-briefs-one-design-system Yazan Laith Aljunaidy. Yayınlandı: 2026-11-14. --- ![Hikâyeyi özetleyen beş kart: dört iş tanımı, dördünde de 16 piksel gövde metni, «Sabit kurallarla değil, akıllıca düzelt» kuralı, 0.20 alt sınırının üstünde 0.41 mesafeyle en yakın çift ve 4.0.0 sürümü](https://laithjunaidy.com/writing/four-briefs/bento.jpg) *Beş kartta hikâye.* [ux-skill](https://laithjunaidy.com/tr/research/ux-skill) benim açık kaynak tasarım motorum. Bir marka rengi ve bir iş tanımı veriyorsunuz, bir tasarım sistemi oluşturuyor: renk, tipografi, boşluk, köşeler ve hareket. Yapay zekâ araçlarıyla yapılan sayfaların hepsi birbirine benzediği için var. Bunun bitmesini istedim. 25 Eylül 2026'da 4.0 sürümü yakındı. Motor sistemler oluşturuyordu ve her biri, metnin arka planı üzerinde okunabildiğini sınayan 324 kontrast kontrolünün tamamını geçiyordu. O güne kadarki gösterimler küçüktü: motor tek bir kart üzerinde çalışıyordu. Bir kart, marka hakkında hiçbir şey kanıtlamaz. Bu yüzden ilerlemeden önce gerçek sitelerde denettim. Kendi aracınızda da kullanabileceğiniz bir istem olarak deney şöyle: ``` Yayımlamadan önce, ortak hiçbir yanı olmaması gereken dört iş tanımından dört tasarım sistemi oluştur: dükkân sahipleri için Arapçanın öncelikli olduğu bir ödeme uygulaması, sunucu tarafı mühendisleri için varsayılan olarak koyu modda çalışan bir veritabanı aracı, sıcak ve eğlenceli bir aile restoranı ve birçok hastası 60 yaşın üzerinde olan bir klinik. Dördünü yan yana koy ve aynı çıkan her şeyi listele. ``` Bu yazı bir şeyler üreten araç geliştiren herkes için: tasarım sistemleri, yerleşimler, metinler veya kod. Anlamak için kod bilmeniz gerekmiyor. ## Neler aynı çıktı? Neredeyse her şey. ![25 Eylül'deki motorun bir klinik, bir veritabanı aracı, bir restoran ve bir ödeme uygulaması için ürettiği dört sayfa: dört renkte aynı yazı tipi ve aynı boyutlar](https://laithjunaidy.com/writing/four-briefs/before.jpg) *Bu hafta yeniden oluşturduğum 25 Eylül motoru. Yalnızca sistem farklı olsun diye her iş tanımına bilerek aynı sayfayı ve aynı metni verdim. Farklı olan tek şey renk.* O sürümün oluşturduğu dört sistemi ölçtüm: | İş tanımı | Gövde metni | Başlık yazı tipi | Gövde yazı tipi | Düğme köşeleri | | :- | -: | :- | :- | -: | | Klinik, 60 yaş üstü hastalar | 16px | Source Sans 3 | Source Sans 3 | 10px | | Veritabanı aracı, koyu mod öncelikli | 16px | Manrope | Manrope | 6px | | Aile restoranı, eğlenceli | 16px | IBM Plex Sans | IBM Plex Sans | 8px | | Ödeme uygulaması, Arapça öncelikli | 16px | IBM Plex Sans | IBM Plex Sans | 6px | 60 yaş üstündekiler için kliniğe, mühendisler için araçla aynı 16px metin verildi. Eğlenceli restorana ödeme uygulamasının yazı tipi verildi. Her sistem başlıklarda ve gövdede tek bir yazı tipi kullanıyordu. Bilgilendirme mesajının mavisi dördünde de aynı renkti. Durum, tablonun gösterdiğinden kötüydü: - **İş tanımı okunup bir kenara bırakılıyordu.** Motor «birçoğu 60 yaş üstü» ifadesini tanımadığını yazıyor, onu yok sayıyor, sonra da yapılacak bir şey olmadığını bildiriyordu. - **Yazı tipleri yalnızca isimden ibaretti.** Her sistem bir yazı tipi belirtiyor ama onu yüklemenin yolunu sunmuyordu. Bu yüzden gerçek bir sayfa bilgisayarda hangi yazı tipi varsa ona dönüyordu. Yukarıdaki dört sayfanın aynı yazı tipini kullanmasının nedeni bu. - **Marka rengi değiştiriliyordu.** Restoranın turuncusu #E85D04, beyaz metin kontrast kontrolünü geçsin diye düğmede #BB4900 oluyordu. Gerçek turuncu üzerindeki koyu metin de kontrolden geçerdi. Dört sistem de bütün kontrast kontrollerini geçiyordu. Kontroller her sistemin doğru olup olmadığını soruyordu. Hiçbiri iki sistemin farklı olup olmadığını sormuyordu. ## Yanlış çözüm ne? Hızlı çözüm bir tablo. Restoran, yuvarlak köşeler ve samimi bir yazı tipi demek. Klinik, büyük metin demek. Geliştirici aracı, keskin köşeler ve koyu mod demek. Bu bir çıkmaz. Tablo, daha fazla satırı olan bir şablondur. Kimsenin listelemediği ilk iş tanımında bozulur ve dünyadaki her restorana aynı restoranı verir. Aracın ortadan kaldırmak için var olduğu tekdüzelik budur. Bulguların listesi önüme geldi. Kararım tek satırdı: ``` Hepsi doğru. Sabit kurallarla değil, akıllıca düzelt. ``` Sabit kurallar, o tablo demek. Akıllıca çözmek ise her değeri bu iş tanımından ve bu markadan türetmek demek. Aralık, bir insanın farkı görebileceği kadar geniş olmalı. Kendi aracınıza verebilmeniz için aynı kuralın açık hâli şöyle: ``` Sektör veya kategori başına bir eşleştirme tablosu ekleme. Her değeri bu iş tanımından ve bu markadan türet: metin boyutu, yazı tipi, köşeler, boşluklar, renk rolleri ve hareket. Gözle fark edilebilecek kadar geniş bir aralık kullan. Ürünün kimin için olduğunu oku: yaş, diller, hangi yazı sisteminin öncelikli olduğu, varsayılanın açık mı koyu mu olduğu, masa başında mı hareket hâlinde mi okunduğu. Her değerin nedenini rapora yaz. İş tanımındaki bir şeyi yorumlayamadıysan ne olduğunu ve sana nasıl verilmesi gerektiğini söyle. Asla yapılacak bir şey olmadığını bildirme. ``` ## «Farklı» olduğunu nasıl test edersiniz? «Birbirinden farklı yap», bir aracın geçebileceği veya kalabileceği bir ölçüt değil. Bir sayı ise öyle. Böylece fark ölçülebilir hâle geldi. Motor her sistem çifti için bir insanın ilk bakışta gördüklerini karşılaştırıyor: renk, tipografi, boyutlar, köşeler, gölgeler ve boşluklar. Tek bir mesafe döndürüyor: 0 aynı demek, 1 ise her şeyin farklı olduğu anlamına geliyor. Alt sınır 0.20 olarak belirleniyor. Denemedeki iş tanımlarından herhangi bir çiftin mesafesi bunun altındaysa test paketi başarısız oluyor. Test paketini geçemeyen değişiklik de kabul edilmiyor. ``` Her çıktı çifti için bir insanın ilk bakışta gördüklerinin ne kadar farklı olduğunu ölç: renk, tipografi, boyutlar, köşeler, gölgeler ve boşluklar. Her çift için tek bir sayı ver; 0 aynı, 1 ise her şey farklı demek olsun. Bir alt sınır belirle. Herhangi bir çiftin mesafesi alt sınırın altında kalırsa testleri başarısız kıl. ``` Sistemlere karakter kazandıran çalışma aynı gün eklendi: 09:22 ile 16:31 arasında 44 değişiklik. 4.0'ın geri kalanı beş hafta daha sürdü. ## Dördü şimdi nasıl görünüyor? ![4.0.0 sürümündeki aynı dört sayfa: dört farklı başlık yazı tipi, farklı metin boyutları ve farklı köşeler; veritabanı aracı da koyu modda](https://laithjunaidy.com/writing/four-briefs/after.jpg) *4.0.0 sürümünde aynı dört iş tanımı. Aynı sayfa, aynı metin. Sistemler artık farklı.* | İş tanımı | Gövde metni | Başlık yazı tipi | Gövde yazı tipi | Düğme köşeleri | | :- | -: | :- | :- | -: | | Klinik, 60 yaş üstü hastalar | 18px | Newsreader | Source Sans 3 | 9px | | Veritabanı aracı, koyu mod öncelikli | 16px | Space Grotesk | Manrope | 2px | | Aile restoranı, eğlenceli | 17px | Baloo 2 | Nunito Sans | 11px | | Ödeme uygulaması, Arapça öncelikli | 16px | Sora, Arapça için Alexandria | IBM Plex Sans | 2px | Kliniğin metni daha büyük, çünkü iş tanımı onu kimin okuduğunu söylüyordu. Rapor da bunu açıklıyor. Veritabanı aracı koyu modda açılıyor, çünkü iş tanımı bunu istiyordu. Her sistemin başlık yazı tipi gövdeninkinden farklı ve ikisini de yükleme yolu sunuluyor. Bilgilendirme mavisi artık her biri kendi markasına uyarlanmış dört farklı mavi. İkisi hâlâ 16px metin ve 2px köşeleri paylaşıyor: veritabanı aracı ile ödeme uygulaması. Yazı tipi, renk ve yerleşimleri farklı. Bu yüzden mesafeleri sıfır değil, 0.46. 0.20 alt sınırının üstündeki altı mesafe: | Çift | Mesafe | | :- | -: | | Klinik ve veritabanı aracı | 0.41 | | Klinik ve restoran | 0.53 | | Klinik ve ödeme uygulaması | 0.46 | | Veritabanı aracı ve restoran | 0.56 | | Veritabanı aracı ve ödeme uygulaması | 0.46 | | Restoran ve ödeme uygulaması | 0.54 | Bir şey hâlâ doğru değil. Restoranın düğmesi 4.0.0'da #CA5000. Bu, Eylül'deki #BB4900'a göre markanın #E85D04 rengine daha yakın. Yine de markanın turuncusu değil. Dört sayfa da iyi. Hiçbiri durup uzun uzun bakacağınız bir sayfa değil. Bu sürüm için bunu kabul ettim: 4.0'ın adı Foundations, çünkü yaptığı şey temelleri atmak. Denemenin yapıldığı sabah motorda 3,315 test vardı. 4.0.0 sürümü 13,059 testle yayımlandı. ## Yayımlandı dediğimde gerçekten yayımlanmış mıydı? Hayır. Aynı türden bir kontrol bunu da yakalardı. 2 Kasım'da 4.0.0'ı yayımlanmış olarak etiketledim. 11 Kasım'da beni tanımayan birinin kurulum yaptığında ne aldığını kontrol ettim. Kurulum komutunun indirme yaptığı yer olan herkese açık paket deposu, hâlâ 23 Eylül'de yayımlanan 3.2.0'ı sunuyordu. Sürüm notları 4.0 diyordu. Kurulum 3.2 diyordu. 4.0.0'ın 12 Kasım'da yüklenmesine kadar on gün böyle kaldı. Yine Eylül'deki hata. Kendi tarafımı kontrol etmiştim: kodu, etiketi ve notları. Bir insanın eline ne geçtiğini kontrol etmemiştim. O kontrol artık her yayının parçası: ``` Her yayından sonra paketi herkese açık paket deposundan temiz bir makineye, yeni bir kullanıcının yapacağı gibi kur. Sürümü yazdır. Duyurulan sürümle eşleşmiyorsa sürüm yayımlanmamış demektir. Başkası fark etmeden bana haber ver. ``` ## Bir şeyler üreten araç geliştiriyorsanız - Tek bir çıktının doğruluğunu test etmek yerine dört çıktıyı birbiriyle karşılaştırın. - Kolay test girdileri seçmek yerine ortak hiçbir yanı olmaması gereken girdiler seçin. - Tekdüzeliği kategori başına bir tabloyla düzeltmek yerine her değeri girdiden türetin. - «Daha fazla çeşitlilik» istemek yerine çıktılar arasındaki mesafeyi ölçün ve bir alt sınır koyun. - Aracın yorumlayamadığını atlamasına izin vermek yerine neyi atladığını söylemesini sağlayın. - Sürüm notlarınıza güvenmek yerine kendi ürününüzü yeni bir kullanıcının yapacağı gibi kurun. Beklediğim soru şu: dört iş tanımı küçük bir örneklem, neden güvenelim? Bunu bir ölçü olarak kullanmıyorum. Ortak hiçbir yanı olmaması gereken dört iş tanımı, her şeyi birbirine benzeten bir aracı yakalamaya yeter. Üstelik tek ekrana koyup gözle değerlendirebileceğiniz kadar azdır. Geri kalanını alt sınır karşılıyor: motora önerilen her değişiklikte bu test çalışıyor. ux-skill ücretsiz ve açık kaynak. Ayrıntılar ve kod bağlantısı [proje sayfasında](https://laithjunaidy.com/tr/research/ux-skill).