Vercel'in tasarım sistemi spesifikasyonu, gördüklerim arasında gerçekten ders kitabı niteliğinde bir örnek.
Bugün, DESIGN.md dosyalarını ciddi bir şekilde inceledim. Hem açık hem de koyu temalarla, renkleri, yazı tiplerini, boşlukları, bileşenleri, hareketi ve metin yazımı kurallarını uygulanabilir bir tasarım metodolojisine dönüştürüyor.
Gelecekteki tüm ürünlerim için design.md dosyalarını bu yolu izleyerek yazabileceğimi hissediyorum.
Detaylar burada:
Bazı arkadaşlar DESIGN.md'nin ne olduğunu tam olarak bilmiyor olabilir. Basitçe söylemek gerekirse, AI'ın okuması için bir tasarım spesifikasyonudur. AI kod yazmamıza yardımcı olurken hangi renkleri kullanacağını, hangi yazı tipi boyutlarını uygulayacağını ve öğeler arasındaki boşluğu bilmesi gerekir.
Bu dosya olmadan, AI'ın ürettiği arayüzler her seferinde farklı görünür ve tutarsız bir stile sahip olur.
Vercel'in DESIGN.md'sini okuduktan sonra, iyi bir DESIGN.md'nin AI'ya sadece hangi hex kodlarını veya yazı tipi boyutlarını kullanacağını söylemekten çok daha fazlası olduğunu fark ettim. Bütün bir tasarım düşüncesini temsil ediyor. Algımı oldukça değiştirdi.
Bugün, bu dosyanın neden bu kadar iyi olduğunu adım adım açıklayacağım.
1
Öncelikle, renklerden bahsedelim.
DESIGN.md yazmaya ilk başladığımda, renk bölümü aslında çok basitti. Birkaç renk değeri listeler, AI'ya hangisinin birincil, ikincil ve vurgu rengi olduğunu söylerdim ve bu kadardı.
Ancak bu şekilde yazıldığında, AI hala bu renklerin farklı etkileşim durumlarına nasıl karşılık geldiğini bilmiyor.
Örneğin, bir düğme için varsayılan durumun rengi ne olmalı? Üzerine gelindiğinde ne kadar koyulaşmalı? Tıklandığı anda hangi renkte olmalı? Bu detaylar açıkça tanımlanmazsa, AI tarafından üretilen sonuçlar her seferinde farklılık gösterebilir.
Vercel'in yaklaşımı bu sorunu tamamen çözüyor.
Tasarım sistemlerinde, her renk serisi 100'den 1000'e kadar 10 gradyana ayrılır ve her sayı sabit bir arayüz durumuna karşılık gelir.
100, öğeler için varsayılan arka plan, 200, üzerine gelindiğinde arka plan ve 300, tıklandığında arka plandır. Yukarı çıktıkça, 400 varsayılan kenarlık, 500 üzerine gelindiğinde kenarlık ve 600 tıklandığında kenarlıktır.
700, etiketler veya düğmenin kendisi gibi düz renk blokları için kullanılır; 800, bu blokların üzerine gelme durumudur. 900, ikincil metin ve simgeler için kullanılır ve 1000, birincil metin ve simgeler için kullanılır.
Sadece sayısal numaralandırma gibi görünüyor, ancak arkasında tam bir etkileşim mantığı yatıyor.
100'den 300'e kadar arka plan durumlarını yönetir. 400'den 600'a kadar kenarlık durumlarını yönetir. 700 ve 800, düz renk blok durumlarını yönetir. 900 ve 1000, bilgi hiyerarşisini yönetir.
Başka bir deyişle, Vercel aslında AI'ya burada birkaç durum olduğunu söylüyor. Renk, bu durumların sadece bir tezahürüdür.
Bunun faydaları çok doğrudandır.
AI kod yazarken, bir düğmenin üzerine gelindiğinde ne kadar koyulaşacağını veya kenarlığın nasıl değişeceğini tahmin etmesi gerekmez. Varsayılan durum 100'e, üzerine gelme 200'e ve tıklama 300'e karşılık gelir; kurallar önceden tanımlanmıştır.
Ayrıca, bu temelde Vercel hem açık hem de koyu temalar sağlar, ancak tamamen aynı Token adlarını kullanır.
Örneğin, gray-1000. Açık temada, #171717, siyaha yakın. Koyu temada, #ededed, beyaza yakın hale gelir.
Bir tasarım sistemi için bu iki renk aslında aynı şeydir.
Her ikisi de sayfadaki en önemli bilgiyi temsil eder. Geliştiriciler ve AI, arayüzler oluştururken gray-1000'in arkasındaki belirli hex değerine değil, anlamsal anlamına odaklanır. Tema değiştiğinde, sistem bu anlamsal anlamı otomatik olarak karşılık gelen renge eşler.
2
Renk sorununu çözdükten sonra, bir diğer önemli kısıtlama sayfanın ritmidir.
Vercel'in boşluk sistemi 4px'in katlarına dayanır ve toplamda sadece 9 değer sağlar: 4, 8, 12, 16, 24, 32, 40, 64, 96. Tüm üründeki tüm boşluklar bu sayılar arasından seçilir.
İlk tepkim bunun biraz sınırlı olduğuydu. Ya 20px'e ihtiyacım olursa? Ya 28px'e ihtiyacım olursa?
Bir tasarımcı arkadaşıma sordum ve ürünlerin büyük çoğunluğu için 9 boşluk stilinin temelde yeterli olduğunu söyledi.
Çok fazla boşluk seçeneği varsa, sayfanın ritmi kaybolur. Birçok berbat web sitesinin çok gelişigüzel boşluk tasarımları vardır. Bu aslında ürün tasarımında büyük bir tabudur.
Mükemmel tasarım sistemleri sonsuz seçenek sunmaz; seçenekleri aktif olarak sınırlar.
Vercel doğrudan net bir ritim önerisi seti sağlar: bir grup içindeki öğeler arasında 8px, gruplar arasında 16px ve bölümler arasında 32 ila 40px boşluk bırakın. Bu gerçekten sayfanın nefes alma ritmini tanımlıyor.
Kullanıcılar bu boşlukları fark etmeyebilir, ancak hangi parçaların aynı bütüne ait olduğunu ve yeni bir içerik alanının nerede başladığını doğal olarak hissedeceklerdir.
Çoğu zaman, bir sayfanın rahat görünmesinin nedeni tasarımcının ileri düzey bir teknik kullanması değil, bu ritmin sayfa boyunca tutarlı tutulmasıdır.
Tipografi de aynı mantığı izler.
Vercel'in yazı tipi sistemi, renk ve boşluk mantığıyla aynıdır.
Tüm metinler birkaç sabit role ayrılır: başlık, etiket, gövde metni ve düğme.
Her rol altında, farklı boyutlarda Token'lar sağlanır ve her Token'ın önceden tanımlanmış yazı tipi, boyutu, ağırlığı, satır yüksekliği ve harf aralığı vardır.
Daha önce, bir metin parçasıyla karşılaştığında, bir tasarımcı 14px mi yoksa 15px mi kullanacağını ve hangi satır yüksekliğinin uygun olduğunu düşünebilirdi.
Bir tasarım sistemiyle düşünme şekli değişir. AI önce bu metnin hangi rolü oynadığını belirler. Bir başlık mı, gövde metni mi yoksa ikincil bilgi mi? Rol belirlendikten sonra, karşılık gelen stil de belirlenir.
Yazı tipi boyutu zihniyetinden rol temelli bir zihniyete geçiş. Görsel karar vermeden anlamsal karar vermeye. Tasarım sisteminin gerçek değeri burada yatıyor. Harika.
Bunu gördüğünüzde, ister boşluk ister yazı tipleri olsun, Vercel'in aynı şeyi yaptığını fark ediyorsunuz: uygulama aşamasında serbest oyunu mümkün olduğunca azaltmak, kurallar önceden belirlenmiş, böylece uygulama sadece bir rol seçmeyi gerektiriyor.
Bu, tasarımcılar, geliştiriciler ve AI için geçerlidir.
3
Ayrıca, metin yazımı da Vercel'in tasarım spesifikasyonunun önemli bir parçası olarak ele alınır. Bu, çoğu DESIGN.md dosyasında en kolay eksik kalan kısımdır.
Vercel bu detayları çok spesifik bir şekilde tanımlar.
Örneğin, düğme metni bir eylem artı bir nesne olmalıdır. "Projeyi Dağıt" veya "Üyeyi Sil" gibi. Sadece "Dağıt", "Tamam" veya "Sil" gibi belirsiz kelimeler yazamazsınız.
Sebebi basit. "Sil" yazısını gördüğünde, kullanıcı hala tam olarak neyin silindiğini düşünmek zorundadır. Bir eylem ve bir nesne ile kullanıcı hemen tam bir anlayış oluşturabilir.
Hata mesajları da benzerdir. Vercel'in kuralları açıktır. Önce kullanıcıya ne olduğunu söyleyin. Ardından, kullanıcıya bundan sonra ne yapması gerektiğini söyleyin.
Örneğin, paket dosyası boyut sınırını aştığı için bir derleme başarısız olursa, çözüm boyutu küçültmek veya sınırı ayarlamaktır. Üç cümle okuduktan sonra, kullanıcı sorunun nerede olduğunu ve bundan sonra ne yapması gerektiğini hemen bilir.
Birçok üründeki hata uyarıları "İşlem başarısız oldu, lütfen daha sonra tekrar deneyin" şeklindedir. Böyle bir uyarının bilgi içeriği neredeyse sıfırdır. Kullanıcının okuduktan sonra aldığı tek bilgi başarısız olduğudur. Neden başarısız olduğu ve bundan sonra ne yapılacağı konusunda hala tahmin yürütmek zorundadır.
Bir tasarım sistemindeki metin yazımı spesifikasyonları temelde bu tahmin yürütmeyi azaltmaktır.
Vercel ayrıca bir işlem tamamlandıktan sonraki bildirim mesajlarını da standartlaştırmıştır; bunlar sadece hangi değişikliğin meydana geldiğini belirtmelidir. Örneğin, "Proje silindi", "Proje başarıyla silindi" değil.
Çünkü uyarı kutusunun açılabilmesi, işlemin tamamlandığını zaten gösterir. "Başarıyla" kelimesi gereksiz bilgidir.
Sıradaki hareket.
Bu kısım özellikle ilginç çünkü sezgilerimin tam tersi. Animasyon ne kadar fazlaysa, ürünün o kadar rafine olduğunu düşünürdüm.
Bu yüzden, bir düğmenin üzerine gelindiğinde veya bir menü açıldığında biraz animasyon eklemek, onu lüks gösteriyor gibi görünüyor. Şu anda birçok Vibe Coding ürünü bu yönde ilerliyor gibi görünüyor.
Ancak Vercel'in tutumu tamamen farklı. Hatta birçok etkileşim senaryosunda 0 milisaniyenin genellikle en iyi seçenek olduğunu açıkça yazmışlar. Yani, animasyon yok, anında tamamlanır.
Bir düğme varsayılan durumdan üzerine gelme durumuna değişirse, bu değişiklik zaten yeterince açıktır. En iyi geri bildirim, bunun hemen olmasıdır; fazladan bir animasyon katmanı eklemek, arayüzün yavaş hissettirmesine neden olur.
Tabii ki, bazı senaryolar hareket gerektirir.
Örneğin, bir açılır pencere aniden belirir. Hiçbir geçiş yoksa, insanlar nereden geldiğini bilemez. Animasyonun değerli olduğu yer burasıdır.
Vercel, farklı senaryolar için süreyi bile belirtir. Normal durum değişiklikleri yaklaşık 150 milisaniye, açılır pencereler yaklaşık 200 milisaniye ve modaller yaklaşık 300 milisaniyedir.
Değişiklik ne kadar büyükse, o kadar fazla tepki süresi verilir. Değişiklik ne kadar küçükse, geri bildirim o kadar doğrudan olur.
Arkasındaki mantık her zaman aynıdır: gerekmedikçe hareket etme ve hareket etmen gerektiğinde hızlı, hafif ve ölçülü tut.
Üzerimde derin bir izlenim bırakan son kısım erişilebilirlik.
Dürüst olmak gerekirse, daha önce bu kısma pek özel bir dikkat göstermezdim. Çoğu zaman, bir ürünün arayüzü iyi görünüyorsa ve işlevler çalışıyorsa, yeterli gibi görünür. Ancak Vercel bu kısmı çok ciddiye almış.
Metin ve arka plan arasında yeterli kontrast olmasını gerektirirler. Durum değişiklikleri sadece renge dayanamaz; simgeler veya metin açıklamalarıyla eşleştirilmelidir.
Tüm etkileşimli öğeler net bir odak durumuna sahip olmalı ve görsel temizlik uğruna kaldırılamaz.
Bu kurallar, tasarım sisteminin herkese hizmet ettiği anlamına gelir; buna düşük renk hassasiyeti olanlar, klavyeyle gezinmek zorunda kalanlar ve parlak ışıkta telefonlarına bakanlar dahildir.
Bu DESIGN.md çok profesyonel. Bence herkes gelecekte yeni ürünler yaparken, bu iki MD dosyasının fikirlerine dayanarak kendi DESIGN.md'sini yazabilir.
