--- title: "Tasarım sistemi nedir?" author: Androverse author_url: https://androverse.com.tr/yazar/androverse publisher: Androverse updated_at: 2026-10-15 url: https://androverse.com.tr/sozluk/tasarim-sistemi language: tr --- # Tasarım sistemi nedir? Tasarım sistemi, bir ürün ailesinin tutarlı geliştirilmesini sağlayan ilkeler, bileşenler, tasarım kararları ve kullanım rehberlerinin bütünüdür. Diğer adlar: Design system. ## Nerede işine yarar? Bileşenlerin görünümü kadar hangi durumda kullanılacakları da tanımlanır. Tasarım ile kod arasında ortak adlar ve durumlar kurulur. Sistem yeni bir ihtiyaç doğduğunda genişler; yalnız bir defa hazırlanıp bırakılan çizim arşivi olarak düşünülmez. ## Bir cümlede uygulaması Form alanının etiketi, yardım metni, hata durumu ve kod bileşenini aynı rehberde tanımlamak. ## Neyle karıştırılmamalı? Bir UI kit görsel parçaları sunabilir; tasarım sistemi bu parçaların karar ve bakım yaklaşımını da içerir. ## Aynı markanın her ekranı yeniden icat edilmesin Bir sitede ana sayfa, blog, sözlük ve hizmet detayları hazırlanıyor. Aynı düğme dört ayrı dosyada farklı boşluklarla yeniden yazılmış, başlıkların ölçüsü sayfadan sayfaya değişmiş. Tasarım sistemi bu tekrarları ortak kurallara bağlayabilir. Ancak hedef bütün sayfaları aynı kart dizisine çevirmek değildir. Ortak kimlik ve davranış korunurken içeriğin ihtiyacına göre farklı kompozisyonlar kurulabilmelidir. Örnek bir sistemde düğmenin görünümü, odak davranışı ve eylem dili ortaktır. Blog uzun okumaya, sözlük tanım ile karşılaştırmaya, hizmet sayfası kapsam ile örneğe odaklanır. Bu sayfaların hepsinde aynı düğme çalışır, fakat bütün bölüm düzenlerinin aynı olması gerekmez. Sistemin olgunluğu yalnız bileşen sayısıyla değil, farklı içeriklerde tutarlı kararlar üretmesiyle anlaşılır. Tasarım dosyası ile kod arasında ilişki de önemlidir. Tasarımda yeni bir varyant eklenirken uygulamadaki bileşen değişmiyorsa iki ayrı sistem oluşur. İsimler, kullanım koşulları ve değişikliklerin sorumlusu açık olmalıdır. Küçük bir ekip için sade bir bileşen kümesi ve kısa kullanım notları yeterli olabilir. Büyük bir katalog kurmak, kimsenin güvenle kullanamadığı bir sistemi iyi hale getirmez. Sistemin benimsenmesi için örneklerin günlük üretimle ilişkili olması gerekir. Hiçbir gerçek sayfada kullanılmayan kusursuz bir bileşen sayfası, içerik ekibinin sorularına cevap vermeyebilir. Kısa ve uzun başlık, eksik görsel, farklı dil ve küçük ekran gibi gerçek durumları göster. Bir parçanın sınırı açık olduğunda yanlış kullanım daha erken fark edilir. Kullanım örnekleri yalnız geliştiriciler için değil, metin ve görsel hazırlayan kişiler için de yol gösterir. Böylece sistemin karakteri yeni içerik geldiğinde de korunur; tasarım kararları tek bir kişinin sürekli müdahalesine bağımlı kalmaz. Eski bileşenlerin değiştirilmesi de sistemin parçasıdır. Yeni bir sürüm çıkarıldığında bütün ekranların aynı anda güncellenip güncellenmeyeceğini ve eski varyantın ne zaman bırakılacağını belirle. İki geçerli görünen çözüm uzun süre yan yana kalırsa kullanıcılar kadar ekip de hangisinin tercih edildiğini bilemeyebilir. Değişikliğin nedenini kısa notla açıklamak, gelecekte aynı kararı tekrar tartışmayı azaltır. Tasarım sistemi yalnız yeni parçaların kataloglandığı yer değil, eski kararların nasıl geliştiğinin de kaydıdır. Bu bakım yaklaşımı ortaklığın zaman içinde dağılmasını önler ve yeni ihtiyaçlara kontrollü alan açar. ### Temeller Renk, tipografi, boşluk, köşe yarıçapı ve hareket kararlarını rolleriyle tanımla. Sadece değer listesi vermek yerine hangi durumda kullanıldıklarını açıkla. Yüzey rengi ile metin rengi arasındaki ilişki, tek bir renk kodundan daha önemli olabilir. Ortak temeller bileşenlerin aynı ailede görünmesini sağlar. ### Bileşenler Tekrar eden arayüz parçalarını görünüm ve davranışıyla birlikte ele al. Düğme, seçim alanı ve içerik kartı yalnız statik görseller değildir. Durumları, içerik sınırları ve erişilebilirlik ihtiyaçları da tanımlanmalıdır. Benzer görünen ama farklı görev yapan parçaları gerekçesiz birleştirmek sistemi kullanmayı zorlaştırabilir. ### Kullanım kuralları Bir bileşenin ne zaman seçileceği ve ne zaman seçilmeyeceği anlaşılmalı. Örnekler gerçek içerikle hazırlanırsa kurallar daha kolay uygulanır. Yeni bir ihtiyaç geldiğinde mevcut parçayı genişletmek mi yoksa yeni parça oluşturmak mı gerektiğini birlikte değerlendir. Sistem yaşayan bir karar hafızasıdır. ## Bileşen kütüphanesi ile tasarım sistemi ### Parçaların koleksiyonu Bir kütüphane düğmeler, alanlar ve kartlar gibi tekrar kullanılabilir parçaları içerebilir. Bu parçalar üretimi hızlandırır, ancak tek başına hangi problemin hangi bileşenle çözüleceğini açıklamayabilir. Görsel olarak zengin bir kütüphane, kullanım kuralları ve sorumlulukları eksikse farklı ekiplerde tutarsız sonuçlar üretebilir. ### Kararların bütünü Tasarım sistemi temelleri, bileşenleri, kullanım örneklerini ve değişiklik sürecini birbirine bağlar. Marka karakterinin ve davranış tutarlılığının sürmesini hedefler. Kütüphane bu sistemin önemli bir aracıdır. Sistemi yalnız tasarım dosyası veya yalnız kod paketi olarak görmek, içerik ve ürün kararlarının ortaklığını kaçırabilir. ## Ortak bileşeni gerçek kullanımda sınamak Tasarım sistemi tek bir ekranı güzelleştiren bir dosya koleksiyonu olarak kalmamalıdır. Bileşenin farklı içerik, dil ve durumlarla nasıl çalışacağı tanımlanır. Tasarım ile kod arasında ayrı versiyonlar oluşursa ekip aynı adı taşıyan farklı davranışlar üretmeye başlar. - Bileşenin amacı, varyantları ve erişilebilir davranışını belirt. - Tasarım örneğini çalışan kodla karşılaştır. - Değişiklik sahipliği ve sürüm geçişini açık tut. ## Bir UI kit tasarım sistemi midir? UI kit görsel parçalar sağlar. Tasarım sistemi bunların ne zaman ve nasıl kullanılacağını, nasıl geliştirileceğini ve nasıl korunacağını da kapsar. Hazır parçaların bulunması ortak kararların oluştuğu anlamına gelmez. ## Bu karar, işinin neresinde? Tasarım sistemi kavramının bir projede nasıl ele alındığını; yaklaşım, süreç ve teslimler üzerinden incele. [Web tasarım & yazılım](https://androverse.com.tr/hizmetler/web-tasarim-yazilim) ## Karar masası ### Küçük bir site için tasarım sistemi fazla mı? Kapsamına göre küçük tutulabilir. Aynı düğme, başlık düzeni ve boşluk ilişkisi birkaç sayfada tekrar ediyorsa bunları ortaklaştırmak yararlıdır. Büyük şirketlerin belge yapısını kopyalamak gerekmez. Kullanılan parçaları ve kararları anlaşılır biçimde kaydetmekle başlanabilir. Sistem, ekibin ihtiyacından daha ağır bir idari yapı haline gelmemeli; tekrar eden kararı azaltmalı ve yeni sayfa üretimini kolaylaştırmalıdır. ### Tutarlılık bütün sayfaların aynı görünmesi mi? Hayır. Tutarlılık kararların ilişkisidir. Blogun okuma ölçüsü, projenin görsel alanı ve sözlüğün karşılaştırma düzeni farklı olabilir. Ortak tipografi, yüzey dili, kontrol davranışı ve içerik rayları bu farklılıkları aynı site içinde tutar. Her sayfayı tek şablona sıkıştırmak içeriğin işlevini zayıflatabilir. Sistemin esnekliği, farklı sayfaları ayrı markalar gibi göstermeden farklı ihtiyaçlara cevap verebilmesidir. ### Yeni varyant ne zaman eklenir? Gerçek bir kullanım ihtiyacı mevcut varyantlarla karşılanamıyorsa ve bu ihtiyacın tekrarlanması bekleniyorsa yeni varyant değerlendirilebilir. Yalnız bir ekranı süslemek için çok sayıda seçenek eklemek bileşeni anlaşılmaz hale getirebilir. Önce içerik ve kompozisyonla çözülebilip çözülemeyeceğine bak. Varyant eklenirse adı, kullanım koşulu, durumları ve kod karşılığı birlikte tanımlanmalı; eski kullanımlara etkisi de düşünülmelidir. ## Üç sayfadan ortak karar çıkar Siteden farklı amaçları olan üç sayfa seç. Bir yazı, bir hizmet ve bir proje detayı olabilir. Ortak görünen parçaları ve farklı olması gereken düzenleri ayrı listelerde topla. - [ ] Düğme, başlık, kart ve form alanlarını karşılaştır. Aynı görevi yapan parçaların gereksiz farklılıklarını işaretle. Farklı görev yapan parçaları ise yalnız benzedikleri için tekleştirme. Amaç dosya sayısını körlemesine azaltmak değil, kullanıcının tutarlı davranış görmesini sağlamaktır. - [ ] Renk ve boşluk değerlerini rollerine göre grupla. Aynı yüzey için birbirine çok yakın çok sayıda değer varsa hangisinin temel karar olduğunu belirle. Başlık, gövde ve destek metni ilişkisini gerçek içerikte kontrol et. Değerleri isimlendirmek kullanım mantığının yerine geçmesin. - [ ] En sık kullanılan bir bileşenin durumlarını ve içerik sınırlarını yaz. Uzun etiket, dar ekran, klavye odağı ve pasif durum gibi örnekler ekle. Tasarım ile kod arasında aynı kararın bulunduğundan emin olmak için iki tarafın adlandırmasını eşleştir. - [ ] Yeni ihtiyaçların nasıl ele alınacağını kısa bir süreçle tanımla. Kimin karar vereceği, değişikliğin nerede belgeleneceği ve kullanan kişilere nasıl aktarılacağı belli olsun. Böylece tasarım sistemi bir kere hazırlanıp eskiyen dosya yerine üretime bağlı bir ortak araç olur. İyi tasarım sistemi, yaratıcılığı tek şablona kilitlemez. Tekrar eden kararları sağlamlaştırır ve yeni fikirlere alan açar. Parçalar kadar, parçaların neden ve nasıl birlikte çalıştığı önemlidir. ## Bağlantılı kavramlar - [Tasarım tokenı](https://androverse.com.tr/sozluk/tasarim-tokeni) — Tasarım tokenı, renk, boşluk veya yazı boyutu gibi tekrar kullanılan bir tasarım kararının adlandırılmış değeridir. - [UI](https://androverse.com.tr/sozluk/ui) — UI, bir kişinin dijital ürünle etkileşim kurduğu ekran, kontrol ve görsel geri bildirimlerin oluşturduğu arayüzdür. - [Marka rehberi](https://androverse.com.tr/sozluk/marka-rehberi) — Marka rehberi, görsel ve sözel kimliğin farklı ekiplerce tutarlı kullanılmasını sağlayan kurallar ve örnekler toplamıdır. ## Konuyu uygulamaya taşı - [Web tasarım & yazılım](https://androverse.com.tr/hizmetler/web-tasarim-yazilim) — Tasarım sistemi kavramının bir projede nasıl ele alındığını; yaklaşım, süreç ve teslimler üzerinden incele. - [Sunumda “disruptive”. Çıktıda aynı şablon.](https://androverse.com.tr/blog/sunumda-disruptive-ciktida-ayni-sablon) — Tasarım sistemi ile ilgili tasarım kararını Androverse’nin uygulama örnekleri ve değerlendirme sorularıyla birlikte düşün. ## Kaynaklar - [U.S. Web Design System](https://designsystem.digital.gov/) [Androverse profili](https://androverse.com.tr/yazar/androverse) · [Yayın ilkeleri](https://androverse.com.tr/yayin-ilkeleri)