Bu makale, InVision Inside Design'ın izniyle, Shayna Hodkin tarafından kaleme alınan Best practices for design system naming conventions başlıklı makaleden Türkçeye çevrilmiştir. Stiller ve bileşenler için en iyi dosya adlandırma kuralları
🗂 Kategoriler için öneriler
Tasarım sistemleri iki kategoriye sahiptir. Algısal model ve işlevsel model. Bütün tasarım sistemi bileşenleri yukarıdaki iki önemli kategori içine dahildir ve çoklu kategoriler tarafından birçok element birleştirilir.
Algısal modelleri tartışacağız:
- Renk
- Tipografi
- Büyüklük/Boşluk
- Görseller
Adlandırırken, elementlerin kategori ve rollerine odaklanmayı deneyin, biçimine değil.
Örneğin, sisteminizdeki bir mavi buton; rengi belirtilmeden button/primary/default olarak adlandırılmalıdır. Bu adlandırma yapısı elementinizin sisteminizle birlikte gelişmesini sağlar, primary butonun rengi değişirse eğer sisteminizde ve kod temelli bileşenlerde ismini güncellemeniz gerekmez.
Tasarım sistemleri hakkında daha fazla okumak ister misiniz? Kapsamlı rehberimizle başlayın.
En iyi yöntemler 101
Bir bileşenin isimlendirilmesinde tartışılmaz en önemli faktörler şunlardır:
- Tutarlılık
- Belirginlik
- Anlam
Kuralların uygulanmasındaki amaç elementin tasarım sistemindeki rolünü sadece isminden açıkca ortaya koymaktır. “iconsmallblue” size mantıklı gelse de bu üç kurala göre felakettir.
Bunları yapın:
- Kelimeleri tire ve eğik çizgilerle ayırmak
- Bir işlem sırası tipinde yapı takip etmek
- Yalnızca küçük harf kullanmak
Bunlardan uzak durun:
- Numara ve sembol kullanmak
- Renkleri açıklamak ya da font isimleri kullanmak
- Bileşen rolüne odaklanmak
Bu yöntemler uygulandığında, bileşen adları bağlam olmadan anlaşılabilir ve ses çıkarılmasına gerek kalmadan okunabilir olacaktır.
Akılda tutulması gereken bazı faktörler şunlardır:
– Kategori: mobile, inverse, ui
– Yazı: header, hero, title, subtitle, paragraph, button, input, caption
– Büyüklük: large, medium, small, default
– Hizalama: left, center, right
Adlandırma kuralı bilgilerinizi Invision’s Design System Manager’a dahil edin.
Kategoriye özgü kurallara geçelim.
🌈 Renkler
- Yapı: use/variation
- Örnekler: primary/default; tertiary/light
Kullanım örnekleri:
- Doğru: brand/primary
- Yanlış: brand/green1
Renkleri sadece rengin adıyla değil, renk hiyerarşisindeki rolleri ve farklılaştırıcı özelliklerini dikkate alarak isimlendirmek, onu stil rehberini iyi bilmeyen birisi ya da renk körü olan bir paydaş tarafından yanlış anlaşılmaktan korur.
✏️ Metin Stilleri
- Yapı: category/type/size/style/alignment
- Örnekler: para/primary/left; mobile/para/large/bold/right; para/primary/italic/left; inverse; para/small/center
Kullanım örnekleri:
- Doğru: para/primary/left
- Yanlış: para/caption/timesnewroman
Bir altyazı öğesi için spesifik bir metin stiline sahip olmak – eğer bu öğe tasarım sisteminiz içinde bir istisna değilse – çok kısıtlayıcı olabilir. Bunun yanı sıra, metin öğesini gerçek adını kullanmamak en doğrusudur; zira, bu öğe bir yeniden tasarım sürecinde değişebilir — böylece bütün tasarımda bu öğeyi tek tek güncellemek zorunda kalabilirsiniz.
🎨 Katman Stilleri
- Yapı:category/use/variation
- Örnekler: ui/input/default; fill/primary/hover; shadow/high
Bu isimler açık ve belirgin bir şekilde katman stili elementlerine dayanmaktadır ve ortak çalışanlar hiç bir tahminde bulunmazlar.
🛠 Bileşenler
- Yapı: category/type/element/variation, or organism/molecule/atom/variation
- Örnekler: btn/primary/hover; nav/header/mobile/dark; cards/media-block/complex/web
Kullanım örnekleri:
- Doğru: menu/dropdown/default
- Yanlış: menu_dropdown_1
Yukarıdaki isimlendirmeler, bileşen hakkında (görünümü hakkında bir şey söylemeden) bağlam sunar.
Takım arkadaşlarından teşekkürler!
Bu basitleştirilmiş, düzenli ve standartlaştırılmış adlandırma kuralları, şu ana kadar takip ettiğiniz yöntemlerden daha az yaratıcı gelebilir fakat, kullanması daha kolaydır. Ekibiniz ve sisteminiz geliştikçe, adlandırma kurallarınızdaki netlik ve tasarım sisteminizde oynadıkları rol için minnettar olacaksınız.
