Bu makale sizi sıkmamak adına 3 bölümden oluşmaktadır.
Bu bölümde Cactus Design System nedir, nasıl oluşturduk, nasıl ve neden dokümanlaştırdık, bize ne faydası oldu gibi soruların cevaplarını bulabileceksiniz.

2️⃣ Bölüm 2 — Design System Elementleri (Renk, Tipografi)
3️⃣ Bölüm 3 — Design System Elementleri (Buton, İkon, Grid ve Spacing) ve Nasıl Maintain Edilir?

Cactus Design System

Design system kurmak mı? Kafayı yemiş olmalısınız! 🤯 Biz daha çok yedik, yalnızca bir tane değil tamı tamına iki ayrı design system kurduk.
(Önyüz, backoffice 🥳)

Paydaşları tek bir noktada toplamak adına kurduğumuz bu sistem ile bundan sonra tek bir tasarım çizgisinden ilerleyebileceğimiz, erişilebilirlik ve kullanıcı deneyimi noktasında güzel sonuçlar elde edeceğimiz Cactus Design System artık hayata geçmiş durumda.

Ürünler ve ekipler arasındaki senkronizasyonu sağlamak büyük firmaların sancılı noktalarındandır. Design system ile birlikte yalnızca tasarım ekibinin değil, yazılım ekibi başta olmak üzere diğer ekiplerin de hayatını kolaylaştırmış oluyoruz. Kutuları sıfırdan tasarlamaya ayıracağımız zamanı artık ürünü iyileştirmeye ayıracağımızdan emin olabilirsiniz.

Design System Nedir?

Bazı firmalar birden fazla ürüne sahiptir ve ürünler arasındaki uyumu sağlamak adına bir sistem oluşturmak gerekir.

Doğru işleyen bir sistemin olduğu yerde sorun olmayacaktır, dolayısıyla her proje kendi sistemini doğurmaktadır. Peki nedir bu sistem? 🤔

Design system, bir teknoloji şirketinde olması istenen ama maalesef çoğu kez hayal olarak kalan bir yapıdır. Hayal olarak kalmasının sebeplerinden biri de çok ayrıntılı araştırma ve çalışma gerektirmesidir. Bunları planlarken aynı zamanda mevcut işleri de durdurmamak tasarımcıları bir çıkmaza itebilir. Bunun için günü kurtarmak istemeyen ve uzun vadede tasarım süreçlerini iyileştirmek isteyen ekipler elini taşın altına koyarak ekstra bir eforla bu sistemi kurarlar. (Bizim gibi 😊)

Bu sistem kısaca, ürünün temel parçalarını oluşturan, componentlerin varyantlarını içeren, tasarım bütünlüğünü sağlayan, tasarımı ve yazılımı besleyen bir sistemdir.

Tasarım kütüphanesi ve onu yöneten insanlar (Bir design system ancak onu yöneten ekip kadar etkilidir) design systemin 2 önemli parçasıdır.

Nasıl Başladık?

Günlerden bir gün yine bir butonun rengi hakkında herkesin ayrı bir fikri vardı… Ve artık buna bir son vermek gerekiyordu.

Öncelikle var olan tasarımlardaki componentleri belirledik. (butonlar, inputlar, checkboxlar, renkler vs.) Sonrasında bu componentleri sınıflandırarak bir listesini çıkardık. Listeyi oluştururken designsystemchecklist.com sitesinden de faydalandık. Listelediğimiz bu componentleri mevcut tasarımlar içerisinden toplayarak var olan kütüphaneyi hazırlamış olduk. Bunların içerisinden en çok kullanılan componentleri erişilebilirlik açısından tekrar revize ettik.

Nasıl ve Neden Dokümanlaştırdık?

Componentlerin tüm varyantlarını başlıklar halinde sınıflandırarak her bir component için ayrı ayrı artboardlar oluşturduk. Bu artboardlar üzerinde elementleri varyasyonlarıyla beraber matematiksel hesaplarını da (paddinglerini, radiuslarını) açık bir şekilde yazdık. Bu sayede bütün elementlerin kurallarını açık bir kütüphane şeklinde, erişmek isteyen herkese ulaştırmış olduk.

Bu dokümantasyon sayesinde yazılım ile oluşabilecek belirsizliklerin önüne geçmiş olduk. Örneğin, design systemden önce componentler özelinde bir standart olmadığı için diğer ekiplerde çok sık soru işareti oluşuyordu. Bu dokümantasyon sayesinde bu tür belirsizlikleri önledik.

Bize Faydası Ne oldu?

Design systemin en büyük avantajı UI componentlerini hızlı bir şekilde çoğaltabilmektir. Tasarım ve yazılım ekipleri bu componentleri sürekli olarak kullanmaya devam edebilirler. Böylelikle componentleri yeniden tasarlama ve kodlama ihtiyacı azalır, tutarsızlıkların ve zaman kaybının önüne geçilmiş olur. Ürünler arasındaki tutarlılığı ve senkronizasyonu sağlamaya yardımcı olur. Yüzlerce sayfa arasında tutarlılığı koordine etmemiz gerektiğinde bize büyük bir fayda sağlar. Güncelleme yapılırken geçmiş componentler bilindiği için iyileştirme konusunda daha hızlı kararlar alınabilir. Bu sebeple teknolojik gelişmelerin bu kadar hızlı ilerlediği bir dönemde design systemin önemi oldukça büyüktür.

Design System maceramızın diğer bölümlerini aşağıdaki linklerden ulaşabilirsiniz. Bölümleri sırasıyla okursanız makalenin büyüsü kaçmaz 😍👇

2️⃣ Bölüm 2 — Design System Elementleri (Renk, Tipografi)
3️⃣ Bölüm 3 — Design System Elementleri (Buton, İkon, Grid ve Spacing) ve Nasıl Maintain Edilir?