Tasarım Sistemlerine Nasıl Başlanır

0
24

şu anda Fluent Design System ve Teams Bileşen Kitaplığı üzerinde Microsoft’ta çalışmaktadır. Daha önce EagleView’de çalıştım ve ilk tasarım sistemlerinin tasarımına yardım ettim.

Tasarıma sistematik, küresel stiller, kurallar ve yönergelerle yaklaşma fikrini her zaman sevmişimdir. Başlangıçta, bu konsept benim için merak uyandırıcıydı. Ancak, ilk tasarım sistemleri üzerinde çalışan birçok tasarımcı gibi, ben de elimdeki görevin başarısını hafife aldım.

Aşağıda, tasarım sistemlerindeki yolculuğumun ve kariyerimin kısa bir açıklaması yer almaktadır. Umarım deneyimlerimi tasarımda yolunuzun neresinde olursanız olun faydalı bulursunuz.

Bir Zamanlar

EagleView, tasarım sistemlerinde bana ilk şansımı verdi. Geniş bir dijital ürün portföyüne sahiplerdi (~ 20) ve her biri çok farklı görünüyordu. Üstelik, çeşitli uçuş aşamalarında ve farklı platformlarda (yerel ve web) birden fazla ürüne sahiplerdi. Liderlik, tasarım ve mühendislik ekipleri, aşağıdaki sorunları (çoğu kabul etmek istediğimizden daha yaygın olan) tanımlamaktan bir tasarım sistemine ihtiyaç duydukları konusunda fikir birliğine vardı:

Tasarımcıları birden çok UI kitaplığına ve mühendisleri birden çok kod tabanına yerleştirmek sıkıcı ve fazlalıklara meyilliydi Mühendislik sprintleri, aynı bileşenlerin defalarca geliştirilmesiyle tıkanmıştı (Bir düğme oluşturmak için kaç kez ihtiyacımız var?) Tasarımcılar sayısız saatler harcıyorlardı Yeni ürünler için tek seferlik kullanıcı arayüzleri oluşturma Müşteriler (kullanıcılar), platformlar (ör. yerel ve web) ve uygulamalar arasında uyum eksikliği yaşıyorlardı ve bu da sarsıcı ve kafa karıştırıcı deneyimlerle sonuçlanıyordu.

Liste devam ediyor…

EagleView’ın Tasarım Sisteminden önceki ürünlerinden birkaçı

İşleri daha zor hale getirmek için (duruma nasıl baktığınıza bağlı olarak), bana sadece bir gereksinim verildi, Tasarım Sisteminin React’te kurulması gerekiyordu. Kolay değil mi? Nereden başlayacağımı bilmiyordum.

Bilmediğin şeyle başla

En iyi uygulamalı problem çözme yoluyla öğrenirim. Beni bir havuzun derin ucuna atarsan genellikle yüzerim. Tasarım sistemleri dünyasına benim başladım bir nevi böyleydi, ama karanlıkta, gözleri bağlı ve bir sürü köpekbalığıyla (tamam belki köpekbalıkları kısmı değil). Tasarım sistemleri hakkında bilmediğim pek çok şey olduğunu fark ettim, ancak çıkmazıma nasıl çare bulacağımı bilmiyordum. YouTube başlamak için iyi bir yer gibi görünüyordu. Bu yüzden, arama çubuğuna “tasarım sistemleri” yazdım ve ilginç görünen ilk videoyu tıkladım. Aşağıdaki videolar bana çok yardımcı oldu (ve hâlâ da öyledir):

Araştırmama açık fikirli bir şekilde yaklaştım, bilginin çoğunu bir sünger gibi emdirdim.

İlkeleri ve öncelikleri önceden tanımlayın

Design Better Podcast’in bir bölümünde, tasarım sistemleri uzmanı ve Atomik Tasarım Metodolojisinin yaratıcısı Brad Frost, yeni bir tasarım sisteminin hangi yönlerinin ekip ve şirket için en önemli olduğunu belirlemenin ne kadar önemli olduğundan bahsetti.

Kalemi kağıda dökmeden önce kilit paydaşları bir odaya almak ve birkaç ilke ve öncelik üzerinde anlaşmak çok önemlidir.

Bunu yaparsanız, işler zorlaştığında, her zaman o güne geri dönebilir ve “Bu şeyin (şeyin) yeni sistemimizin en önemli parçası olduğu konusunda anlaştığımız zamanı hatırlıyor musunuz?” Şimdi, bu önceliklerin ve ilkelerin değişemeyeceği anlamına gelmez, ancak bir referans noktasına veya bir kuzey yıldızına sahip olmak, sistem tasarımcılarına rehberlik etmeye ve herkesin yolunda gitmesini sağlamaya yardımcı olur.

Başarı ölçütlerini tanımlayın

Bir tasarım sisteminin başarısını ölçmenin birkaç yolu vardır. EagleView’da toplu olarak şunları istedik: sprint hızımızı ≥% 50 artırmak, mümkün olduğunca çok tasarım saati boşaltmak ve tasarım, mühendislik ve ürün arasında paylaşılan bir dil oluşturarak işbirliği üretkenliğini artırmak. Son iki ölçüm biraz belirsizdir ve KPI’larınızla daha ayrıntılı hale gelmek istiyorsanız bu iki makaleye göz atmanızı öneririm:

“Bir Tasarım Sistemi kullanmak, tutarlılığı sağlamak ve ekibinize önemli olana, yani kaliteye ve yeniliğe odaklanmak için daha fazla zaman vermenin yanı sıra tasarım, geliştirme ve test için gereken sürenin% 50’sinden fazlasını ortadan kaldırabilir.”

– Marcin Fuja, Kıdemli Ön Uç Geliştiricisi @ PGS Software

Bağlamla tasarım

Size birkaç yüz saat kazandırmama izin verin – tasarım sistemi bileşenlerini bağlam olmadan bir kutu içinde tasarlamak zaman kaybıdır; bunu yapma.

“Başarılı tasarım kalıpları bir boşlukta var olmaz.”

– Yesenia Perez-Cruz, Kıdemli Kullanıcı Deneyimi Yöneticisi, Polaris Tasarım Sistemi

EagleView’de Tasarım Sistemi için kobayımız olacak bir çekirdek ürün belirledik ve hangi bileşenleri tasarlayıp mühendislik ile birlikte inşa edeceğimi bize bildirdik. Tasarladığım ve inşa ettiğim neredeyse her bileşen bağlama dayalıydı.

Figma'daki UI bileşenleriEagleView’ın Figma’daki tasarım sistemi için tasarladığım birkaç UI bileşeni

Microsoft’taki işim biraz daha olgun çünkü birkaç yıllık bir kurumsal tasarım sistemimiz var. Olgun bir sisteme karşı genç bir sisteme katkıda bulunmak, benzerlikler ve farklılıklar getirir. EagleView’da tek sistem tasarımcısıydım, Microsoft’ta ise çok daha fazla destek var. Her iki tür durum da değerli olabilir ve her iki deneyimden de çok şey öğrendim. Aşağıda React’ımızın bir örneği var

CEVAP VER

Lütfen yorumunuzu giriniz!
Lütfen isminizi buraya giriniz