Telefonlarda, tabletlerde ve masaüstü bilgisayarlarda ekran boyutlarının parçalanması, özellikle ölçeklenebilir tasarım çözümleri geliştirmek isteyen küçük ve orta ölçekli şirketlerde Ürün Tasarımcıları ve UI Mühendisleri için çok büyük zorluklar yaratabilir. Bir tasarım sistemi bu tür zorluklara en açık cevap olsa da, bileşenleri nasıl oluşturduğunuz ve bölümlere ayırdığınız, başarı ile başarısızlık arasındaki ana faktör olabilir.

Mollie'nin tasarım sistemi ekibi bu sorunu çözmek için oluşturuldu, ancak proje bazlı bir yaklaşım benimsemek yerine bir ürün ekibi olarak çalışmaya karar verdik. Bu nedenle, meydan okumayı bir "Nasıl yapabiliriz" sorusuyla çerçevelendirdik:

"Yüksek kaliteli kullanıcı arayüzlerinin hızlı bir şekilde keşfedilmesine ve uygulanmasına nasıl izin verebiliriz?"

Bu soru farklı düşünmemize yardımcı oldu. En büyük fark, yalıtılmış platformlar (web, iOS ve Android) yerine kullanıcı bağlamına odaklanırsak daha iyi bileşenler oluşturabileceğimizdi. Bu yaklaşım, bizi ekran boyutuna ve giriş yöntemlerine dayalı olarak mümkün olan en iyi deneyimi düşünmeye zorladı. Bu nedenle, bileşenlerimizin kapsamını bu özelliklere göre tanımladık, bu nedenle tüm bileşenlerin aşağıdakilere dayalı olarak destek ve özellikler sağlaması gerekir:

• Ekran boyutu: Büyük veya Küçük.
• Giriş yöntemi: Fare, klavye veya dokunma.

Tüm bağlamlar için tek bir kitaplık

Bileşenlere gelince, Figma'da bir kütüphaneye sahip olmayı seçiyoruz. Bir bileşenin kullanılabileceği bağlam, özelliklerine gömülüdür. Bu yaklaşımın ana avantajı, tasarımcıların bir bileşenin nerede kullanılması veya kullanılmaması gerektiğini hemen bilmesidir. Tüm bileşenlerimiz şu dört kategoriden birine girer:

1. Büyük ve Küçük ekran
2. Büyük ekran veya Küçük ekran
3. Yalnızca büyük ekran
4. Yalnızca küçük ekran

1. Büyük ve Küçük ekran

Bu, sahip olduğumuz en yaygın bileşen türüdür. Boyut, dolgu ve stiller, ekran boyutları ve giriş yöntemleri arasında aynı tutulur. Düğmeler, Sekmeler, Rozetler ve diğerleri bu kategoriye girer.

Bu tür bileşenlerdeki ana zorluk, varyantların ve durumların tüm olası kombinasyonlarını tahmin etmemiz gerektiğidir. Bu, fare (hover), klavye (klavye odağı) ve dokunma (basılı) gibi giriş yöntemine göre beklenen tüm etkileşimli durumları sağlamamız gerektiği anlamına gelir.

2. Büyük ekran veya Küçük ekran

Bu bileşenler, büyük ve küçük ekranlar arasında görsel ayrım sunar, bu nedenle tasarımcılara bu varyantlar arasında geçiş yapma olanağı sağlayan bir özellik sunuyoruz. Bazı durumlarda içeriğin yerleşimi değişirken bazı durumlarda dolgu ve yazı tipi boyutları farklılık gösterir. Bu varyantları yalnızca, farklı bir deneyime sahip olmanın getirdiği ödünlerin, bunları sürdürmenin maliyetinden daha ağır bastığından emin olduğumuzda yaratırız.

3. Yalnızca büyük ekran

Bu bileşenler nadirdir ve genellikle büyük ekranlardaki Navbar ve Menü bileşenleri gibi gezinme modellerimizle ilgilidir. Bu nedenle, bu kalıpları belirli bir ekran boyutunda desteklemek için özel bir bileşen sağlamamız gerekiyor. Bu durumda varyantları birleştirmiyoruz çünkü dolgular, kenar boşlukları, tipografi ve durumlar açısından çok farklılar.

4. Yalnızca küçük ekran

Bu, küçük ekran varyantının farklı bir gezinme modeli sunduğu yukarıdaki türün karşılığıdır. Daha küçük ekranlarda böyle bir bileşenin bir örneği Tabbar'dır.

Orijinal "nasıl yapabiliriz" sorusuna dönersek, bu yaklaşımın sorunu çözmek için çok önemli olduğunu güvenle söyleyebilirim. En önemli etki, ölçeklenebilir tasarım kararlarına sahip olma yeteneğiydi. Örneğin küçük ekran boyutları için verdiğimiz bir karar, farklı platformlardaki uygulamalarımızda kullanılabilir. Hâlâ genç bir tasarım sistemimiz var, ancak bu hızla olgun bir ürüne dönüşüyor.

Bonus: Yapı bileşenleri için metriğimiz

Benimseme, en azından şimdilik birincil ölçütümüz değil. Yeni bir tasarımın üzerinden geçtiğimiz için, platformun %100'ü tasarım sistemimiz kullanılarak oluşturuldu. Bunun yerine, bileşenlerin ve belirteçlerin kullanılabilirliğine odaklanıyoruz. Bu öğeleri iyileştirmenin yollarını buldukça, bir fırsat/hata belirlerken öğeleri "Bilinen sorun" olarak işaretliyoruz. Bu da tasarım sistemi ekibimiz için bir görev haline gelir.

Senaryomuz nispeten benzersiz. Dört Ürün Tasarımcısı ( işe alıyoruz! ) ve 20+ UI Mühendisinden oluşan küçük bir ekibimiz olmasına rağmen , özel bir tasarım sistemi ekibimiz var. Bu tür bir girişim üzerinde çalışmamızı sağlayan bir yatırım.

Caio Manzotti, Amsterdam merkezli Mollie'de Tasarım Sistemleri Kıdemli Ürün Tasarımcısıdır .