Her ürünün hayali: Design System

Published in

Yolda.com Tech

7 min readJan 31, 2023

Neredeyse her gün üzerinde çalıştığımız ürün için yeni özellikler geliştiriyoruz. İşleri yetiştirmeye çalışırken tutarlı kalabilmek zorlaşıyor. Bir de aynı anda birden çok platforma tasarım yapılıyorsa takip etmek gerçekten imkansız hale geliyor. Hangi kararla hangi komponenti ürettik, neden bunu kullandık gibi soruların cevapları zamanla uçup gidiyor.

İşleri zamanında yetiştirme kaygısı bir yanda, tasarımı tutarlı şekilde devam ettirebilmek öbür yanda. Tüm bunlar olurken geriye dönüp baktığınızda 5 farklı primary buton stili görebilirsiniz — ki bu, gerçekte düşününce primary butonumuzun aslında olmadığı anlamına gelir :D

Peki ne yapacağız?

Yeni bir şey inşa etmek, mevcutta olanı keşfetmekten daha kolay

Ekiplerin temelde aynı stilin ve komponentin bu kadar çok varyasyonunu yaratmasının nedeni, mevcuttakilerin bir yerde tutulmamış olması. En son versiyon hangisi? Burada neden bu yapılmış, bilinmiyor olması. Tüm bunlar birleşince, bunları araştırmaya harcayacağı vakti yeni bir input yapmaya harcıyor ve uzay boşluğuna bi komponent daha fırlatmış oluyor.

Bugün Uber, Pinterest, Airbnb, Shopify veya Google gibi büyük şirketler, daha fazla ürün ve ekibin kaosuna tutarlılık getirmek için böyle bir sisteme sahip.

Oluşturması zor, güncel tutması daha da zor, ekiplere ve şirketlere çok kolaylıklar sağlayan bu design system nedir? Kısaca, tasarımı yönetebilmek için tasarlanan standartlar bütünüdür. İçinde style guide , pattern library ve components library’lerini bulundurur.

Design system ile UI kit çokça karıştırılıyor:

UI Kitler sadece kendi tasarımınızda kullanacağınız komponentlerden oluşur.
Design system ise bütün tasarımcı ve yazılımcıların kullandığı bir kütüphane, koleksiyondur.

Yukarıda gördüğünüz Google’ın Materyal Tasarımı sistemi. UI elementlerinin özelliklerini, nasıl davrandıklarını, komponentin adı vb. bilgileri içeren kütüphane. Tasarımcı ve yazılımcıların ortak kullandığı bir alan.

Atlassian tasarım sistemi, bir sayfa başlığı şablonu da dahil olmak üzere bir dizi yeniden kullanılabilir kalıbı tanımlar. Yalnızca görsel bir örnek göstermekle kalmaz, aynı zamanda tasarımcıların tam olarak kullanması gereken bileşeni vurgular ve her bileşenin nasıl kullanılması gerektiğini açıklar.

Daha detaya girmeden önce ortamlarda satmalık bilgi içeren design system tarihçesinden bahsedeyim :D

Bilinen ilk design system NASA tarafından yayınlanmış 1976 NASA Grafik Standartları Kılavuzu eksiksiz bir markalama stili kılavuzuna bir örnektir. Dikkate değer ölçüde modern görsel örneklerden çok daha fazlasını sunar; görünürlüğü ve okunabilirliği artırmak için renk eşleştirme yönergeleri. “Bir tabela büyük ölçekli bir başlık olarak düşünülmelidir; bu nedenle, dil açık ve öz olmalıdır. Özellikle araç sürücüleri ile hızlı bir şekilde iletişim kurmak için kısalık arzu edilir.”

2000’li yılların başında Web 2.0 ile web sitesi tasarım ve geliştirmede doğan ihtiyaçla birlikte tasarımcılar ve yazılımcılar web sitelerini aynı component’lerin, şablonlar halinde düzenlenmiş sayfaları olarak düşünmeye başladılar. 2005 yılında, Jenifer Tidwell çok beğenilen O’Reilly kitabı Designing Interfaces’i yayınladı. Tidwell kitabında, formlardan menülere ve navigasyona kadar bir dizi yeniden kullanılabilir kalıpta ortak tasarım çözümlerini derledi. Bu modeller, dijital tasarıma uygulandığında, onları kullanan insanlara tanıdık ve sezgisel gelen arayüzler yaratmanın öngörülebilir bir yolunu sağladı. Tidwell’in düşüncesi, tasarım sistemlerine daha bilinçli bir yaklaşımın temelini attı.

Web geliştiricileri için bu, kodu daha etkin bir şekilde düzenlemek ve yeniden kullanmakla başladı. Kod tabanlı sistemler oluşturmaya yönelik ilk girişimlerden bazıları, bu tür kod koleksiyonlarından oluşuyordu. Örneğin, Blueprint, tipografi, baskı stilleri ve sık kullanılan yardımcı programlar etrafında bir dizi ortak standart CSS topladı.

2006 yılında Yahoo! açık kaynaklı Yahoo Kullanıcı Arayüzü Kütüphanesini (YUI) “zengin etkileşimli web uygulamaları oluşturmak için JavaScript ile yazılmış bir dizi yardımcı program ve kontrol” diyerek tanıttı. Yahoo! ekibi bunu My Yahoo! gibi kullanıcılara yönelik sayfalar oluşturmak için kullandı.

2008'de bir konferansta yapılan CSS Systems adlı bir konuşmada Yahoo User Interface Library gibi daha küçük, özelleştirilmiş projeler için web sitesi sistemleri oluşturmaya yönelik bir yaklaşımın haritasını çıkarıldı. Tasarım öğelerinin içeriğin kendisinden ayrılıp soyutlanabileceği, yeniden kullanılabilir bileşenler halinde düzenlenebileceği (buton, liste veya search box gibi) ve bir web sitesinin farklı sayfalarında kullanılabileceği fikri ortaya atıldı.

Şirketler tarafından bu kadar popüler olan design system’i neden oluşturalım, neden kullanalım?

Daha hızlı tasarım ve geliştirme

Tasarım sistemlerinin birincil faydası, önceden hazırlanmış UI bileşenlerini ve öğelerini kullanarak tasarımları hızlı bir şekilde kopyalayabilmeleridir. Ekipler aynı öğeleri tekrar tekrar kullanmaya devam ederek dünyayı yeniden keşfetmeden tutarsızlık riskini azaltabilir.

Verimlilik

Tasarım yerine deneyime odaklan! Büyük, karmaşık sorunlara odaklanmak için tasarım kaynaklarının üzerindeki baskıyı azaltır.
Daha basit UI öğeleri zaten oluşturulduğundan ve yeniden kullanılabilir olduğundan karmaşık sorunlara daha çok odaklanabilir. Yalnızca az sayıda ekran oluşturduğunuzda bu getiri küçük görünse de, düzinelerce ekip ve binlerce ekran arasında çabaları koordine etmeniz gerektiğinde önemli hale gelir.

Tutarlılık

Hem görsel hem deneyimsel tutarlılık. Böylelikle butonlar aynı görünürken başta bahsettiğimiz deneyim de her platformda aynı olacaktır. Örneğin belirli bir yazı tipi rengi, kullanıcılarınızın belirli bir düğmeye basarlarsa ne alacaklarını anlamalarına yardımcı olmak için stratejik olarak kullanılabilir.

Özellikle ekipler, her ürün veya kanalın diğerlerinden bağımsız olarak çalıştığında, bir tasarım sisteminin olmaması tutarsız görsel görünüme ve veya markayla ilgisiz görünen deneyimlere yol açabilir. Tasarım sistemleri tek bir bileşen, desen ve stil kaynağı sağlar.

Tutarlılık ve esnekliği dengelemek

Buraya bir parantez açmak gerekiyor. Churchill bir keresinde “değişmek gelişmek demektir” ve “mükemmel olmak sık sık değişmektir” demişti. Çok katı tutarlılık uygularsak, yenilik yapmayı bırakırız.

Yeni şeyler inşa ederken, kuralları biraz büyümeye izin verecek kadar esnetmemiz gerekecek, ancak işlerin kaosa sürüklenmesine izin vermeyeceğiz.

Doğru felsefe, metodoloji ve araçlar ile arayüz tutarlılığı ve yenilik arasındaki bu dengeyi sağlayabiliriz.

Know-how birikimi

Açıkça yazılmış kullanım yönergeleri ve stil kılavuzları, kullanıcı arabirimi tasarımında veya içerik oluşturmada yeni olan ekip üyelerine yardımcı olur. Ayrıca katkıda bulunanların geri kalanı için de bir hatırlatma işlevi görür.

Design system bir portfolyo değildir.

Design system’in, tasarımcıların ve yazılımcıların daha hızlı çalışması için işlevsel bir araç seti veya kaynak olarak düşünülmesi gerektiğini unutmayın.

Design system olmamasının bedeli

Nielsen Norman, design system eğitiminde şirketler açısından ne kadar maliyetli olduğunu açıklıyor.

Hatalı bi komponent üretimi
Doğru rengi bulma (grinin 50 tonundan hangisi)
Komponenti tekrar kullanılabilir şekilde tasarlama

Temelde bu üç madde şirketlere maddi anlamda epey yük oluşturuyor.

1 saat/gün X 260 iş günü X 100 USD/saat X 20 geliştirici = 520.000 USD/yıl
3 saat/gün X 260 iş günü X 150 USD/saat X 30 geliştirici = 3,5 USD milyon USD/yıl

(2019 yılı Amerika’daki şirketlerin maliyetlerinden hesaplanmıştır.)

Yapılan başka bir ankette ise, bir tasarım sistemine sahip katılımcıların yaklaşık %90’ının design system sayesinde işten haftada en az bir saat tasarruf edildiği ortaya çıkmış. Yaklaşık %50’si de, her hafta altı saatten fazla çalışma tasarrufu sağladığını söylemiş.

Design system tasarımı kontrol etmek için bir silah değil, güçlendirme için bir araçtır.

Kullanım yaklaşımları

Bir design system’i kullanmak için genellikle üç yaklaşım vardır:

Mevcut bir design system’i benimsemek
Mevcut bir design uyarlamak
Kendi tescilli veya özel design sistem oluşturmak

Her birinin artıları ve eksileri var. Ancak genel olarak düşünürsek, design system çözümünüz ne kadar özelse, uygulanması o kadar fazla zaman ve para gerektirecektir. Bu nedenle, mevcut bir tasarım sistemini kullanmak en düşük maliyetli yaklaşımdır ve uygulanması en az zaman gerektirir. (Ancak, bazı UI öğelerini değiştirmeniz veya güncellemeniz ve bir standart üzerinde anlaşmanız gerekeceğinden, yine de tasarıma her zamanki gibi devam etmenize göre daha fazla zamana ihtiyaç duyacaktır.)

Design system asla bitmeyecek

ama v1.0 çok kötü olacak diye düşünürsen de asla başlamayacak.

Google, Material Design’ı ilk duyurduğunda, “Şimdiye kadar yaşadığınız her tasarım sorunu artık çözüldü!” şeklinde lansman yaptı. Üzerine 3.nesil sistem geliştirildi ve geliştirme devam ediyor.

Özetle,

Lego yapar gibi ekranlar oluşturun.

Kullanıcı deneyimine ve ürünün problemlerine daha çok vakit ayırın.

Bir design system, tutarlı ve iyi tanımlanmış bir dizi bileşen ve kılavuz sağlayarak, kullanıcı deneyiminin tutarlı ve kullanımı kolay olmasını ve şirketin marka kimliğinin tutarlı bir şekilde temsil edilmesini sağlamaya yardımcı olur. Tasarım sistemleri aynı zamanda geliştirme maliyetlerini düşürmeye yardımcı olarak şirketlerin yeni ürünleri daha hızlı ve verimli bir şekilde geliştirmelerine olanak tanır.

Sonuç olarak, bir tasarım sistemi herhangi bir şirket için göz ardı edilmemesi gereken değerli bir varlık. Bir tasarım sistemi oluşturmak, deneme yanılma, test et, öğren, başarısız ol ve tekrar başla ile dolu, uzun bir süreçtir.