Prototype Nedir? Etkileşimli Tasarım Taslakları Oluşturma Rehberi

Seviye: Başlangıç
Kategori: UX Design
Son güncelleme: Ocak 2025

---

Giriş

Statik tasarımlar her şeyi anlatamaz.

Wireframe'ler ve mockup'lar "nasıl görüneceğini" gösterir ama "nasıl hissettireceğini" gösteremez. Bir butona tıkladığında ne olacak? Sayfa nasıl geçiş yapacak? Form gönderildiğinde kullanıcı ne görecek?

İşte burada prototype devreye girer.

Prototip, tasarımının çalışan bir simülasyonu. Gerçek kod yok ama gerçek gibi hissettiriyor. Tıklıyorsun, geçiş oluyor, animasyon çalışıyor. Kullanıcılar sanki gerçek ürünü kullanıyormuş gibi test edebiliyor.

Bu yazıda prototype'ın ne olduğunu, neden önemli olduğunu ve nasıl oluşturulacağını öğreneceksin.

---

Prototype Ne Demek?

"Proto" (ilk) + "type" (örnek) = İlk örnek, taslak.

Prototip, final ürün değil. Bir deney aracı. Fikirleri test etmek, geri bildirim almak ve sorunları erken yakalamak için kullanılır.

---

Prototip Ne İşe Yarar?

1. Fikirleri test etme

Bir fikrin işe yarayıp yaramayacağını anlamanın en hızlı yolu, prototip yapıp denemek. Kod yazmak haftalar alır, prototip saatler.

2. Kullanılabilirlik testi

Gerçek kullanıcılarla test yapmak için gerçek ürün gerekmiyor. Prototip yeterli. "Bu butonu bul ve tıkla" görevi prototiple yapılabilir.

3. Stakeholder sunumu

"Şöyle çalışacak" demek yerine, "buyurun deneyin" demek çok daha etkili. Prototip, fikirleri satmanın en iyi yolu.

4. Developer iletişimi

Statik tasarım + prototip kombinasyonu, developer'a "nasıl çalışmalı" sorusunun cevabını verir. Animasyonlar, geçişler, etkileşimler netleşir.

5. Erken hata tespiti

Bir akış sorunu var mı? Kullanıcı kaybolur mu? Prototipte görmek, geliştirme sonrası görmekten 10 kat ucuz.

---

Prototip Türleri

Prototipler sadakat seviyesine (fidelity) göre ayrılır:

Low-Fidelity Prototype

En basit hali. Hızlı, kaba, konsept doğrulama için.

Özellikleri:

• Kağıt veya basit dijital
• Görsel detay yok
• Temel tıklama/geçiş
• Dakikalar/saatler içinde yapılır

Ne zaman kullanılır:

• İlk fikirler
• Konsept doğrulama
• Beyin fırtınası sonrası

Mid-Fidelity Prototype

Orta detay seviyesi. Akışı test etmek için ideal.

Özellikleri:

• Wireframe bazlı
• Gerçekçi akış
• Temel etkileşimler
• Günler içinde yapılır

Ne zaman kullanılır:

• Kullanılabilirlik testi
• Stakeholder geri bildirimi
• Akış doğrulama

High-Fidelity Prototype

Final tasarıma yakın. Gerçek gibi görünür ve hisseder.

Özellikleri:

• Gerçek renkler, fontlar, görseller
• Detaylı etkileşimler
• Animasyonlar ve micro-interactions
• Günler/haftalar içinde yapılır

Ne zaman kullanılır:

• Final kullanılabilirlik testi
• Stakeholder onayı
• Developer handoff
• Kullanıcı araştırması

[TABLE] | Fidelity | Görsel | Etkileşim | Süre | Kullanım | |----------|--------|-----------|------|----------| | Low | Kaba/kağıt | Temel tıklama | Dakikalar | Konsept test | | Mid | Wireframe | Akış | Saatler | Kullanılabilirlik | | High | Final tasarım | Detaylı | Günler | Final onay | [/TABLE]

---

Prototip Yöntemleri

1. Kağıt Prototip

En basit ve en hızlı yöntem.

Nasıl yapılır:

• Her ekranı ayrı kağıda çiz
• Kullanıcıya göster
• "Buraya tıklasaydın" de, sonraki kağıdı göster

Avantajları:

• Sıfır maliyet
• Çok hızlı
• Herkes yapabilir
• Erken fikirler için ideal

Dezavantajları:

• Gerçekçi değil
• Kaydetmek zor
• Uzaktan test zor

2. Tıklanabilir Prototip

Statik ekranları bağlayarak oluşturulan prototip.

Nasıl yapılır:

• Ekranları tasarla (wireframe veya mockup)
• Hotspot'lar ekle (tıklanabilir alanlar)
• Ekranları birbirine bağla
• Geçiş animasyonu ekle

Araçlar: Figma, InVision, Marvel

Avantajları:

• Hızlı oluşturulur
• Kolayca paylaşılır
• Test için yeterli

Dezavantajları:

• Sınırlı etkileşim
• Gerçek data yok

3. Etkileşimli Prototip

Daha karmaşık etkileşimler içeren prototip.

Özellikler:

• Conditional logic (if/else)
• Değişkenler (variables)
• Dinamik içerik
• Karmaşık animasyonlar

Araçlar: Figma (advanced), ProtoPie, Principle, Framer

Avantajları:

• Çok gerçekçi
• Kompleks senaryolar
• Micro-interactions

Dezavantajları:

• Daha fazla zaman
• Öğrenme eğrisi

4. Kod Prototip

HTML/CSS/JS ile yapılan prototip.

Ne zaman kullanılır:

• Çok karmaşık etkileşimler
• Gerçek data gerektiğinde
• Developer background varsa

Avantajları:

• Tam kontrol
• Gerçek data
• Bazen ürüne dönüşür

Dezavantajları:

• En yavaş
• Teknik beceri gerektirir

---

Figma'da Prototip Oluşturma

Figma en popüler prototipleme aracı. Temel adımlar:

Adım 1: Ekranları Hazırla

Her ekranı ayrı frame olarak tasarla. Frame isimlendirmesi önemli:

• 01-Home
• 02-Product-List
• 03-Product-Detail
• 04-Cart

Adım 2: Prototype Moduna Geç

Sağ panelde "Design" yerine "Prototype" sekmesine tıkla.

Adım 3: Bağlantı Oluştur

1. Bir element seç (buton, kart, link)
2. Sağ taraftaki mavi noktaya tıkla ve sürükle
3. Hedef frame'e bırak
4. Bağlantı oluştu

Adım 4: Etkileşim Ayarları

Her bağlantı için ayarlar:

Trigger (Tetikleyici):

• On tap/click (tıklama)
• On drag (sürükleme)
• While hovering (hover)
• Mouse enter/leave
• After delay (gecikme sonrası)

Action (Aksiyon):

• Navigate to (sayfa geçişi)
• Open overlay (modal açma)
• Swap with (component değiştirme)
• Back (geri gitme)
• Close overlay
• Scroll to

Animation (Animasyon):

• Instant (anında)
• Dissolve (çözünme)
• Move in/out (kayma)
• Push (itme)
• Slide in/out

Adım 5: Önizleme ve Paylaş

• ▶️ butonuyla önizle
• "Share" ile link oluştur
• "Present" ile tam ekran göster

---

Prototip Best Practices

1. Amacı belirle

Her prototipin bir amacı olmalı. "Ne test edeceğim?" sorusunu cevapla.

[COMPARISON] ❌ "Tüm uygulamanın prototipi" ✅ "Checkout akışını test etmek için prototip" [/COMPARISON]

2. Doğru fidelity seç

Erken aşama = low-fi, final onay = high-fi. Her şey high-fi olmak zorunda değil.

3. Gerçekçi içerik kullan

"Lorem ipsum" yerine gerçekçi içerik. Kullanıcılar gerçek içerikle daha doğal etkileşir.

4. Edge case'leri dahil et

• Boş durum (empty state)
• Hata durumu (error state)
• Yükleme durumu (loading state)
• Başarı durumu (success state)

5. Akışı tamamla

Yarım kalan akışlar test sonuçlarını bozar. "Burası henüz yok" demek yerine, basit placeholder ekle.

6. Mobil için ayrı düşün

Desktop prototip mobilde çalışmaz. Responsive düşün veya ayrı mobil prototip yap.

---

Prototip Araçları

[TABLE] | Araç | Fiyat | En İyi Yön | Platform | |------|-------|------------|----------| | Figma | Ücretsiz+ | All-in-one, işbirliği | Web | | ProtoPie | Ücretli | Karmaşık etkileşimler | Desktop | | Principle | Ücretli | Animasyon | macOS | | Framer | Ücretsiz+ | Kod + tasarım | Web | | InVision | Ücretsiz+ | Basit prototipler | Web | | Marvel | Ücretsiz+ | Hızlı prototip | Web | | Adobe XD | Ücretsiz+ | Adobe ekosistemi | Desktop | [/TABLE]

Araç Seçimi

Yeni başlıyorsan: Figma (ücretsiz, kolay, yaygın)

Karmaşık animasyonlar: ProtoPie veya Principle

Kod biliyorsan: Framer

Sadece akış testi: InVision veya Marvel

---

Wireframe vs Mockup vs Prototype

Sık karıştırılan üç kavram:

[TABLE] | Özellik | Wireframe | Mockup | Prototype | |---------|-----------|--------|-----------| | Sadakat | Düşük | Yüksek | Değişken | | Görsel | Gri, placeholder | Gerçek tasarım | Değişken | | Etkileşim | Yok (statik) | Yok (statik) | Var (tıklanabilir) | | Amaç | Yapı | Görsel | Deneyim | | Soru | Ne nerede? | Nasıl görünecek? | Nasıl çalışacak? | [/TABLE]

[COMPARISON] Wireframe: İskelet - yapıyı gösterir Mockup: Cilt - görünümü gösterir Prototype: Hareket - deneyimi gösterir [/COMPARISON]

Tipik akış: Wireframe → Mockup → Prototype → Geliştirme

Ama her projede hepsi gerekli değil. Bazen wireframe'den direkt prototype'a geçilir.

---

Prototiple Test Yapma

Prototip oluşturdun. Şimdi test zamanı.

Test Senaryosu Hazırla

Senaryo: Yeni bir çift koşu ayakkabısı almak istiyorsun. Görev 1: Ana sayfadan koşu ayakkabıları kategorisine git. Görev 2: Bir ayakkabı seç ve detaylarını incele. Görev 3: Sepete ekle. Görev 4: Ödeme sayfasına ilerle.

Test Sırasında Dikkat Et

• Kullanıcı nerede takılıyor?
• Hangi butonu bulamıyor?
• Beklediği yerde olmayan ne var?
• Kaç tıklamada görevi tamamlıyor?

Test Sonrası

• Notları derle
• Paternleri bul
• Önceliklendir
• İtere et

---

Sık Yapılan Hatalar

1. Her şeyi prototiplemek

Tüm uygulama değil, test edilecek akış yeterli.

2. Çok erken high-fidelity

Konsept bile netleşmeden piksel-perfect prototip yapmak zaman kaybı.

3. Etkileşimleri unutmak

Sadece ekranları bağlamak yetmez. Hover, loading, error durumları da önemli.

4. Test etmeden geçmek

Prototip yapıp kimseye göstermemek, yapmamış olmakla aynı.

5. Geri bildirim sonrası güncellememek

Test yaptın, sorunları buldun ama düzeltmedin. Prototip ölü döküman oldu.

---

---

---

İlgili İçerikler

Önceki: Product Design Nedir?

Sonraki: Wireframe vs Mockup vs Prototype

İlgili konular:

• Wireframe Nedir?
• Kullanılabilirlik Testi Nedir?
• User Flow ve Task Flow

İlgili Roadmap: UX Designer Roadmap → Tasarım Çıktıları

---

Kaynaklar

Derinleşmek istersen:

• Prototyping - NNGroup (İngilizce, 8 dk)
• Figma Prototyping Guide (İngilizce, resmi döküman)
• Prototyping - IxDF (İngilizce, 10 dk)