Kısaca: Wireframe, bir ekranın renksiz iskeletidir: neyin nerede duracağını ve öncelik sırasını gösterir. Mockup, aynı ekranın renk, font ve görsellerle son görünümüdür ama tıklanamaz. Prototip ise tıklanabilir bir modeldir; ekranlar arası akışı test etmeye yarar. Tasarım sistemi, bu ekranlarda tekrar tekrar kullanılan renk, yazı, boşluk değerleri ve bileşenlerin (buton, form, kart) tek bir yerde toplanmış ve belgelenmiş hâlidir. Küçük bir projede bile hız ve tutarlılık sağlar.
Kısa cevap
Bir web sitesi tasarımı tek adımda doğmaz. Önce yapıya, sonra görünüme, sonra davranışa karar verilir. Her aşamada farklı bir çıktı üretilir ve her biri farklı bir soruya cevap verir. Bu yazıda bu aşamaları ve hepsini birbirine bağlayan tasarım sistemini anlatıyorum.
Wireframe nedir?
Wireframe, bir sayfanın ya da ekranın siyah beyaz, kutulardan oluşan taslağıdır. Görseller çarpı işaretli kutularla, metinler gri çizgilerle gösterilir. Amaç, renk ya da font tartışmasına girmeden şu sorulara cevap vermektir: Sayfada hangi bölümler var? Hangisi daha önemli? Kullanıcı nereden nereye gidecek?
- Ne zaman: Projenin başında, içerik ve sayfa yapısı netleşirken.
- Nasıl: Kâğıt kalem, Figma ya da benzeri bir araçla, hızlı ve kaba.
- Neden önemli: Yapıdaki bir hatayı wireframe aşamasında düzeltmek dakikalar sürer; bitmiş tasarımda ya da kodda düzeltmek günler.
Wireframe’i bilinçli olarak gri tutun. Müşteriye renkli bir taslak gösterdiğinizde konuşma hemen “Bu mavi olmasın” yönüne kayar; asıl karar vermeniz gereken yapı gözden kaçar. Bölümlerin önem sırasını kurmayı görsel hiyerarşi yazısında anlattım.
Mockup nedir?
Mockup, wireframe’in renk, tipografi, gerçek görseller ve içerikle giydirilmiş hâlidir. Sitenin bittiğinde nasıl görüneceğini gösterir, ama statiktir: Butonlar tıklanmaz, menüler açılmaz. Müşteri onayı genellikle bu aşamada alınır.
İyi bir mockup gerçek içerikle hazırlanır. “Lorem ipsum” ile hazırlanan bir tasarım, gerçek başlıklar iki satıra taştığında ya da ürün adları beklenenden uzun çıktığında bozulabilir. Türkçe metinlerin İngilizce örneklere göre genellikle daha uzun olduğunu da hesaba katın.
Prototip nedir?
Prototip, tasarımın etkileşimli bir modelidir: Butona tıklayınca bir sonraki ekran açılır, menü kayar, form adımları ilerler. Kod yazmadan, kullanıcının site içindeki yolculuğunu denemenizi sağlar.
NN/g prototipleri sadakat (fidelity) düzeyine göre ikiye ayırır: Kâğıt ya da wireframe üzerinden yapılan düşük sadakatli prototipler fikirleri hızla denemek için, gerçek tasarıma yakın yüksek sadakatli prototipler ise ayrıntıları test etmek için uygundur (NN/g). Beş kullanıcıyla yapılan basit bir prototip testi bile, kodlama başlamadan önce ciddi sorunları ortaya çıkarabilir.
| Wireframe | Mockup | Prototip | |
|---|---|---|---|
| Cevapladığı soru | Ne nerede? | Nasıl görünecek? | Nasıl çalışacak? |
| Görünüm | Gri, kutular | Son tasarım | Son tasarım ya da taslak |
| Etkileşim | Yok | Yok | Var |
| Hazırlama süresi | Kısa | Uzun | Orta–uzun |
| Kiminle konuşulur? | Müşteri, ekip | Müşteri | Kullanıcılar, geliştiriciler |
Tasarım sistemi nedir?
Tasarım sistemi, bir ürünün ya da sitenin bütün ekranlarında kullanılan görsel kararların ve bileşenlerin, kullanım kurallarıyla birlikte tek bir yerde toplanmasıdır. NN/g’ye göre bir tasarım sistemi, tasarımı tutarlı hâle getirirken ekiplerin daha hızlı çalışmasını da sağlar (NN/g).
Bir tasarım sisteminde neler olur?
- Değerler (design token): Renkler, yazı boyutları, boşluklar, köşe yarıçapları, gölgeler. Tipografik ölçek ve renk paleti ile boşluk ölçeği burada yaşar.
- Bileşenler: Buton, form alanı, kart, menü, uyarı kutusu; her birinin durumları ve varyantları. Buton ve form kuralları burada tanımlanır.
- Desenler: Bileşenlerin birlikte kullanım biçimleri: giriş formu, ürün listesi, arama sonuçları.
- Dokümantasyon: Ne zaman hangi bileşenin kullanılacağı, yapılmaması gerekenler, erişilebilirlik notları.
Brad Frost’un “Atomic Design” yaklaşımı bu katmanlı düşünceyi kimyadan ödünç aldığı terimlerle (atomlar, moleküller, organizmalar, şablonlar, sayfalar) anlatır ve yeni başlayanlar için iyi bir çerçevedir (Atomic Design). Açık erişimli örnek görmek isterseniz İngiltere hükümetinin GOV.UK Design System’i, her bileşenin neden öyle tasarlandığını araştırmasıyla birlikte anlatır.
Küçük bir projede tasarım sistemi gerekir mi?
Büyük şirketlerin yüzlerce sayfalık sistemleri gerekmez. Ama küçük bir kurumsal site için bile tek sayfalık bir “stil rehberi” işe yarar: renk tonları, yazı ölçeği, boşluk ölçeği, buton türleri ve form alanı. Bu sayfa tasarım dosyasında ve CSS değişkenlerinde aynı değerlerle tanımlandığında, siteye sonradan eklenen her sayfa kendiliğinden uyumlu olur. Müşteriye teslim ederken de değerli bir belgedir.
Süreç nasıl ilerler?
- İçerik ve sayfa listesi (site haritası)
- Ana sayfalar için wireframe
- Tasarım yönü: bir iki ekranda mockup ve renk, font kararları
- Kararların stil rehberine dönüşmesi (küçük tasarım sistemi)
- Bütün sayfaların mockup’ları
- Kritik akışlar için prototip ve kısa kullanıcı testi
- Geliştirme ve teslim
Bu adımların hepsini Figma’da yapabilirsiniz; temel kullanımını Figma rehberinde anlattım.
Sık sorulan sorular
Wireframe ile mockup arasındaki fark nedir?
Wireframe yapıyı, mockup görünümü gösterir. Wireframe renksiz ve kabadır; mockup son tasarıma en yakın statik görüntüdür.
Her projede prototip gerekli mi?
Basit bir tanıtım sitesinde mockup çoğu zaman yeterlidir. Çok adımlı formlar, rezervasyon ya da ödeme akışları gibi etkileşimin kritik olduğu yerlerde prototip, kod yazmadan önce sorunları yakalamanın en ucuz yoludur.
Tasarım sistemi ile stil rehberi aynı şey mi?
Stil rehberi genellikle renk, tipografi ve logo kullanımını anlatır. Tasarım sistemi bunlara ek olarak bileşenleri, kullanım kurallarını ve çoğu zaman bileşenlerin koddaki karşılıklarını da içerir.
Bu yazı Kasım 2026 itibarıyla geçerli bilgilere dayanır.
