Design System (Tasarım Sistemi) nedir; Neleri içerir; Her proje ve müşteri için gerekli midir; Ne sıklıkla güncellenir?
Görüntülemekte olduğunuz bu makale, UX tasarımla ilgili sıkça sorulan sorular yazı dizisinin bir parçasıdır. Diğer sorular ve yanıtları için lütfen ilgili sayfayı ziyaret ediniz.
Design System (Tasarım Sistemi) nedir?
Web sitesi veya mobil uygulamalar gibi kullanıcı arabirimine sahip ürünlerin tasarım aşamasında yaratılan; daha sonra diğer tasarımcılar kadar, yazılımcıların dahi herhangi bir tasarımcının yardımına dahi ihtiyaç duymadan, çeşitli modül ve öğeleri sayfalara entegre etmesini kolaylaştıran; en önemlisi ise ürünün sürdürülebilir bir standarda sahip olmasını sağlayan yaratımların tümüdür.
Açık kaynaklı, ücretsiz olarak herkesin kullanımına sunulan örnekleri olduğu gibi, belli bir proje özelinde, kullanımı sadece bir iş ve amaç ile sınırlı örnekleri de vardır.
Renk ve buton görünümü gibi detayların örneklendirildiği stil rehberleri de bu çerçevede değerlendirilebilir.
Tasarım Sistemi neleri içerebilir?
Ürünün genelinde kullanılabilecek renk paletleri, yazı tipleri ve boyutları, buton ve hata örnekleri, simge (icon) standartları, dışına çıkılamayacak kurallar bir tasarım sisteminin öğeleri arasında sayılabilir.
IBM’in açık kaynaklı örnek design system’ini aşağıda görebilirsiniz. Neler içerdiği de ekranın sol tarafında yer alıyor. Görüntülemek için carbondesignsystem.com adresini ziyaret edebilir, dilerseniz tasarımlarınızda kullanabilirsiniz. Bunun gibi birçok örnek bulunmakta. Bu örnek ile bir tasarım sisteminde neler olacağı konusunda çok iyi fikir sahibi olabileceğinizden dolayı, en azından bir tanesini incelemeniz adına paylaşıyorum. Arama motorunda, “Design System” araması yaparak birçoğuna ulaşabilirsiniz.
IBM’in tasarım sisteminde neler var?
- Temel tasarım araç gereçleri
- Grid yapısı
- Renk kullanımı
- Simge (icon)
- Hareket animasyonları
- Boşluk kullanımı
- Tipografi
- Akordiyon menü
- Checkbox
- Kod yığınları
- Tarih seçici
- Veri tablosu
- Bağlantı örneği
- Listeler
- Yükleniyor animasyonları
- İlerleme barı
- Radio buton
- Arama barı
- Sekmeler
- Tooltip
- Diyaloglar (seçim ekranları)
- Formlar
- Giriş ve kayıt sayfaları
- Bildirim
- Grafikler (çubuk, pasta vs.)
- Çok daha fazlası…
Style Guide (Stil Rehberi) nedir?
Yukarıda belirttiğim, renk ve butonların görünümüne ek olarak; bir dropdown menünün nasıl göründüğü, listelerin stilleri, alıntı örneği, toggle’ın açık ve kapalı halleri gibi detaylı parçaları, her halini içeren örneklerle listelediğimiz dökümana denir.
HTML formatında hazırlanıp bir web sayfasında görüntülenebilir hale de getirebiliriz, görsel bir çıktı olarak başucunda da tutabiliriz. Önemli olan, neyin, nasıl göründüğü ve öyle görünmesi için ne yapılması gerektiğinin açıkça belirtilmiş olmasıdır.
Aşağıda, bundan 7 sene önce hazırladığım bir örnek stil rehberinden bir parça görüyorsunuz. DH Portal’da kullanılmak üzere, arayüz geliştirirken sayfalara kolayca entegre edilebilecek modül ve referanslar barındıran, 2015'te kullanıma açtığımız temamız için oluşturulmuş bir örnekti bu. O stil rehberindeki onlarca kullanım örneğinden sadece bir tanesini, fikir vermesi açısından ekliyorum. Yine arama motorunda “style guide” araması yaparak birçok örneğe erişebilirsiniz.
DH stil rehberinde neler var?
- Butonlar
- Bağlantılar
- Dropdown menüler
- Sekmeler
- Textbox örnekleri (boş, dolu, hatalı vs.)
- Textarea örnekleri
- Checkbox ve radio butonlar
- Toggle’lar (küçük, büyük, açık, kapalı, pasif vs.)
- Font boyutları ve kullanımları
- Metin renkleri
- Arkaplan renkleri
- Uyarı kutuları
- Tablolar
- Noktalı ve rakamlı listeler
- Yükleniyor animasyonu
- Medya kutuları (bir haber kutusunun tüm ekranlarda kullanılabilecek tüm varyasyonlarının örnekleri)
- Paylaşım butonları
- Temel bilgi modülleri (tarih, istatistikler, abonelik vs.)
- Ağaç yapısı (dizin)
- Video seçenekleri (siteye embed, oynatıcı tercihleri vs.)
- Daha sonra oku gibi butonların tüm versiyonları
- Bakınız bağlantısı (tüm içeriklerde, herhangi bir yerde kullanılabilir halde)
- Etkinlik alarmı
- Kaynak bağlantısı
- Açıklamalı ve açıklamasız resim örnekleri
- Alıntı görünümü
- Tweetlenebilir haber içi metin örneği
- Önerilen içerik görünümü
- Editörün seçimi yorum
- Haftanın beğenilenleri
- Gönderi istatistikleri
- Abonelik (e-posta ile bültene kayıt)
- Editör kartı
- Başlıklar (ana başlık, ara başlık, sürmanşet vs.)
- Anket örnekleri
- Yorum formu ve içerisinde olabilecek her şey (alıntılanmış yorum, iç içe geçen dallanmış yorum, yorumlara abonelik, beğeni vs.)
- Sponsorların sunum şekilleri
- Ve birçok şey daha…
Önemli bir not: Stil rehberlerinin, çoğu zaman tasarım sistemi kadar kapsamlı olmasa dahi tasarım sisteminde de var olan bazı öğeleri içerdiğini unutmayın.
Tasarım Sistemi, her proje ve müşteri için gerekli midir?
Hayır. Eğer, geliştirmeye müsait bir yapıya sahip olmayan ürün tasarlıyorsanız, bu şart değildir. Sürekli güncellenen, eklemeler olacağına emin olduğunuz ve bir tasarım sisteminin faydası olacağını düşündüğünüz işlerde yapılabilir. Şarttır diyemeyiz. Kolaylık sağlayacağı kesindir ancak eğer gerek olmayan bir proje için tasarım sistemi tasarlamaya kalkarsanız, maliyetiniz daha da artacaktır. Çünkü bu durumda anlamsız yere, gerekmeyen bir şeye vakit ayırmış olursunuz.
Tasarım Sistemi, ne sıklıkla güncellenmelidir?
Tasarım çizgisinde gözle görülür, ciddi değişiklikler yapıldıysa, tasarım sisteminizi de güncellemeniz gerekebilir. Arayüzde değişen bir öğe varsa, tasarım sisteminde ya da stil rehberinde hala eskisi duruyorsa, bu karışıklıklara neden olacaktır. Dolayısıyla, kapalı bir yapıda, projeye özgü tasarım sisteminizi tanımanız, hatırlamanız ve gerektiğinde güncellemeniz önemlidir.
İpucu
Hem UX tasarımcı olarak kendi işinizi kolaylaştırmak, hem de yazılımcılara daha anlaşılır bir tasarım sistemi sağlamak için ZeroHeight ve StoryBook gibi yardımcı uygulamaları araştırabilirsiniz. Bu uygulamalardan, yazılımcılar da -UX tasarımcı olmadan- kendi çalışmalarını yürütürken yararlanabilirler.
Yazı dizisindeki diğer soru ve yanıtları görüntülemeyi unutmayın.
8.8.22 tarihinde blog.numancebi.com adresinde yayımlanmış olan “Design System (Tasarım Sistemi) nedir; Neleri içerir; Her proje ve müşteri için gerekli midir; Ne sıklıkla güncellenir?” başlıklı bu yazı izinsiz kopyalanamaz, kaynak belirtilmeksizin alıntılanamaz. Gerektiği durumda lütfen e-posta ile izin isteyiniz. Hassasiyetiniz icin teşekkür ederim.
Originally published at https://blog.numancebi.com.
