Yeniden markalaşmak, web sitesini yeniden kurmak anlamına gelmemeli. Arayüzünüz renklerini, boşluklarını ve tipografisini dağınık hex kodları yerine adlandırılmış değerler olarak saklıyorsa, markayı değiştirmek bir projeye değil küçük bir düzenlemeye dönüşür. Bu adlandırılmış değerlere tasarım token'ları denir.
Tasarım token'ı tam olarak nedir
Bir tasarım token'ı, bir tasarım kararının yerini tutan bir isimdir. Elli farklı yerde #0A0A0A yazmak yerine color-text-primary'yi bir kez tanımlar ve her yerde bu ismi kullanırsınız. Aynı fikir boşluklar (space-4), yazı boyutları (font-size-lead), köşe yarıçapları, gölgeler ve animasyon süreleri için de geçerlidir. Token tek doğruluk kaynağıdır; diğer her şey ona işaret eder.
Marka değişince bu neden önemli
Bir marka evrildiğinde — yeni bir ana renk, biraz daha sıkı bir tipografik ölçek, daha yuvarlak köşeler — iş artık tek bir dosyada toplanmıştır. Token değerlerini güncellersiniz ve bunlara referans veren her düğme, kart, form ve başlık onunla birlikte güncellenir. Token olmadan aynı değişiklik, stil dosyalarını ve bileşenleri tek tek taramak demektir ve bazılarını mutlaka kaçırırsınız.
Fotoğraf: stefano manzini / Unsplash
İki katman esnekliği korur
İyi token sistemleri, bir değerin ne olduğunu nasıl kullanıldığından ayırır:
- İlkel (primitive) token'lar ham değerleri adlandırır:
green-500,grey-950,size-16. Nadiren değişirler. - Anlamsal (semantic) token'lar amacı adlandırır:
color-action,color-surface,space-section. İlkellere işaret ederler ve bileşenlerinizin gerçekten kullandığı şey bunlardır.
Yeniden markalaşma genellikle yalnızca aradaki eşleştirmeye dokunur — color-action'ı bir ilkelden diğerine yeniden yönlendirirsiniz — bileşenler ise olduğu gibi kalır.
Seti küçük tutun
En sık yapılan hata çok fazla token'dır. Her ekran yeni bir boşluk değeri getiriyorsa elinizde bir sistem değil, bir liste vardır. Sıkı bir ölçekle başlayın — birkaç boşluk adımı, beş altı yazı boyutu, küçük bir renk seti — ve aynı yeni değer üç ayrı yerde ortaya çıkmadan yeni bir token eklemeyin.
Token'lar nerede durur
Çoğu site için :root üzerindeki CSS özel değişkenleri yeterlidir ve çalışma zamanında temalandırılabilir. Daha büyük ürünler token'ları formattan bağımsız bir dosyada (genellikle JSON) tutar ve buradan CSS, iOS ve Android çıktıları üretir; böylece her platform tek bir tanımı paylaşır. Her iki durumda da kural aynıdır: tasarımcılar ve geliştiriciler isimler üzerinde anlaşır ve hiçbir yer, bir token'ın zaten kapsadığı bir değeri sabit olarak yazmaz.
Özetle
Token'lar "markayı değiştir" işini yeniden inşadan bir yapılandırma değişikliğine dönüştürür. Bunları tasarım ve web geliştirme çalışmalarımızın bir parçası olarak kuruyoruz — bir yenileme planlıyorsanız ve sitenin buna ayak uydurmasını istiyorsanız bizimle iletişime geçin.