Tasarım Sistemi Örnekleri
Tasarım sistemini; tasarım, kod ve dokümantasyon şeklinde özetleyebiliriz. Bu makale, dokümantasyon örnekleri perspektifinde bir derleme niteliğindedir.
Son güncelleme 26.08.2022
Tasarım sistemleri gün geçtikçe yaygınlaşıyor. Son yıllarda tasarım sistemi geliştirme süreçlerine odaklanmış ve bu konuda derinleşerek çalışmaktan keyif alan bir tasarımcı olarak, araştırma süreçlerinde farklı birçok açık kaynak tasarım sistemi ile tanıştım. Bu sistemlerin problemlere nasıl yaklaştıklarına ve problemleri nasıl çözdüklerini inceleme fırsatı buldum. Tasarım sistemi geliştirme süreçlerinde aktif biriyseniz, özellikle ihtiyaçlar doğrultusunda sisteminize yeni bir bileşen ekliyorsanız veya var olan bir probleme karşı sistematik yapıda bir çözüm geliştirme çabasındaysanız, kendinizi zaten halihazırda diğer tasarım sistemlerini araştırırken buluyorsunuz. Bu sistemlerin benzer problemlere nasıl yaklaştıklarına dair araştırmalar yapmak, incelemek ve öğrenmek günlük rutinleriniz arasına giriyor.
Her tasarım sistemi, kurallar bütünlüğünü sağlamak amacıyla yapılandırılmış bir şekilde oluşturulur. Bu sebeple sistemi incelerken, sistematik yaklaşım kurgularının altında yatan nedenleri kavradığınızda, sürdürülebilirliğe dair alternatif pratikleri öğrenebilirsiniz. Bu pratikleri, potansiyel olarak kendi geliştirme süreçlerinize de yansıtabilirsiniz. Böylece paha biçilemez çözüm farkındalıklarına erişebilirsiniz! Bu sebeple farklı tasarım sistemlerini incelerken her “Aha!” anı için kendinizi şanslı sayabilirsiniz. Evet, şanslısınız; çünkü bu, aynı zamanda yeni bir şey öğrendiğinizin de işaretidir. Ne mutlu ki benim bu makalede bir nevi “dijital kürasyon” yaparak bir araya getirdiğim tasarım sistemleri ve henüz incelemek üzere denk gelemediğim niceleri, açık kaynak olarak internette yerlerini almış durumdalar. Yaşasın açık kaynak!..
Herkese açık tasarım sistemleri ile çözüm pratiklerini şeffaf bir şekilde deneyimleyebilirsiniz. Ancak, bazı tasarım sistemleri gizlilik ve ticari kaygı gibi sebeplerle erişimlerini sınırlayabiliyorlar. Bazı tasarım sistemleri ise, dışarıya tamamen kapalı bir şekilde kullanıcılarına hizmet veriyorlar.
Tasarım sistemi geliştirirken, temelinde barındırdığı tasarım yaklaşımlarının üstüne oturtulmuş, içinde barındırdığı tüm varlıklarla sistematik bir şekilde uygulamaya hazır çözümler uygulamayı benimsemelisiniz. Bu çözümlerin nasıl kodlanacağına ve servis olarak nasıl sunulacağına dair alt yapı çalışmaları bir yandan ilerlerken, bu bilgilerin üretim döngüsünde sistemi kullanacak tasarımcı, geliştirici ve diğer tüm paydaşların -yani kullanıcılarının- nasıl tüketebileceğine dair “dokümantasyonun” yapım süreci de var. Haliyle bu da, başka bir efor gerektiriyor.
İçerikte yer verdiğim örnekler, özellikle dokümantasyon açısından, kendi hedef kullanıcıları, üretim teknolojileri ve ürün özelliklerinin harmanlandığı bir yapı ile feyz alabileceğiniz birçok farklı yaklaşımı barındırıyor.
Faydalı ve ufuk açıcı olması dileğimle!
Unutmadan tasarım sisteminin ne olduğuna dair detaylı bilgi edinmek isterseniz, aşağıda yer alan makaleye göz atmanızı öneririm…
İçerikte yer verdiğim tasarım sistemleri, benim inceleme fırsatı bulduklarımdan oluşmaktadır. Yeni sistemleri zamanla inceledikçe, bu makaleyi güncellemeye de devam edeceğim. Bu sebeple takipte kalmayı unutmayın… Ayrıca burada yer almasını istediğiniz bir tasarım sistemi varsa, benimle paylaşırsanız mutlu olurum. Daha da ötesi, bu içeriği genişletme fırsatını birlikte yakalayabiliriz, ne dersiniz?
1. Material Design
Tasarım sistemi deyince ilk akla gelen hiç şüphesiz Google’ın Material tasarım sistemidir. Köklü bir geçmişe sahip olan bu tasarım sistemi, Google’ın kendi ekosistemini geliştirmek için açık kaynak olarak yıllardır hayatımızda. Özellikle bütünlüğündeki tasarım felsefesi ile bir çok framework’e emsal teşkil etmiştir. Bu günlerde Material You (V3) geçişi devam etmektedir.
2. The Guardian
İngiliz günlük gazetesi olan The Guardian, tasarım sistemi dokümantasyon stili ile de dikkat çekiyor.
3. Momentum Design System
Cisco Momentum tasarım sistemi ile tüm Webex ürünleri için paylaşılan bir tasarım dili oluşturuyor.
4. Grommet
Grommet tasarım sistemiyle uygulama geliştirme şeklinizi kolaylaştırabilir ve
kullanımı kolay bir bileşen kitaplığı ile web için duyarlı, erişilebilir mobil odaklı projeler oluşturabilirsiniz.
5. Solar Design System
Solar tasarım sistemiyle enerji tedarik şirketi olan Bulb’ın uygulamaları tutarlı deneyimler sağlıyor.
6. Carbon Design System
IBM ekosisteminin yegane yapı taşını oluşturan Carbon tasarım sistemi, özünde barındırdığı tasarım felsefesi ile hayat bulmuş bir tasarım sistemidir. Özellikle 2x grid yapısı ile bir çok örneğinden farklılaşan bir alt yapıya sahip olmasıyla dikkat çekiyor.
7. Fish Tank Design System
Bloomberg BNA’nın tasarım sistemi Fish Tank, dijital ürün ailesine güç veren temel stiller ve yeniden kullanılabilir bileşenlerden oluşan bir koleksiyondur.
8. Help Scout Brand Guidelines
Yardım masası yazılımı sağlayıcısı olan Help Scout, tasarım sistemi dokümantasyon stiliyle farklılaşıyor.
9. BBC GEL
BBC’nin tasarım sistemi Global Experience Language sayesinde kullanıcılar ve teknoloji arasında köprü kuruyor. Özellikle kültürel kaynak açısından zengin içeriğe sahip bir tasarım sistemi olarak ön plana çıkıyor.
10. Goldman Sachs Design
Çok uluslu yatırım bankası olan Goldman Sachs tasarım sistemi, kurumsal finansman için özelleştirilmiştir ve ekiplerin dijital ürünler oluşturmasına olanak tanır.
11. Fluent Design System
Microsoft’un platformlar arası ihtiyaçları karşılayacak, tutarlı ürün deneyimleri oluşturabilmek için açık kaynak olarak sunduğu tasarım sistemidir. Fluent tasarım sistemi ile tasarımcı ve geliştiricilerin, Microsoft ekosistemine üretim yaparken hayatları kolaylaşıyor.
12. Clarity Design System
Prototipten ürüne hızlıca geliştirmeye imkan sağlayan Clarity tasarım sistemi, VMware ürün gamını sağlam temellere oturtuyor ve Angular altyapısı ile dikkat çekiyor.
13. Ant Design
Kurumsal seviyede, özellikle masaüstü ürünler için etkili arayüzler oluşturabileceğiniz Ant Design, verimli ve keyifli bir iş deneyimi oluşturabilmenin kapısını aralıyor.
14. Cookbook
Yelp’in ekosistemi, Cookbook tasarım sistemine bağlı.
15. MongoDB
MongoDB tasarım sistemi.
16. Blocks Design System
Ticari gayrimenkul hizmetleri ve yatırım şirketi olan CBRE’nin tasarım sistemi.
17. Atlassian Design System
Tasarım sistemi deyince hep akla gelen örneklerden olan Atlassian’ın kendi ürün gamı için oluşturduğu tasarım sistemi sayesinde, kullanıcılarına uygulamalar arası kusursuz bir tutarlılık ve deneyim sağlıyor.
18. Biings Design System
Biings tasarım sistemiyle ürünlerinde tutarlı kullanıcı deneyimleri oluşturmaya yönelik bir dizi varlık ve yönergeyi barındırıyor.
19. Lexicon
Lexicon tasarım sistemi, Liferay ürün ekosisteminde arayüz oluşturmak için ortak bir çerçeve sağlayan tasarım dilidir.
20. Lightning Design System
Yine tasarım sistemi örneklerinde bir klasik olan Salesforce’un Lightning tasarım sistemi; tasarım felsefesi ve yaklaşımı açısından detaylandırılmış bir dokümantasyonla dikkat çekiyor. Özellikle motion sistemi olan Kinetik’e göz atmanızı öneririm.
21. Repsol Digital System
İspanya merkezli bir petrol ve doğalgaz şirketi olan Repsol’un tasarım sistemi.
22. Pajamas Design System
DevOps platformu olan GitLab’in Pajamas tasarım sistemi, ekosistemindeki ihtiyaçlara dair tüm malzeme ve yönergeleri bir arada barındırıyor.
23. The Beeline Design System
Beeline tasarım sistemi, Beeline ürünleri tasarlamak ve oluşturmak için kullanılabilecek tasarım standartlarını içeriyor.
24. The QuickBooks Design System
Intuit ürün gamının bir parçası olan QuickBooks’un tasarım sistemi; küçük işletmeler için akıllı çevrimiçi muhasebe yazılımını, sürdürülebilir temellere oturtuyor.
25. Infor Design
ERP çözümleri sunan Infor’un tasarım sistemi olan Infor Design, markası için harika deneyimler yaratmayı sağlayan; araç, bileşen ve yönergeleri barındırıyor.
26. Rivet Design System
Tasarım sisteminin farklı kurum veya kuruluşlara uzanabileceğine dair güzel örneklerden biri olan Rivet tasarım sistemi ile Indiana Üniversitesi, kullanıcılarına sürdürülebilir ve tutarlı deneyimler sunuyor.
27. Fiori Design Guidelines
Yılların uygulaması olan SAP, Fiori tasarım sistemi ile kurumsal uygulamalarına harika kullanıcı deneyimleri getiren bir sistem oluşturuyor.
28. Giffgaff Design
Bir GSM şirketi olan giffgaff’in tasarım sistemi, özellikle arayüz tasarımındaki karakteristik özellikleriyle, tasarım sistemleri dünyasında dikkat çekiyor.
29. Audi Design System
Audi CI Portal’ı ile markası için tutarlı deneyimler oluşturmak amacıyla yönergelere yer veriyor.
30. Shopify Polaris
Çevirim içi mağaza oluşturarak ürünlerinizi satmaya yönelik uçtan uca çözümler sunan Shopify, Polaris tasarım sistemi ile müşterilerine kendi mağazalarını basit bir şekilde oluşturmaları için gerekli tüm malzeme ve varlıklarla, altyapı sağlamış oluyor. Özellikle uygulama tasarım yönergeleri kısmı, içinde barındırdığı bilgilerle dikkat çekici.
31. Human Interface Guidelines
Apple’ın ekosistemindeki tüm platformları için kusursuz uyumluluğu sağlayan tasarım sistemi Human Interface Guidelines; alt yapısında sunduğu varlıklar ve primitif bileşenleriyle, basit ve kolay uygulanabilir çözümler sağlıyor. Teknoloji geliştikçe ve değiştikçe güncellenen yapısıyla, benzerlerine kıyasla fark yaratan, köklü bir geçmişe sahip.
32. Primer Design System
GitHub’ın ekosistemi, kullanıcı portföyü göz önünde bulundurulduğunda, Primer tasarım sistemi ile emin ellerde.
33. Spectrum
Adobe tasarım sistemi Spectrum ile; ürün ekiplerinin daha verimli çalışmasına ve Adobe uygulamalarını daha uyumlu hale getirmesine yardımcı olacak bileşenleri, araçları barındırıyor.
34. U.S. Web Design System (USWDS)
Devlet organları tarafından yürütülen, resmi servisler için oluşturulmuş tasarım sistemlerine güzel örneklerden biri olan USWDS tasarım sistemi; içinde barındırdığı yönerge ve bileşenlerle, dijital servislerde tutarlılığı sağlıyor.
35. Solid
BuzFeed tasarım sistemi Solid ile, kullanıcı deneyimini sağlam temellere oturtuyor.
36. Pulse
Heartbeat Agency’nin tasarım sistemi olan Pulse, özellikle dokümantasyon stili ile göze çarpıyor.
37. AXA Design System
Uluslararası yatırım, emeklilik ve sigorta grubu olan AXA tasarım sistemi ile kullanıcılarına yine uluslararası çapta deneyim tutarlılığı sağlıyor.
38. Canvas
HubSpot pazarlama, satış ve müşteri hizmetleri için yazılım ürünleri geliştiren bir firma olarak, sahip olduğu servislerin tutarlılığını Canvas tasım sistemi ile göğüs geriyor.
39. Evergreen
Evergreen, Segment’in ürün deneyimlerini oluşturduğu tasarım sistemidir.
40. Heroku Design
Bulut tabanlı platform servisi olan Heroku’nun tasarım sistemi, kapsamındaki ürünler için Purple3, marketing için Shibori3 tasarım çerçevelerini içinde barındırıyor.
41. Latitude Design
Tedarik zinciri yönetimi ve lojistiğe odaklanan Flexport’un tasarım sistemi Latitude, arayüz oluşturmak için tasarım yönergeleri, bileşen belgeleri ve diğer tüm kaynakları barındırıyor.
42. Luna
Luna tasarım sistemi, herhangi bir Sainsbury’s markası için kapsayıcı deneyimler oluşturmaya yardımcı olacak yönergeleri, araçları ve belgeleri bir araya getiriyor.
43. Marvel
Marvel Styleguide, tasarım ekipleri için hızlı prototip oluşturma, test etme ve handoff yönetimi yapmayı sağlayan Marvel uygulamasının tasarım sistemidir. Minimalist yaklaşımıyla dikkat çekiyor.
44. PatternFly
PatternFly, tutarlılığı sağlamak ve ekipleri aynı paydada buluşturmak için oluşturulmuş açık kaynaklı bir tasarım sistemidir.
45. Mozilla Protocol
Mozilla Protokol, Mozilla ve Firefox web siteleri için bir tasarım sistemidir. Ortak bir tasarım dili oluşturur. Yeniden kullanılabilir kodlanmış bileşenler sağlar. İçerik ve erişilebilirlik için üst düzey yönergeleri, ana hatlarıyla içinde barındırır.
46. Swarm Design System
Swarm tasarım sistemi, gerçek hayattaki grup buluşmalarını kolaylaştıran bir sosyal ağ uygulaması olan Meetup’ın tasarım sistemidir.
47. Thumbprint
Thumbprint tasarım sistemi, Amerikan ev hizmetleri servisi olan Thumbtack’in tasarım sistemidir.
48. Hudl Design
Sporcuların performansını arttırmaya yönelik analiz araçları sağlayan Hudl’ın tasarım sistemi, özgün dokümantasyon yapısı ile dikkat çekiyor.
49. Workday Canvas Design System
Workday; finans, insan kaynakları, planlama ve harcama yönetimi için çözümler üreten bir firmadır. Canvas tasarım sistemi altyapısıyla müşterilerine hizmet vermektedir.
50. Zendesk Garden
Garden; Zendesk’te ürünler oluştururken araçlar ve standartlar için kaynak oluyor.
51. GOV.UK Design System
İngiltere, hizmetleri için GOV.UK tasarım sistemi ile servislerini tutarlı hale getiriyor. Resmi servisler için oluşturulmuş tasarım sistemlerine güzel örneklerden bir başkası.
52. Cedar Design System
Açık hava marka, donanım, giysi ve ürünler sunan REI’nin tasarım sistemidir.
53. Digital.NSW
NSW hükümetinin tasarım sistemidir.
54. Orbit Design System
Bir çevrimiçi seyahat teknolojisi şirketi olan KIWI’nın tasarım sistemidir.
55. Stacks
Stacks, Stack Overflow genelinde tutarlı deneyimleri hızlı bir şekilde tasarlamak ve oluşturmak için ihtiyaç olan her şeyi kullanıcılarına sağlıyor.
56. Wanda Design System
Wanda, Wonderflow’un dijital ürünlerini kullanırken eksiksiz ve keyifli bir deneyim sağlamak için oluşturulmuş tasarım sistemidir.
57. Finastra Design System
Finastra bir finansal yazılım şirketidir. Tasarım sistemi sayesinde, kullanıcılarına açık kaynak örnek uygulamalar ve şablonlarla, finansal uygulamaların geliştirilmesini hızlandırıyor.
58. Duet Design System
Duet tasarım sistemi, LocalTapiola ve Turva dijital ürünleri için temel oluşturan bir dizi organize araç, model ve uygulama sağlıyor.
59. Seeds
Seeds tasarım sistemi, Sprout markasını anlamak, onu yaratıcı bir şekilde ifade etmek ve anlamlı müşteri deneyimlerine ilham vermek için gereken tüm araçlara ve kaynaklara ev sahipliği yapıyor.
60. Mixpanel Design System
İş analitiği hizmeti olan Mixpanel’in tasarım sistemidir.
61. Barista
Bir kahve sever olarak dokümantasyonunu güzel bir konsepte dayandıran Barista tasarım sistemi, uluslararası Dynatrace teknoloji şirketinin tasarım sistemidir.
62. Blackpack
Blackpack, Skyscanner ürünleri oluşturmak için tasarım kaynakları, yeniden kullanılabilir bileşenler ve yönergelerden oluşan bir tasarım sistemidir.
63. It Design System
Ulusal çapta resmi ve devlet kurumları için sürdürülebilir çözümleri barındıran İtalya’nın resmi tasarım sistemidir.
64. Mailchimp Pattern Library
Bir pazarlama otomasyon platformu ve e-posta pazarlama hizmeti olan Mailchimp’in tasarım sistemi yine tasarım sistemi diyince akla gelen örneklerdendir.
Örneklerin sonuna gelmişken, tasarım sistemi hakkında birkaç notu da yazıya iliştirmek istedim:
Sevgili developer arkadaşlarım;
Tasarım sistemi sadece tasarımcılar için değildir. Sizin daha yalın, etkin bir şekilde kod yazmanız ve diğer paydaşlarınız gibi üretim döngüsünde hayatınızı kolaylaştırmak için var. Ürün geliştirme süreçlerinde sunulan tasarımları sadece kodlamakla yetinmeyip, neden o şekilde tasarlandığına dair, akış tasarımlarını özümseyip, altında yatan sebep-sonuç ilişkisiyle fikir sahibi olmak gerek…
Sevgili tasarımcı arkadaşlarım;
Tasarım sistemi dediğimiz şey, sadece kullanıcı arayüz stil kütüphanesi değildir. Yalnız arayüz tasarımlarını uygularken bünyesindeki tüm bileşenlerin ne işe yaradıklarını öğrenmek yetmez. Daha sistematik deneyimler tasarlayabilmek adına, içinde barındırdığı bileşenlerin anatomik özellikleri ile mikro ve makro sistematik kullanım yöntemlerini de kavramak gerek…
Tasarım sistemini kullanacak diğer tüm paydaşlarım;
Tasarım sistemi, ürününüz için bir yatırımdır! Kullandıkça ve zaman ilerledikçe daha iyi anlayacaksınız. Özellikle çoklu ekiplerde henüz bir tasarım sistemine dayanmadan ürün geliştiriyorsanız, vakit kaybetmeden tasarım sisteminiz üstüne düşünmeye başlayın! Birçok örnekte de göreceğiniz üzere çoğu zaten açık kaynak olarak sunuluyor. Unutmayın ki; ürününüz geliştikçe, büyüdükçe, tasarım sistemi sayesinde geliştirme süreçlerinizin her aşaması daha sürdürülebilir, tutarlı, ölçeklenebilir ve verimli olacak…
Bu makaleyi beğendiyseniz kibarca alkışlamak veya paylaşmak, daha fazla kişiye erişmesini sağlayabilir, desteğiniz için teşekkürler!
Sürekli öğrenmeye devam eden ve bilgilerini paylaşmayı seven biri olarak, diğer makalelerime buradan göz atabilirsiniz. Ayrıca tasarım üstüne sohbet ettiğimiz UX’minimal Podcast’i takip etmenizi de öneririm.
