UI Kit mi Tasarım Sistemi mi? Arayüz Parçalarından Ortak Dile

İki kavramı ayıran şey: dosya mı, düzen mi?

UI kit, bir arayüzü kurmak için gereken hazır parçaların toplamıdır: düğmeler, form alanları, menüler, kartlar, simgeler, renk ve yazı stilleri. Çoğunlukla bir tasarım aracında paylaşılan bir dosya ya da kütüphane olarak gelir. Tasarımcı bu parçaları sürükleyip bırakarak hızlıca ekran üretir. Hazır satın alınan ya da açık kaynak olarak indirilen UI kitler de vardır; bunlar bir projeye hızlı başlangıç sağlar.

Tasarım sistemi ise Nielsen Norman Group'un tanımıyla, tasarımı ölçekli yönetmek için yeniden kullanılabilir bileşenler ve desenler kullanan eksiksiz bir standartlar bütünüdür. NN/g'ye göre tasarım sistemi deposu genellikle bir stil kılavuzu, bir bileşen kütüphanesi ve bir desen kütüphanesi içerir. Bileşen kütüphanesi, arayüz öğelerini kullanım notları, nitelikleri, durumları ve kodlarıyla birlikte sunar.

Bu tanım farkı netleştirir. UI kit, tasarım sisteminin bileşen kütüphanesinin tasarım aracındaki görünen yüzüne benzer. Tasarım sistemi ise bu parçaların kodla eşleştiği, kullanım kurallarının yazıldığı, sahibinin ve değişim sürecinin tanımlandığı bütündür. NN/g'nin vurgusuyla tasarım sistemi bir çalışma portföyü gibi değil, işlevsel bir araç seti ve kaynak gibi düşünülmelidir.

UI kitten tasarım sistemine: birbirinin üzerine kurulan katlar

Bir ekip genellikle tasarım sistemine birden geçmez; UI kitin üzerine katlar ekleyerek ilerler. Her kat bir öncekinin varlığına dayanır.

Başlangıç noktası UI kittir: tasarımcıların ortak kullandığı parçalar. İkinci kat temel kararların adlandırılmasıdır: renkler, boşluklar, yazı ölçekleri ve köşe yarıçapları gibi değerler design token olarak tanımlanır ve hem tasarım dosyasında hem kodda aynı adla kullanılır. Üçüncü katta bileşenler kodlanır: tasarım aracındaki düğmenin karşılığı, geliştiricilerin kullandığı ve aynı durumları taşıyan bir kod bileşeni olur.

Dördüncü kat kullanım kuralları ve desenlerdir: hangi durumda birincil düğme kullanılır, bir form hatası nasıl gösterilir, boş bir liste ekranı nasıl tasarlanır? Son kat yönetişimdir: sistemin sahibi kim, yeni bir bileşen nasıl önerilir, değişiklikler nasıl sürümlenir ve ekiplere duyurulur?

Bir ekip ikinci ya da üçüncü katta durabilir ve bu bilinçli bir karar olabilir. Ama son katlar olmadan yapılan şeye tasarım sistemi demek, beklenti yanılgısı yaratır.

Ölçüt ölçüt UI kit ve tasarım sistemi

• Ölçüt: Ne içerir. UI kit: hazır arayüz parçaları ve stiller. / Tasarım sistemi: stil kılavuzu, bileşen kütüphanesi, desen kütüphanesi, kod bileşenleri ve dokümantasyon.
• Ölçüt: Kimin için. UI kit: ağırlıkla tasarımcılar. / Tasarım sistemi: tasarımcılar, geliştiriciler, ürün yöneticileri ve içerik yazarları için ortak dil.
• Ölçüt: Kod ile ilişki. UI kit: tasarım dosyasında kalır; koddaki karşılığı ayrı yazılır ve zamanla ayrışabilir. / Tasarım sistemi: tasarım ve kod bileşenleri aynı adları ve durumları paylaşır.
• Ölçüt: Kurallar. UI kit: parçaların nasıl kullanılacağı genellikle tasarımcının yorumuna kalır. / Tasarım sistemi: kullanım notları ve desenler yanlış kullanımı önler.
• Ölçüt: Sahiplik ve bakım. UI kit: hazırlandığı projeyle birlikte eskir. / Tasarım sistemi: NN/g'ye göre sürekli bakım ve gözetim gerektirir, aksi hâlde eskir.
• Ölçüt: Maliyet. UI kit: hızlı ve düşük maliyetli başlangıç. / Tasarım sistemi: NN/g'ye göre oluşturmak ve sürdürmek zaman alan, ayrılmış bir ekip gerektiren bir iştir.

Kod ile ilişki satırı, iki kavram arasındaki en pahalı farktır. Tasarım dosyasındaki düğme bir renk değiştirdiğinde, tasarım sisteminde bu değişiklik token üzerinden koda da yansır. Yalnız UI kit olan ekipte ise aynı değişiklik geliştiricilere ayrıca anlatılmak zorundadır ve bir süre sonra ürünün farklı ekranlarında farklı düğmeler görünür.

Hangi durumda UI kit yeter, ne zaman tasarım sistemi gerekir?

Nielsen Norman Group, tasarım sisteminin yıllar boyunca tekrar eden tasarım işi beklendiğinde karşılığını verdiğini, kısa ömürlü bir prototipin bu yatırımı nadiren haklı çıkardığını belirtir. Bu ilke seçimin omurgasıdır.

UI kit genellikle şu durumlarda yeterlidir: tek bir ürün ve küçük bir tasarım ekibi, kısa ömürlü bir kampanya sitesi ya da prototip, ya da henüz ürün yönünün bulunmaya çalışıldığı erken dönem. Bu aşamada ağır bir yönetişim süreci hızı düşürür.

Tasarım sistemine geçişin işaretleri ise genellikle kendiliğinden belirir: aynı düğmenin farklı ekranlarda farklı görünmesi, geliştiricilerin her ekip için aynı bileşeni yeniden yazması, birden fazla ürün ya da platformun aynı markayı taşıması, yeni katılan tasarımcının hangi parçayı kullanacağını sorarak öğrenmesi.

NN/g bir seçeneğe daha dikkat çeker: mevcut bir tasarım sistemini kullanmak en ucuz yoldur, ancak yoğun özelleştirme maliyeti artırır. Açık kaynak bir sistemi temel alıp yalnız marka katmanını değiştirmek, sıfırdan sistem kurmaktan çoğu zaman daha gerçekçidir.

Tasarım sistemini yaşatan döngü

Tasarım sistemini UI kitten ayıran son kat yönetişimdir ve yönetişim bir kez yapılan bir iş değil, tekrar eden bir döngüdür.

Döngü bir ihtiyaçla başlar: bir ürün ekibi sistemde olmayan bir bileşene ya da mevcut bir bileşenin yeni bir durumuna ihtiyaç duyar. Ekip bunu bir katkı önerisi olarak getirir. Sistem ekibi öneriyi inceler: bu ihtiyaç başka ekiplerde de var mı, mevcut bir bileşenin varyantı olarak çözülebilir mi, erişilebilirlik ve tutarlılık kurallarına uyuyor mu? Kabul edilen değişiklik tasarımda ve kodda birlikte uygulanır, sürümlenir ve değişiklik notuyla duyurulur. Ekipler yeni sürümü benimsedikçe gelen geri bildirim, bir sonraki ihtiyacın kaynağı olur.

NN/g, bir tasarım sisteminin ancak onu yöneten ekip kadar etkili olduğunu ve başkalarına kullanımını öğretmenin de zaman aldığını vurgular. Döngü işlemezse sistem iki yönden bozulur: ya ekipler sistemin dışında kendi bileşenlerini üretir, ya da sistem değişmeyen bir UI kite geri döner.

Mindset programlarında bu farkı nerede çalışırsınız?

UX / UI Uzmanlığı Sertifika Programı, Figma ileri düzey kullanımı ve tasarım sistemi modülünü geliştirici iş birliği ve tasarımdan koda geçiş konularıyla birlikte ele alır; UI kitle çalışan bir ekipten tasarım sistemi kuran bir ekibe geçmek isteyen tasarımcılar için başlangıç noktasıdır.

Sistemi derinleştirmek isteyenler için Figma ile Tasarım Sistemi eğitimi token ve bileşen kütüphanesi kurulumunu, Tasarım Sistemi Bileşen Kütüphanesi Geliştirme (Storybook) eğitimi kod tarafını, Tasarım Sistemi Yönetişimi, Sürümleme ve Katkı Modeli eğitimi ise döngünün yönetimini ele alır.