Design Systems, ya da Türkçesiyle tasarım sistemi, kullanıcı deneyimi ve arayüzü yaratırken tutarlılığın temel taşlarını oluşturur. Yeniden kullanıma hazır ve belli bir görsel dili benimsemiş tasarım elementlerini, dizayn kütüphanesinde yeniden ziyaret edebilirsiniz. Böylece, bir üründeki kullanıcı yolculuğu boyunca birbiriyle uyumlu butonların, yazıların, sayfaların; kısacası tüm hikayenin kompozisyonunu kolayca oluşturabilirsiniz. Bu içerikte öncelikle Design System konusunda temel bilgileri edinip, daha sonrasında eğitmenimiz Ramazan Güler’in katılımcılardan aldığı sık sorulan soruları ve yanıtları derlediği bölümle de birlikte bir rehber sunacağız.
Tasarım Sisteminde Olmazsa Olmazlar
- UI Bileşenleri: Düğmeler, formlar, ikonlar, modal pencereler gibi kullanıcı arayüzü elementlerinden oluşan bu koleksiyon, tasarım sisteminin yapı taşlarını barındırır ve farklı projelerde tekrar tekrar kullanılabilir.
- Görsel Stil Kılavuzu: Renk paletleri, tipografi, ikonografi ve genel stil kılavuzları gibi görsel tasarım öğelerini içerirken, ürünün görsel dilinin tutarlı olmasını sağlar.
- Etkileşim Desenleri: Kullanıcıların arayüzde nasıl etkileşimde bulunacağını belirleyen kurallar ve kılavuzlar, bir butonun nasıl reaksiyon vereceğini veya bir menüdeki gezinme yapısının nasıl olacağı gibi meseleleri barındırır.
- Tasarım Prensipleri: Tasarım sürecinde uymanız gereken bu temel ilkeler ve değerler, tasarım kararlarının arkasındaki mantığı ve gerekliliği benimser.
- Kod Kütüphaneleri: Tasarım sistemlerini geliştirme sürecine entegre eden, tekrarlı kullanım sağlayan kod parçalarını barındıran bu kütüphaneler, yazılımcıların UI bileşenlerini hızlı bir şekilde projelereye yerleştirmelerini sağlar.
UX Tasarım Sistemlerinin Kahramanı: Atomic Design
UX Design System Oluştururken Kullanılan 3 Farklı Yaklaşım
Design System nedir ve neleri barındırır maddelerini işledikten sonra, Atomic Design ile bir sistem yaratmanın kolayını bulduk. Şimdi iş başa düştü… Dizayn sistemi oluşturma aşamasına geldik. Tasarım sistemi oluştururken hem amacına, hem de kullanım kolaylığına göre bu 3 farklı yaklaşımdan birini tercih etmelisiniz:
- Mevcut bir tasarım sistemi benimsemek: Hazır bir sistem kullanmak, zaman ve maliyetten kâr etmenizi sağlasa da, özgün tasarımlar konusunda sınırlayıcı olabilir.
- Mevcut bir tasarım sistemi uyarlamak: Mevcut bir sistemi kendi ihtiyaçlarınıza göre adapte edip yeniden uyarlamak daha fazla esneklik sunar sunmasına… Ancak daha fazla iş yükünü de beraberinde getirir.
- Kendi tasarım sisteminizi oluşturmak: Tamamen özgün bir sistem oluşturmak, iplerin tasarımcı ve tasarım ekibinin elinde olmasını sağlar. Ancak bu anlayışla dizayn sistemi yaratmanın zaman alıcı ve maliyetli olacağı da aşikar.
Söz Ramazan Güler’de: Design Systems Hakkında En Çok Sorulanlar
Design System ve UI Kit Arasındaki Farklar Nelerdir?
Design System’ler UI Kit lere göre çok daha gelişmiş, sadece tek proje özelinde değil tüm farklı proje ve ürünlere uygulanabilen, bir dökümantasyonu olan, üzerinde çok fazla sayıda kişinin çalışabildiği geliştirilebilir sistemlerdir. UI Kitler ise genelde proje özelinde şekillenmektedir.
Design System Kullanmanın Faydaları Nelerdir?
- Performansı artırır.
- Zaman kaybını önler.
- Maliyetleri azaltır.
- Ortak bir bütünlük sağlar.
- Karmaşayı önler.
- Ölçeklenebilirlik sağlar.
- Marka Kimliğini sağlamlaştırır.
- Hataları azaltır.
- Kod kalitesini artırır.
- Tutarlı kullanıcı deneyimi sağlar.
Her Projede Design System Kullanmalı mıyız?
Hayır, projenin boyutuna göre bu değişkenlik göstermektedir. Küçük çaplı, kısa süreli projelerde bir tasarım sistemi oluşturmanın getireceği fayda, harcanan zaman ve eforla orantılı olmayabilir. Ancak, büyük ölçekli, uzun vadeli ve sürekli geliştirilecek projelerde tasarım sistemleri, tutarlılık, verimlilik ve ölçeklenebilirlik sağladığı için vazgeçilmezdir. Projenin karmaşıklığı, ekip büyüklüğü ve gelecekteki büyüme potansiyeli gibi faktörler, tasarım sistemi kullanıp kullanma kararını etkileyen önemli unsurlardır.
Design System’in Sürdürülebilirliği ve Dokümantasyonu Nasıl Olmalıdır?
Sürdürülebilirlik için atomic design system mantığının gözetilmesinde fayda vardır. Böylelikle bağlı bir sistem olacaktır. Güncellemeler ya da geliştirmeler çok hızlı bir şekilde olacaktır. Dokümante etme kısmı online bir platformda (Notion, Airtable, Google Dökümanlar, Özel web sitesi) gibi olabilirken Tool içinde de gerçekleştirilebilir. Önemli olan ulaşılabilir olmasıdır.
Özetle Design Systems
Özetle Design System, kullanıcıya tutarlı bir deneyim sunarken, ekip işini de kolaylaştırıp maliyet yükünden de hafifleten bir UX/UI pratiğidir. Bu içerikte UX Design Systems konusunda geniş bir perspektiften bakarak, yaygın kullanımlar ve amaçları tanımladık. Bunun yanı sıra Uygulamalı Figma Eğitimi konusunda eğitmenlik yapan Ramazan Güler, yoğun şekilde aldığı soruları ve yanıtları da siz okurlarla paylaştı. Eğer daha ipucuyla UI/UX dünyanı genişletmek istiyorsan diğer blog yazılarımızı takip edebilirsiniz. Teşekkürler!
