Tasarım Sistemi Nedir ve Neden Her Projede Olmalı?

Bir web sitesinde ilk sayfayı tasarlarsınız. Harika görünür. İkinci sayfayı tasarlarsınız. O da iyi. Beşinci sayfada butonlar farklı boyutlarda, renkler tutarsız, spacing her yerde farklı.

Bu kaos, tasarımcının hatası değil. Sistemsizliğin doğal sonucu.

Tasarım sistemi, bu kaosu önleyen yapıdır. Güzel tasarım yetmez — tutarlı tasarım lazım.

Style Guide vs Tasarım Sistemi

Bu ikisi sık karıştırılır.

Style guide: Renk kodları, font isimleri, logo kullanım kuralları. Statik bir doküman. "Bu rengi kullan, bu fontu kullan" der.

Tasarım sistemi: Renkler, fontlar, spacing, componentler, layout kuralları, animasyon prensipleri, kullanım örnekleri — hepsi bir arada. Yaşayan, büyüyen, kodla desteklenen bir ekosistem.

Style guide bir sözlüktür. Tasarım sistemi bir dil bilgisi kitabıdır. Sözlük kelimeleri listeler, dil bilgisi kitabı o kelimelerle nasıl cümle kurulacağını öğretir.

Tasarım Sisteminin Bileşenleri

1. Design Tokens

Tasarım kararlarının en küçük birimleri. Renk, spacing, tipografi, gölge gibi değerler.

/* Renkler */
--color-primary: #E5442C;
--color-secondary: #041017;
--color-neutral-100: #F5F5F5;
--color-neutral-900: #1A1A1A;

/* Spacing */
--space-1: 4px;
--space-2: 8px;
--space-3: 12px;
--space-4: 16px;
--space-6: 24px;
--space-8: 32px;

/* Tipografi */
--font-size-sm: 0.875rem;
--font-size-base: 1rem;
--font-size-lg: 1.125rem;
--font-size-xl: 1.25rem;

/* Gölge */
--shadow-sm: 0 1px 2px rgba(0,0,0,0.05);
--shadow-md: 4px 4px 0px #041017;

Tokenlar soyutlama sağlar. #E5442C yazmak yerine --color-primary kullanırsınız. Yarın rengi değiştirmek istediğinizde tek bir yeri güncellersiniz — tüm site güncellenir.

2. Component Kütüphanesi

Tekrar kullanılan arayüz parçaları. Her component'in tanımlanmış varyantları, durumları ve kuralları vardır.

Temel componentler:

• Button: Primary, secondary, ghost, danger varyantları. Small, medium, large boyutları.
• Card: Görsel kartı, metin kartı, CTA kartı.
• Form elemanları: Input, select, checkbox, radio, textarea.
• Modal: Bilgilendirme, onay, form modalı.
• Navigation: Header, sidebar, breadcrumb, pagination.
• Feedback: Alert, toast, badge, progress bar.

Her component için belgelenmesi gereken:

• Hangi varyantlar var?
• Hangi durumlarda nasıl görünür? (hover, active, disabled, error)
• Ne zaman kullanılır, ne zaman kullanılmaz?
• Erişilebilirlik gereksinimleri neler?

3. Layout Sistemi

Sayfaların nasıl yapılandırıldığını belirleyen kurallar.

• Grid sistemi: Kaç sütun? Gutter genişliği ne? Breakpoint'ler nerede?
• Spacing kuralları: Bölümler arası mesafe, component'ler arası mesafe, iç padding
• Sayfa şablonları: Liste sayfası, detay sayfası, form sayfası gibi tekrar eden yapılar

4. İkonografi ve İllüstrasyon

İkonların ve görsellerin tutarlı bir dili olmalı.

• İkon stili: Outlined mı, filled mı, duotone mı?
• İkon boyutları: 16px, 20px, 24px gibi sabit setler
• İllüstrasyon stili: Flat mı, isometric mi, hand-drawn mı?
• Renk kullanımı: İkonlar marka paletinden mi, nötr mü?

5. Motion ve Animasyon

Animasyonlar da sistematik olmalı.

• Süre: Micro interaction'lar 100-200ms, sayfa geçişleri 300-500ms
• Easing: Hangi hareketlerde hangi easing fonksiyonu?
• Prensip: Anlam katan animasyon evet, dekoratif animasyon minimum
• prefers-reduced-motion: Hareket hassasiyeti olan kullanıcılar için alternatif

Neden Gerekli?

Tutarlılık

Tasarım sistemi olmadan, her sayfa biraz farklı görünür. Kullanıcı farkı bilinçli olarak fark etmese bile, bilinçaltında "bir şey tutarsız" hisseder. Güven duygusu zedelenir.

Tasarım sistemiyle her sayfa aynı dili konuşur. Butonlar her yerde aynı, kartlar her yerde aynı, spacing her yerde aynı. Kullanıcı kendini tanıdık bir ortamda hisseder.

Hız

Yeni bir sayfa tasarlamak, sıfırdan başlamak demek değildir. Mevcut componentleri birleştirerek dakikalar içinde yeni sayfalar oluşturulur.

Geliştirici de componentleri kod kütüphanesinden çeker. Her seferinde CSS yazmaz, mevcut bileşeni kullanır.

Ölçeklenebilirlik

5 sayfalık sitede tutarsızlık belki idare eder. 50 sayfalık sitede kabus olur.

Tasarım sistemi, proje büyüdükçe kaosu önler. Yeni sayfalar, yeni özellikler — hepsi mevcut sistem üzerine inşa edilir.

Ekip Uyumu

Tasarımcı Figma'da "Button/Primary/Large" kullanır. Geliştirici kodda <Button variant="primary" size="lg" /> yazar. İkisi aynı şeydir.

Bu ortak dil, iletişim hatalarını azaltır. "Şu butonu biraz daha koyu yap" yerine "Primary button kullan" denir.

Bakım Kolaylığı

Primary rengi değişecek mi? Tek bir token güncellenir. Tüm primary butonlar, linkler, vurgular otomatik güncellenir.

Sistem olmadan: Her dosyayı teker teker bul, her renk kodunu değiştir, bir yeri unutma, tutarsızlık oluş.

Küçük Projede de Gerekli mi?

Evet. Ölçeği farklı olur ama prensipler aynıdır.

Minimum Tasarım Sistemi

Küçük bir proje için bile şunlar olmalı:

Renkler (5-7 renk yeterli):

• Primary (vurgu rengi)
• Secondary (ikincil renk)
• Neutral scale (3-4 gri tonu)
• Semantic renkler (success, error)

Tipografi (1-2 font):

• Başlık fontunun ağırlıkları ve boyutları
• Body fontunun boyutu ve satır yüksekliği

Spacing (4px base unit):

• 4, 8, 12, 16, 24, 32, 48, 64px

Core Componentler (5-6 adet):

• Button (2-3 varyant)
• Card
• Input + Label
• Section container
• Navigation

Bu kadar. Büyüdükçe genişler. Ama başlangıçtan itibaren tutarlılık sağlanır.

Pratik Örnek: Renk Sistemi

Renk sistemi en temel token setidir. Doğru kurulması tüm projeyi etkiler.

Katmanlı Renk Yapısı

/* 1. Marka renkleri (sabit) */
--brand-red: #E5442C;
--brand-dark: #041017;
--brand-light: #F5F5F5;

/* 2. Semantic renkler (anlam taşıyan) */
--color-primary: var(--brand-red);
--color-text: var(--brand-dark);
--color-background: #FFFFFF;
--color-surface: var(--brand-light);

/* 3. Component renkleri (kullanım alanına özel) */
--button-primary-bg: var(--color-primary);
--button-primary-text: #FFFFFF;
--card-border: var(--color-text);
--card-shadow: var(--color-text);

Üç katman var:

1. Marka renkleri: Değişmez. Marka kimliğinden gelir.
2. Semantic renkler: Marka renklerini anlamlandırır. "Primary renk nedir?" sorusuna cevap verir.
3. Component renkleri: Her bileşenin hangi semantic rengi kullandığını belirler.

Bu yapı, tema değişikliğini (dark mode gibi) kolaylaştırır. Sadece 2. katmanı değiştirirsiniz — componentler otomatik güncellenir.

Spacing Sistemi

Rastgele margin ve padding değerleri kaos yaratır. Tutarlı bir spacing scale bunu önler.

4px Base Unit

4px'in katları, görsel düzen için ideal bir temel oluşturur:

4px  — çok dar (ikon ile metin arası)
8px  — dar (form elemanları iç boşluğu)
12px — normal (paragraf ile başlık arası)
16px — geniş (section iç boşluğu)
24px — daha geniş (card iç boşluğu)
32px — bölüm arası
48px — büyük bölüm arası
64px — section arası

Kural basit: Sadece bu değerleri kullanın. 13px, 17px, 22px gibi keyfi değerler yok.

Component Varyantları

Her component'in farklı durumlara uygun varyantları olmalı.

Button Örneği

Her varyantın boyut seçenekleri: sm, md, lg.

Her varyantın durumları: default, hover, active, disabled, loading.

Bu matris ilk bakışta çok görünebilir ama bir kez tanımlandığında, tüm projede tutarlı buton kullanımı garanti olur.

Sonuç

Tasarım sistemi, projenin görünmez iskeletidir. Olmadan da bir şeyler yapılır — ama büyüdükçe dağılır.

Küçük başlayın: renkler, tipografi, spacing, 5-6 component. Proje büyüdükçe sistemi genişletin. Önemli olan başlangıçtan itibaren tutarlı bir temel üzerine inşa etmek.

İyi tasarım güzel görünür. İyi tasarım sistemi projenin her yerinde güzel görünmesini garantiler.