Bir web uygulaması açtığında bazı sayfalarda butonlar mavi, bazılarında yeşil, başlık fontu bir yerde ince bir yerde kalın olunca ne hissediyorsun? "Bu site aceleyle yapılmış" diyorsun, değil mi? İşte tam bu noktada Design System devreye giriyor.
Design System Nedir, Neden Bu Kadar Konuşuluyor
Bir binanın inşa edildiğini düşün. Mimarın elinde sadece tuğlalar yok; aynı zamanda hangi odanın nereye geleceğini, kapıların standart boyutlarını, elektrik tesisatının nasıl döşeneceğini gösteren bir mimari plan da var. Design System de dijital ürünler için tam olarak bu işi yapıyor.
Design System, bir ürünün nasıl görüneceğini ve nasıl davranacağını belirleyen kurallar, bileşenler ve dokümantasyonun tamamına verilen isim. Renk paleti (hangi renkleri nerede kullanacaksın), tipografi (hangi fontlar, hangi boyutlar), buton stilleri, boşluk kuralları, ikonlar, form elemanları... Bunların hepsi bir arada, tutarlı biçimde tanımlanmış halde.
Neden "tasarım sistemi" değil de "Design System" deniyor? Çünkü bu kavram, dünyada bu adla standartlaştı ve Türkçeye birebir çevrildiğinde kapsam tam olarak anlaşılmıyor. Tıpkı "software" yerine "yazılım" diyebilsek de "Design System" için evrensel terimin kendisini kullanmak daha pratik.
Gerçek dünyadan örnekler vermek gerekirse: Google'ın Material Design sistemi, Android ve web uygulamalarının tutarlı görünmesini sağlıyor. Apple'ın Human Interface Guidelines belgesi, iOS uygulamalarının neden birbirine benzediğini açıklıyor. Airbnb de kendi iç Design System'ini oluşturarak yüzlerce tasarımcı ve geliştiricinin aynı dili konuşmasını sağlamış.
Bileşen Kütüphanesi ile Design System Arasındaki Fark
Burada kafaların karıştığı bir nokta var. Bileşen kütüphanesi (component library) ile Design System çoğu zaman birbirinin yerine kullanılıyor ama aslında farklı şeyler.
LEGO analojisini düşün. Bileşen kütüphanesi, elindeki LEGO parçalarının tamamı: 2x4'lük kırmızı parça, 1x2'lik sarı parça, tekerlekler, pencereler. Bunları istediğin gibi bir araya getirebilirsin. Ama Design System, bu parçaların nasıl bir araya geleceğini anlatan kılavuz kitap. Hangi parçalar bir arada kullanılabilir, hangi kombinasyonlar yasak, bir ev yaparken kaç katlı olabilir, kapı nereye gelir... İşte bu kuralların tamamı Design System'i oluşturuyor.
Yani şöyle özetleyebiliriz: Her Design System bir bileşen kütüphanesi içerir, ama her bileşen kütüphanesi bir Design System değildir. Design System'de bileşenlerin yanı sıra prensipler, yazı kuralları (nasıl bir dil kullanılacak), erişilebilirlik standartları ve bunların neden böyle olduğunu açıklayan dokümantasyon da bulunur.
Design Token Nedir, Neden Önemli
Design token (tasarım jetonu), Design System'in en küçük yapı taşı. Somutlaştıralım: primary-color: #3B82F6 bir token'dır. Bu değer, sitendeki tüm ana butonlarda, linklerde, vurgularda kullanılır.
Şimdi düşün: Müşteri geldi ve "Markamızın rengi değişti, artık mavi değil yeşil kullanacağız" dedi. Eğer token kullanmıyorsan, 47 farklı CSS dosyasında tek tek rengi değiştirmen gerekiyor. Token kullanıyorsan, tek bir satırı değiştiriyorsun ve her şey güncelleniyor.
CSS'te (web sayfalarının görsel stilini belirleyen dil) bu kavram --primary-color: #3B82F6 şeklinde CSS değişkeni olarak karşımıza çıkıyor. Token'lar renk, tipografi, boşluk, gölge, köşe yuvarlama gibi her stil değeri için oluşturulabilir.
Küçük Projede de Design System Gerekli mi
"Tamam, Google ve Apple kullanıyor, benim anlayışım. Ama ben tek başıma küçük bir proje yapıyorum, bana ne lazım?" diye düşünüyorsan dur bir saniye.
Design System'in büyük şirketlere özgü bir lüks olduğu fikri, aslında insanların bu kavramı yanlış anlamasından kaynaklanıyor. Büyük şirketlerin Design System'leri gerçekten dev ve karmaşık olabilir. Ama senin için basit bir Design System, aslında sadece şu anlama gelebilir: 3-4 renk belirle, 2 font seç, butonların nasıl görüneceğine karar ver ve bunu bir yere yaz.
Freelance iş yaptığını düşün. Müşteri için bir landing page (ürün veya hizmetin tanıtıldığı tek sayfalık web sitesi) yapıyorsun. Üç hafta sonra aynı müşteri "Bir de blog sayfası ekleyelim" dedi. Eğer ilk başta renk ve tipografi kararlarını bir yere not etmediysen, o blog sayfasını yaparken "Buton tam olarak hangi maviyi kullanıyordu?" diye saatler harcıyorsun. Küçük bir Design System bu dertten kurtarıyor.
Minimal bir Design System neleri kapsayabilir? Birincisi, 3-4 renk: ana renk, ikincil renk, nötr (gri tonları) ve hata rengi. İkincisi, 2 font: biri başlıklar için, biri gövde metni için. Üçüncüsü, spacing (boşluk) skalası: 4px, 8px, 16px, 24px, 32px gibi tutarlı değerler. Dördüncüsü, 5-6 temel bileşen: buton, input alanı, kart, navbar, footer. Beşincisi, bunların hepsini anlatan bir sayfalık bir belge.
Bu kadar. Bu kadarı bile seni rakiplerinizden bir adım öne geçirir ve ilerleyen süreçte saatlerce zaman kazandırır.
LLM Nedir ve Kod Yazarken Arayüzle İlişkisi Ne
LLM, Large Language Model'in kısaltması, Türkçesiyle Büyük Dil Modeli. ChatGPT, Claude, Gemini gibi araçlar birer LLM. Bu modeller, devasa miktarda metin verisiyle eğitilmiş yapay zeka sistemleri ve doğal dilde (yani normal cümlelerle) onlara soru sorabiliyorsun, kod yazdırabiliyorsun, metin ürettirebiliyorsun.
Son dönemde popüler olan "vibecoding" kavramı da tam buradan geliyor. Vibecoding, kod yazmayı bilmeden veya çok az bilerek, LLM'lere ne istediğini söyleyerek uygulama geliştirme yaklaşımı. "Bana bir login sayfası yaz" diyorsun, LLM sana HTML, CSS ve JavaScript kodunu üretiyor.
Kulağa harika geliyor, değil mi? Ama burada ciddi bir sorun var.
LLM'e Tasarım Bağlamı Vermezsen Ne Olur
Şöyle bir senaryo hayal et. Bir proje geliştiriyorsun ve LLM'e şu sırayla komutlar veriyorsun:
İlk gün: "Bana bir ana sayfa yap." LLM mavi bir buton üretiyor, font boyutu 16px.
İkinci gün: "Şimdi bir ürün detay sayfası yap." LLM bu sefer yeşil bir buton üretiyor, font boyutu 14px.
Üçüncü gün: "Bir de iletişim formu ekle." LLM kırmızı bir buton üretiyor, farklı bir font ailesi kullanıyor.
Sonuç: Üç sayfan var ama birbirine hiç benzemiyor. Sanki üç farklı kişi üç farklı projede çalışmış gibi.
Neden böyle oluyor? Çünkü LLM'ler her yeni sohbette sıfırdan başlar. Önceki konuşmanda "butonlarım mavi olsun" demiş olsan bile, yeni bir sohbet açtığında bunu hatırlamıyor. Hatta aynı sohbet içinde bile, konuşma uzadıkça ilk verdiğin kararları göz ardı edebiliyor.
Bu durum, LLM ile proje geliştirmenin en büyük tuzaklarından biri. Tutarsız renk kullanımı, farklı font boyutları, uyumsuz boşluklar... Bunların hepsi birikince kullanıcıya amatörce görünen, güvensizlik hissi veren bir arayüz ortaya çıkıyor. İşte tam burada Design System devreye giriyor.
LLM ile Proje Geliştirirken Design System Nasıl Kullanılır
Çözüm aslında oldukça basit: Design System bilgini LLM'e her seferinde ver. Ama bunu manuel olarak her sohbette tekrarlamak zahmetli. Bunun yerine şu yöntemleri kullanabilirsin.
Birinci yöntem, sistem promptu. Bazı araçlar (örneğin Claude'un Projects özelliği veya ChatGPT'nin custom instructions) sana her sohbetin başında otomatik olarak çalışan bir "arka plan talimatı" verme imkânı sunuyor. Buraya Design System bilgini yapıştırıyorsun ve LLM her zaman bu kurallara göre kod üretiyor.
İkinci yöntem, context olarak yapıştırma. Her yeni sohbetin başında "İşte projemizin Design System'i:" diyerek kurallarını yapıştırıyorsun. Zahmetli ama etkili.
Üçüncü yöntem ise en pratik olanı: design.md dosyası. Tüm tasarım kararlarını bir Markdown dosyasına (Markdown, başlık, liste ve kalın yazı gibi basit biçimlendirme destekleyen düz metin formatı) yazıyorsun. Cursor veya Windsurf gibi yapay zeka destekli kod editörlerinde bu dosyayı projeye ekleyince LLM onu bağlam olarak kullanıyor.
Banani AI gibi araçlar bu süreci daha da kolaylaştırıyor. Banani, design.md dosyası oluşturma konusunda kapsamlı bir rehber sunuyor ve bu yaklaşımı yaygınlaştırmaya çalışıyor.
Design.md Dosyası Oluşturma
Gerçek bir design.md dosyasının nasıl görünebileceğine bakalım:
# Proje Design System
## Renkler
- Primary: #3B82F6 (mavi - ana butonlar, linkler, vurgular)
- Secondary: #8B5CF6 (mor - ikincil aksiyonlar)
- Neutral-100: #F3F4F6 (açık gri - arka planlar)
- Neutral-800: #1F2937 (koyu gri - metinler)
- Error: #EF4444 (kırmızı - hata mesajları)
## Tipografi
- Başlık fontu: Inter, Bold
- Gövde fontu: Inter, Regular
- H1: 36px / H2: 28px / H3: 22px
- Gövde metni: 16px, satır yüksekliği 1.6
## Spacing (Boşluk)
- xs: 4px / sm: 8px / md: 16px / lg: 24px / xl: 32px / 2xl: 48px
## Buton Varyantları
- Primary: Mavi arka plan (#3B82F6), beyaz metin, 8px padding üst/alt, 16px padding sağ/sol, 6px border-radius
- Secondary: Şeffaf arka plan, mavi kenarlık, mavi metin
- Danger: Kırmızı arka plan (#EF4444), beyaz metin
## Kart Bileşeni
- Beyaz arka plan, 1px açık gri kenarlık, 8px border-radius, 16px iç boşluk
## Genel Kurallar
- Tüm bileşenler Tailwind CSS ile yazılacak
- Mobile-first yaklaşım kullan
- Her form elemanının bir label'ı olmalı
Bu dosyayı LLM'e verdiğinde şunu söylüyorsun: "Bu kurallara göre kod yaz, kendi kararlarını verme." LLM de buna uyuyor ve tüm sayfalar tutarlı görünüyor.
Tailwind CSS ile Design System Entegrasyonu
Tailwind CSS (önceden tanımlanmış CSS sınıflarını kullanarak hızlıca stil vermeyi sağlayan bir framework), aslında kendi içinde basit bir Design System altyapısı sunuyor. Projenin kök dizinindeki tailwind.config.js dosyası, bu altyapının kalbi.
Bu dosyada kendi renklerini, font boyutlarını ve spacing değerlerini tanımlayabilirsin:
module.exports = {
theme: {
extend: {
colors: {
primary: '#3B82F6',
secondary: '#8B5CF6',
error: '#EF4444',
},
fontFamily: {
sans: ['Inter', 'sans-serif'],
},
spacing: {
'xs': '4px',
'sm': '8px',
'md': '16px',
'lg': '24px',
}
}
}
}
Artık LLM'e "Tailwind kullanarak, primary rengini butonlarda, secondary rengini vurgularda kullan" diyebilirsin. LLM bu token'ları biliyor ve tutarlı kod üretiyor. Üstelik ileride rengi değiştirmek istersen sadece config dosyasını güncelliyorsun, başka bir şeye dokunmana gerek kalmıyor.
Sıfırdan Basit Bir Design System Oluşturmanın Adımları
Teoriden pratiğe geçelim. Sıfırdan başlıyorsun ve elinde hiçbir şey yok. Ne yapacaksın?
Adım 1: Renk paletini belirle. Dört temel renk kategorisine ihtiyacın var: primary (ana renk, genellikle marka rengi), secondary (ikincil renk, primary ile uyumlu), neutral (gri tonları, arka planlar ve metinler için) ve error (hata durumları için, genellikle kırmızı). Renk seçmekte zorlanıyorsan Coolors veya Tailwind'in renk paleti iyi başlangıç noktaları.
Adım 2: Tipografiyi seç. Başlıklar için bir font, gövde metni için bir font yeterli. Hatta başlangıç için tek bir font ailesi kullanabilirsin, sadece kalınlığı değiştirerek hiyerarşi yaratırsın. Google Fonts ücretsiz ve kaliteli seçenekler sunuyor. Inter, Poppins veya Nunito başlangıç için popüler tercihler.
Adım 3: Spacing skalası oluştur. 4'ün katları olan bir skala kullan: 4px, 8px, 16px, 24px, 32px, 48px, 64px. Bu değerleri her zaman bu listeden seç, "şu an 13px koyayım" deme. Tutarlılık buradan başlıyor.
Adım 4: Temel bileşenleri tanımla. Buton (primary, secondary, danger varyantları), input alanı, kart, navbar ve footer. Her birinin nasıl görüneceğini kağıda veya Figma'ya çiz, sonra kurallarını yaz.
Adım 5: Hepsini bir yere yaz ve paylaş. Tek kişilik projede bile bu önemli. İki ay sonra projeye döndüğünde neyin ne olduğunu hatırlamak için bu belgeye ihtiyacın olacak. LLM ile çalışıyorsan bu belge, LLM'e vereceğin bağlam dosyası.
Figma kullanmak istiyorsan Figma Community sayfasında ücretsiz Design System şablonları bulabilirsin. "Free Design System" diye aratırsan onlarca hazır şablon çıkıyor.
Hangi Araçları Kullanmalısın
Başlangıç seviyesi için araç seçimi kafaları karıştırabiliyor. Şunu söyleyelim: karmaşık araçlarla başlamak yerine işe yarayan basit araçlarla başlamak çok daha mantıklı.
Figma, tasarım aşaması için en iyi seçenek. Ücretsiz planı başlangıç için fazlasıyla yeterli. Bileşenlerini burada çiziyorsun, renk ve tipografi stillerini tanımlıyorsun. Figma'nın kendi Design System rehberi oldukça kapsamlı.
Storybook, geliştirdiğin bileşenleri canlı olarak görüntülemenizi sağlayan bir araç. Daha çok ekip çalışması yapıyorsan veya bileşen kütüphaneni başkalarıyla paylaşmak istiyorsan işe yarıyor. Başlangıç için zorunlu değil.
Notion veya bir Markdown dosyası, kuralları yazmak için yeterli. Zeroheight gibi profesyonel dokümantasyon araçları var ama başlangıç için bunlara gerek yok.
Kısaca: Figma + bir design.md dosyası. Bu ikili, başlangıç seviyesindeki her proje için yeterli. Araçları karmaşıklaştırmak yerine sistemi oluşturmaya odaklan.
İyi UI/UX için Bilmen Gereken Temel Prensipler
UI (User Interface - Kullanıcı Arayüzü) görsel tasarımla, UX (User Experience - Kullanıcı Deneyimi) ise kullanıcının ürünü kullanırken hissettiği deneyimin tamamıyla ilgili. İkisi birbirini tamamlıyor.
Tutarlılık (Consistency): Aynı aksiyonun her yerde aynı görünmesi gerekiyor. Eğer "kaydet" butonu bir sayfada mavi dolgu, başka bir sayfada yeşil kenarlıklıysa kullanıcı kafası karışıyor. "Bu ikisi aynı şeyi mi yapıyor?" diye düşünüyor. Design System tam olarak bu tutarlılığı garanti ediyor.
Hiyerarşi: Kullanıcı sayfaya baktığında gözü önce nereye gitmeli? En önemli bilgi en büyük ve en belirgin olmalı. Birincil aksiyon (örneğin "Satın Al" butonu) ikincil aksiyondan (örneğin "Favorilere Ekle") görsel olarak daha baskın olmalı. Bunu font boyutu, renk ve boyutla sağlıyorsun.
Boşluk Kullanımı (Whitespace): Sayfayı doldurmak zorunda değilsin. Boşluk, içeriğin nefes almasını sağlıyor ve önemli elementleri öne çıkarıyor. Apple'ın web sitesine bak, ne kadar çok boşluk kullandığını fark edeceksin. Bu bir tasarım hatası değil, bilinçli bir tercih.
Erişilebilirlik (Accessibility): Renk kontrastı, görme güçlüğü olan kullanıcılar için kritik. Açık gri metin üzerine beyaz arka plan kullanmak okunaksız. WebAIM Contrast Checker ile renk kombinasyonlarının yeterli kontrasta sahip olup olmadığını kontrol edebilirsin. Font boyutunun da en az 16px olması öneriliyor.
Bu prensipleri daha derinlemesine öğrenmek istersen Nielsen Norman Group ve Google Material Design dokümantasyonu harika kaynaklar.
Gerçek Dünyadan Örnekler ve İlham Kaynakları
Teorik bilginin yanı sıra iyi örneklere bakmak, tasarım anlayışını hızla geliştiriyor. İşte inceleyebileceğin açık kaynaklı Design System'ler:
Google Material Design (Material 3): Android ve web uygulamalarının standartlarını belirleyen sistem. m3.material.io adresinde her bileşenin nasıl kullanılacağını, kaç varyantı olduğunu ve neden o şekilde tasarlandığını görebilirsin. Mesela bir butonun "Filled", "Outlined", "Text" ve "Elevated" olmak üzere dört farklı varyantı var. Her birinin ne zaman kullanılacağı dokümante edilmiş.
Apple Human Interface Guidelines: iOS ve macOS uygulamalarının neden benzer hissettirdiğinin cevabı burada. developer.apple.com/design adresinde sadece görsel kurallar değil, kullanıcı psikolojisine dair prensipler de bulunuyor.
Atlassian Design System: Jira ve Confluence'ı yapan Atlassian'ın Design System'i. atlassian.design adresinde kurumsal ürünler için nasıl bir sistem oluşturulduğunu görebilirsin. Özellikle renk ve tipografi dokümantasyonu çok iyi.
Shopify Polaris: E-ticaret platformu Shopify'ın Design System'i. polaris.shopify.com adresinde hem tasarım hem de içerik (yazı dili) kurallarını bulabilirsin. "İçerik kuralları" kısmı, buton metinlerinin nasıl yazılacağından tutun da hata mesajlarının tonuna kadar her şeyi kapsıyor.
Bu sistemlere bakıp kendi projen için ilham alabilirsin. Hepsini kopyalamak zorunda değilsin; hangi bileşenlere ihtiyacın var, hangi prensipler senin projenle örtüşüyor, bunları seç ve uyarla. Tasarım öğrenmenin en hızlı yolu, iyi örnekleri incelemek ve "neden böyle yapmışlar?" sorusunu sormak.