Kullanıcılar olarak bizlere her gün sunulan milyonlarca uygulama ve web sitesi aslında buzdağının sadece görünen kısmı. Çünkü bu ekranlar sadece kullandıklarımızın çok daha ötesinde yüzlerce, binlerce ekrana sahip. Kullanıcının ihtiyaçları arttıkça da giderek karmaşık bir şekilde artmaya devam ediyor. Bu ciddi artış ve büyüme, şirketlerin tasarım tarafında UI çalışmalarını daha düzenli yürütmeleri ve düzene koymaları ihtiyacını doğuruyor. Yönetilmesi de gitgide zorlaşan bu dijital tasarımlar için tasarım ekipleri  design system denen tasarım sistemlerinden yararlanıyor.

Dribbble Sendlane - Design System by Filip Justić for Balkan Brothers

Tasarım Sistemi (Design System) Nedir?

“Design system” tasarımı yönetebilmek için tasarlanan standartlar bütünüdür. Bu sistem içerisinde ürünleri oluşturmak için birleştirilebilen ve yeniden kullanılabilen öğeler yer alır. Aynı zamanda tasarım ekibindeki herkesin bir ürün oluştururken kullandığı ortak bir dil oluşturmayı hedefler. Tasarım sistemi, iyi ve doğru uygulandığında tasarım ekibine birçok fayda sağlayabilir.

Neden Tasarım Sistemi Kullanılmalıdır?

  • Tasarım sistemlerinin kullanımı ile tasarımlar taslaktan son aşamaya kadar daha hızlı bir şekilde oluşturulabilir ve kolaylıkla çoğaltılabilirler. Bu ancak önceden hazırlanmış UI bileşenleri ve öğelerinin kullanılması ile mümkündür. Tasarım ekibindeki kişiler aynı öğeleri tekrar tekrar kullanabilir ve böylelikle tutarsızlıkların önüne geçilmiş olur.
  • Tasarım sistemleri ile basit kullanıcı arabirim ögeleri oluşturulabilir. Bu hazır öğelerin kullanımı ile tasarım üzerindeki yük hafifletilmiş olur ve tasarım üzerindeki sorunlara daha iyi odaklanmayı sağlar.
  • Tüm tasarım ekiplerinin ortak dili tasarım sistemleridir. Ekiplerin zaman zaman rol ve sorumlulukları değiştiğinde tasarım sistemleri hem zamandan hem kaynaklardan tasarruf sağlar.
  • Tasarımcıların birbirinden bağımsız çalışması gereken zamanlarda, var olan tasarım sistemleri tutarsızlığın önüne geçerek görsel bir bütünlük sağlamaya yardımcı olur. Ayrıca herhangi bir büyük ölçekli görsel ve marka değişikliğine gidildiğinde sürecin daha iyi yönetilmesi tasarım sistemleri ile sağlanır.
  • Doğru anlamda tasarlanmış bir tasarım sistemi, yeni tasarımcılar için oldukça faydalı, öğretici ve ilham vericidir.

Tasarım sistemlerinin şirket ve tasarım ekipleri için olumlu yanları kadar olumsuz algılanan ve tercih edilmeyen tarafları da olabilmektedir.

Tasarım Sistemlerinin Tercih Edilmediği Durumlar Nelerdir?

Tasarım ekibinin bir tasarım sistemini kullanmasını engelleyebilecek bazı olası sınırlamalar vardır:

  1. Tasarım sistemleri bazen tek ve bitmiş bir çözüm gibi algılanabilir. Ancak ne yazık ki tek çözüm değildir. Kullanıcılar yani tasarımcılar tarafından zaman içerisinde değiştirilme ihtiyacı duyulabilir. Bu durumda da bir tasarım sisteminin oluşturulması, geliştirilmesi ve sürdürülmesi oldukça zaman alan bir faaliyettir.
  2. Bir diğer konu da tasarım sistemleri tamamen sıfırdan tasarlanmış veya başka bir sistemden uyarlanmış bile olsa nasıl kullanılacağına dair doğru talimatlara ihtiyaç duyar. Bu doğru bilgiyi diğer tasarımcılara aktarmak da zaman alabilir.
  3. Tasarım sistemlerindeki tüm bileşenlerin tek seferlik algısı yaratması da olası bir olumsuz duruma sebep olabilmektedir. Bu da projelerin tekdüze ve yeniden düzenlenemeyeceği fikrine yol açarak olumsuz sonuçlar yaratabilir.
Photo by Amélie Mourichon / Unsplash

Tasarım Sistemleri Kurgulamaya Nasıl Başlanmalıdır?

Tasarım sistemlerinin temel amacı, tasarım ekiplerinin bir arada ve kendi içinde çalışmasını kolaylaştırmaktır. Bu yüzden tasarımı kurgulayan ve  uygulayan kişilerden oluşan bu ekiplere yönelik hazırlanan sistemleri tam olarak kim kullanacak ve nasıl kullanacak sorularını sorarak başlayabiliriz. Ardından tasarım sistemleri oluştururken sormamız gereken belli başlı soruların tek tek üzerinden geçerek ilerlemek daha doğru olacaktır.

Bu sorular sırasıyla aşağıdaki gibi olmalıdır:

  1. Tasarım sistemi hangi amaca hizmet edecek?
  2. Hangi tasarım ilkeleri rehberliğinde olacak?
  3. Marka kimliği ve dili nasıl olacak?
  4. Tasarım sistemi için bileşenler ve desenler neler olacak?

Tasarım sistemi kurgulama aşamalarında yukarıdaki soruların tek tek cevaplarını verirken bir yandan da takım içinde cevaplanması gereken bazı sorular vardır:

  • Tasarım sistemini kullanacak ekibin kaç kişi olacak?
  • Ekibin profili nasıl, kimlerden oluşuyor ve bilgi düzeyleri nasıl?
  • Tasarlanacak ürünler neler? Bu ürünler hangi platformlarda ve hangi teknoloji araçlarıyla kullanılacak?
  • Tasarlanacak ürünlerin birbirleriyle ne oranda tutarlı olması gerekli?

Bu sorulara verdiğiniz cevaplar tasarım sisteminizi tanımlamanıza yardımcı olacaktır.

Dribbble Sendlane - Web Design System by Filip Justić for Balkan Brothers

Tasarım Sisteminin Elemanları

Tasarım sistemleri tasarım öge havuzlarından oluşur ve bu havuzlar genellikle temelde aşağıdaki başlıklar altında toplanır.

- Stil kılavuzu(Style Guide)

- Bileşen kitaplığı (Component Library)

- Desen kitaplığı( Pattern Library)

Stil Kılavuzları ( Style Guide)

Kullandığımız dijital ürünlerin kullanıcı arayüzlerinde bu kadar çok hareketli parça varken, UI tasarımcıları dijital bir ürünün görünümüne ve hissine sadık kaldıklarından emin olmak isterler. Bu yüzden de stil kılavuzu kullanma ihtiyacı hissederler. Bir stil kılavuzu bir tasarımcının tasarım süreci boyunca kullandığı  ögeleri listelediği kuralları olan bir kılavuzdur. Stil kılavuzu da arayüzler oluşturmak için belirli uygulama kılavuzlarını, görsel referansları ve tasarım ilkelerini içerir. En sık kullanılan stil kılavuzu ögeleri renkler, tipografi, sesler, ızgaralar ve aralıklardır. Şirketlerin ve ürünlerin tutarlılık sağlamasının yolu, stil kılavuzlarından geçer. Stil kılavuzuna bağlı olmak, belirli bir prototipin daha hızlı ve sorunsuz bir şekilde geliştirilmesini sağlar.

Dribbble Inputs Component | Light Part by Amirbaqian for Acedesign

Bileşen Kitaplıkları (Component Library)

Tasarım sistemlerinin temelini kitaplıklar oluşturur. Bu kapsamlı kitaplıklar önceden hazırlanmış, tekrar tekrar kullanılabilir UI öğelerini barındırır. Aynı zamanda tasarımcılar ve geliştiriciler için belirli UI öğelerini öğrenmek ve uygulamak için de tek kaynak bileşen kitaplıklarıdır. Bu kitaplıkları oluşturmak önemli ölçüde zaman ve kaynak gerektirir.

Bileşen kitaplıkları dinamiktir ve tasarım sisteminize yeni ögeler eklemenize olanak sağlar. Bir tasarımcı için yeni bileşenler oluşturmak ve her zaman güncel olan dosyalarla çalışmak daha kolaydır.

Bileşen tabanlı tasarım teknik anlamda bir çok yükü azalttığı için tasarım sürecine olumlu yönde bir çok katkı sağlar.

Desen Kitaplığı (Pattern Library)

Pattern library olarak bilinen desen kitaplığı, tasarımcıların ve tasarım ekiplerinin dijital ürünler oluşturmak için kullandığı UI kalıpları kitaplığıdır. Birçok tasarımcı, desenlerin ve bileşenlerin aynı şeyler olduğunu düşünür. Ancak iki kitaplık arasında bir fark vardır. Bileşen kitaplıkları (componentler) tekil UI öğelerini belirtir, desen kitaplıkları UI öge gruplarını ve koleksiyonlarını içerir. Zaman zaman birbirinin alt başlığı gibi de görülebilir. Daha büyük bileşenler genellikle kitaplık içindeki daha küçük kalıpların birçoğunun birleştirilmesiyle oluşturulur.

Bileşenler gibi, desen kalıpları da yeniden kullanılmak ve birbirine uyarlanmak amaçlı düzenlenir.

Desen kitaplıkları ile tasarımcılar hali hazırda var olabilecek bileşenleri tasarlamak için zamanlarını boşa harcamamış olurlar. Bu sadece zamandan tasarruf sağlamakla kalmaz, aynı zamanda son ürün ve son kullanıcı açısından kafa karışıklıklarının yaşanmasının da önüne geçer.

Tutarlı kalıplar aynı zamanda bir şirket genelinde paylaşılan ortak bir dil görevi görür.

Dünyaca ünlü bazı şirketlerin tasarım sistemlerini ve desen kitaplık örneklerini aşağıdaki linklerden keşfedebilirsiniz.

Apple Design Systems
Microsoft Design Systems
IBM Design Systems
Audi Design Systems