Bugünkü içeriğimizde tasarım sistemlerini daha iyi anlamak ve en efektif şekilde kullanmak için, herkesin kendini içinde bulacağı ikilemlere bakıyoruz. Tasarım sistemlerinin değeri günbegün artarken, bu alana dair eksiklerimizi kapamak için kısa bir rehber hazırladık. İyi okumalar!

‍

İçindekiler:

1. Tasarım Sistemleri Nedir?
2. Peki Dilemma Bunun Neresinde?
3. Dokümantasyon Ekipleri Yönlendirmek İçin Yeterli mi?
4. Bileşenlere Daha Yakından Bakalım
5. Tasarım Sistemleri İkilemlerini Özetliyoruz

‍

Tasarım Sistemleri Nedir?

Tasarım sistemleri nedir sorusuna farklı içeriklerde gerekli yanıtları sağlasak da bu konunun iyice anlaşıldığından emin olmak önemli. Tasarım sistemleri baştan sona tutarlı bir dil ile dijital dönüşümü mümkün kılan bileşenler ve kullanım kılavuzları bütünüdür. Bu sistemlerin yaratılmasında ve kullanımında ise temel olarak tasarım sistemleri ekibi, tasarım ekibi ve geliştirme ekipleri ürünün hacmine göre görev üstlenir. Tasarım sistemleri baştan sona tutarlı bir dili optimize kullanıcı deneyimi için yalnızca dizayn etmekle kalmaz; kullanım amaçları, yeri ve ipuçlarını da dokümente eder. Yaratılan bileşenler aynı zamanda kodlanarak yeniden kullanıma açık hale getirilir.

‍

Peki Dilemma Bunun Neresinde?

‍

Bu seçenekler arasındaki farkı açıkça ortaya koyabilen el kaldırsın! Tasarım sistemleri tüm ekip için yeniden kullanılabilir bileşenlerin kapısını açık tutsa da, zaman zaman seçenekler arasından yanlış bileşen seçimi yapılabilir. Örneğin, bu örneklerinden herhangi biri, “kaydol” butonumuz için bize yardımcı olabilir diye düşünebiliriz.

Aralarındaki Farklar:

• Etkileşim: Çipler ve haplar, kullanıcı etkileşimi gerektirirken, rozetler genellikle statik bilgi sunar ve kullanıcı ile etkileşime girmeyi gerektirmez.
• Amaç: Çipler, genellikle filtreleme veya seçim yapma gibi etkileşim odaklı durumlar için kullanılırken, rozetler bilgi sağlamak amacıyla kullanılır. Haplar ise seçimleri ve kullanıcı durumlarını temsil eder.
• Görünüm: Çipler ve haplar genellikle benzer görünümlere sahip olabilir, ancak kullanıldıkları bağlam ve etkileşim biçimleri onları farklı kılar. Rozetler ise genellikle daha sade bir tasarıma sahiptir.

Peki seçimi neye göre yapacağız? Burada devreye dokümantasyon dahil oluyor.

‍

Dokümantasyon Ekipleri Yönlendirmek İçin Yeterli mi?

Kim okur şimdi bu dokümanı? Hele o kadar iş sırada beklerken! Evet, açıkça ifade etmesek de, pek çoğumuz dokümantasyon okumayı bir sorunla karşılaşmamızın ertesine bırakırız. Bu yüzden tasarım bileşenlerinin yanlış kullanılması da ortaya çıkabiliyor. Ancak her bir kullanım için iyice okusak da, tasarım sistemlerini sorguya açan bazı sorular da ortaya çıkıyor. Örneğin, sırada buton seçimi olunca dokümantasyonda gördüğümüz şeyler şunlar oluyor:

• Bir badge, kullanıcıyı ilgilendirebilecek bir dosya türü (PDF, Word, docx, vb.) gibi bir meta veriyi vurgular.
• Bir pill ise kullanıcı seçimini gösterir ve kullanıcının bu seçimi değiştirmesine veya kaldırmasına olanak tanır.

Gayet makul. Artık iki seçenek arasındaki kullanım farkını kavradık. Derken… Bir soru geliyor:

Neden Farklı Bileşenler?

Bu bileşenler görsel olarak neredeyse aynıyken, neden ayırıyoruz? Tek bir bileşen ile buton işimizi halledebiliriz. Ancak farklı seçeneklere gidilmesinin sebebi, tasarımcılar ve yazılımcılar için işleri daha kolay hale getirmek. Çünkü bir buton çok fazla amaç için kullanılır hale evrilirse, ölçeklendirilmesi de yönetilmesi de, dokümente edilmesi de iş yükünü artırır. Örnek bir dokümantasyona ve bileşen için kullanım seçeneklerine bakalım hemen:

Örneğin, her bir bileşen için ihtiyaç duyabileceğimiz seçeneklere bir göz atalım.

‍

‍

Arada pek bir fark yok gibi görünse de, Figma'da yeni bir örnek eklemek istediğinizde tüm bu seçenekleri her seferinde yeni baştan ayarladığını, tüm kullanım senaryolarının yeniden yazıldığını ve sınırlamaları yeniden yazdığını hayal et.

Bu yüzden farklı seçenekler bir yandan da hayat kolaylaştırıcı etkiye sahip. Diğer avantajlarını ise,

Kolay Stil Değişikliği: Pill bileşeninin stilini badge bileşenini etkilemeden değiştirmek kolaydır, bu da sistemin ölçeklenmesini kolaylaştırır.

Hiyerarşi Oluşturma: Bileşenlerin ayrılması, arayüzde hiyerarşi kurarak kullanıcıların dikkatini çekmeyi ve yönlendirmeyi sağlar.

şeklinde sıralayabiliriz.

‍

Bileşenlere Daha Yakından Bakalım

‍

‍

Tasarım Sistemleri İkilemlerini Özetliyoruz

Tasarım sistemlerinin en kritik amaçlarından biri sürdürülebilir tasarım ve kolay kullanımken, iş pratiğe gelince bazı pürüzlerle karşılaşmak mümkün. Özellikle de tüm ekibin kullanımına açık olan bileşen kütüphaneleri, bazılarında kafa karışıklığı yaratabilir. Bu noktada tasarım sistemlerinin yarattığı ikimlerden bahsettik ve bunlara sebebiyet veren buton örneklerine baktık. Kısacası bazen, bazılarımız için zorluk yaratan tasarım sistemlerinin yapısı, zorluklardan kaçınmak için en optimum şekilde inşa edilmiş oluyor. Ama tüm muhtemel zorlukların çaresi de doğru iletişimde yatıyor. Bir sonraki içerikte görüşünceye değin hoşça kalın ve blog yazılarımızı takip etmeyi unutmayın!

‍