Wireframe Nedir? Tasarımın İskeletini Oluşturma Rehberi

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

---

Giriş

Bir bina inşa etmeden önce mimar çizim yapar. Duvarlar nerede olacak, kapılar nereye açılacak, pencereler hangi yönü görecek. Henüz boya rengi, parke seçimi yok. Sadece yapı.

Dijital ürünlerde de aynı mantık geçerli. Renkler, fontlar ve güzel görseller eklemeden önce, sayfanın iskeletini çizersin. Buna wireframe diyoruz.

Wireframe, tasarım sürecinin en değerli ama en çok atlanan adımlarından biri. "Hızlıca mockup'a geçelim" derken, yapısal sorunlar göz ardı edilir. Sonra her şeyi baştan yapmak zorunda kalırsın.

Bu yazıda wireframe'in ne olduğunu, neden önemli olduğunu ve nasıl çizileceğini öğreneceksin.

---

Wireframe Ne Demek?

"Wire" (tel) + "Frame" (çerçeve) = Tel çerçeve.

Wireframe, tasarımın iskeletidir. Tıpkı bir binanın çelik konstrüksiyonu gibi. Üzerine duvar, boya, dekorasyon (yani UI) sonra gelir.

---

Wireframe Neye Benzer?

Tipik bir wireframe şu özelliklere sahiptir:

• Gri tonları: Siyah, beyaz ve gri. Renk yok.
• Placeholder içerik: "Lorem ipsum" metinler, "Image" yazan kutular
• Basit şekiller: Dikdörtgenler, çizgiler, basit ikonlar
• Görsel detay yok: Gölge, gradient, efekt yok
• Net etiketler: Her alanın ne olduğu yazılı

[COMPARISON] Wireframe'de olan:

• İçerik blokları ve yerleşimi
• Navigasyon yapısı
• Buton konumları
• Metin hiyerarşisi (başlık, alt başlık, body)
• Temel akış

Wireframe'de olmayan:

• Gerçek renkler
• Son tipografi
• Gerçek görseller
• Detaylı ikonlar
• Animasyonlar [/COMPARISON]

---

Neden Wireframe Çizilir?

1. Hızlı iterasyon

Wireframe çizmek hızlıdır. Mockup yapmak saatler alırken, wireframe dakikalar alır. Yanlış bir fikri wireframe'de görmek, mockup'ta görmekten çok daha ucuz.

2. Yapıya odaklanma

Renkler ve görseller dikkat dağıtır. "Bu mavi çok koyu" tartışması yerine, "Bu buton burada mı olmalı?" tartışması yaparsın.

3. Erken geri bildirim

Stakeholder'lara wireframe göstermek, erken feedback almayı sağlar. Yanlış yönde ilerlemeden önce düzeltme şansı verir.

4. Ekip hizalaması

Wireframe, herkesin aynı sayfada olduğundan emin olmanı sağlar. Developer, PM, tasarımcı - herkes yapıyı görür.

5. Kullanılabilirlik testi

Wireframe'lerle bile kullanılabilirlik testi yapabilirsin. Görsel tasarım olmadan akışı test edebilirsin.

---

Wireframe Tipleri

Wireframe'ler sadakat seviyesine (fidelity) göre ayrılır:

Low-Fidelity (Düşük Sadakat)

En basit hali. Kalem kağıtla bile çizilebilir.

Özellikleri:

• Çok hızlı (dakikalar)
• Çok kaba
• Elle çizim veya basit kutular
• Beyin fırtınası ve ilk fikirler için

Mid-Fidelity (Orta Sadakat)

En yaygın kullanılan tip. Dijital araçlarla çizilir.

Özellikleri:

• Orta hızda (saatler)
• Net yapı ve yerleşim
• Placeholder içerik
• Ekip paylaşımı ve geri bildirim için

High-Fidelity (Yüksek Sadakat)

Wireframe'den çok "grayscale mockup"a yakın.

Özellikleri:

• Daha uzun süre
• Gerçek içerik
• Detaylı yerleşim
• Kullanılabilirlik testi için

[TABLE] | Tip | Hız | Detay | Kullanım | |-----|-----|-------|----------| | Low-fi | Dakikalar | Çok düşük | Beyin fırtınası, ilk fikirler | | Mid-fi | Saatler | Orta | Ekip paylaşımı, feedback | | High-fi | Günler | Yüksek | Test, dokümantasyon | [/TABLE]

---

Wireframe Nasıl Çizilir?

Adım Adım Süreç

Temel Layout Kalıpları

Tek Kolon: Mobil için ideal. İçerik yukarıdan aşağı akar. [Header] [Hero] [Content Block] [Content Block] [CTA] [Footer]

İki Kolon: Desktop için yaygın. Ana içerik + sidebar. [Header ] [Sidebar] [Main Content ] [Footer ]

Grid: Ürün listeleri, portfolyo, galeri için. [Header ] [Card][Card][Card] [Card][Card][Card] [Footer ]

---

Wireframe Elementleri

Wireframe'lerde kullanılan standart element gösterimleri:

Metin

[████████████████] → Başlık [████████████] → Alt başlık [████ ████ ████ ████] → Paragraf (çizgiler)

Görsel

┌─────────────┐ │ ✕ │ → Placeholder görsel │ IMAGE │ └─────────────┘

Buton

[ Buton Text ] → Primary buton [ Buton Text ] → Secondary buton (border only)

Input

Label ┌─────────────────┐ │ Placeholder... │ └─────────────────┘

Navigation

[Logo] Link Link Link [CTA]

Kart

┌─────────────────┐ │ IMAGE │ ├─────────────────┤ │ Başlık │ │ Açıklama text │ │ [Buton] │ └─────────────────┘

---

Wireframe Araçları

Analog (Kalem + Kağıt)

Avantajları:

• Sıfır maliyet
• Anında başlama
• Tam özgürlük
• Hiçbir öğrenme eğrisi yok

Dezavantajları:

• Paylaşımı zor
• Düzenleme zahmetli
• Arşivleme sorunu

Ne zaman kullan: Beyin fırtınası, ilk eskizler, whiteboard çalışmaları

Dijital Araçlar

[TABLE] | Araç | Ücretsiz | En İyi Yön | Platform | |------|----------|------------|----------| | Figma | ✓ | Her şey bir arada | Web, Desktop | | Balsamiq | ✗ | Sketch tarzı, hızlı | Web, Desktop | | Whimsical | Kısmen | Basitlik, hız | Web | | Miro | Kısmen | İş birliği, whiteboard | Web | | Sketch | ✗ | macOS için güçlü | macOS | | Adobe XD | Kısmen | Adobe ekosistemi | Desktop | [/TABLE]

---

Wireframe vs Diğerleri

Wireframe vs Sketch

| Sketch | Wireframe | |--------|-----------| | Kalem kağıt, çok hızlı | Dijital, biraz daha yavaş | | Çok kaba | Daha düzenli | | Kişisel kullanım | Ekip paylaşımı |

Wireframe vs Mockup

[COMPARISON] Wireframe:

• Düşük sadakat
• Yapı odaklı
• Gri tonları
• Hızlı iterasyon
• "Ne nerede?"

Mockup:

• Yüksek sadakat
• Görsel odaklı
• Gerçek renkler, fontlar
• Detaylı çalışma
• "Nasıl görünecek?" [/COMPARISON]

Wireframe vs Prototype

| Wireframe | Prototype | |-----------|-----------| | Statik | Etkileşimli | | Görüntü | Deneyim | | "Böyle görünecek" | "Böyle çalışacak" |

---

Sık Yapılan Hatalar

1. Çok erken detaya girmek

2. Wireframe'i atlamak

"Hemen mockup yapalım" düşüncesi. Yapısal hatalar mockup'ta düzeltmek 5x daha uzun sürer.

3. Renk ve görsel eklemek

Wireframe'de renk kullanmak, odağı dağıtır. Gri tonlarında kal.

4. Gerçek içerik koymamak

"Lorem ipsum" her yerde olunca, içerik uzunlukları anlaşılmaz. Mümkünse gerçekçi içerik kullan.

5. Tek versiyon çizmek

6. Mobili unutmak

Desktop wireframe çizip, mobili "sonra hallederiz" demek. Responsive düşünceyi baştan kur.

---

Wireframe Checklist

Wireframe'ini paylaşmadan önce kontrol et:

---

Ne Zaman Wireframe Atlanabilir?

Her projede wireframe şart değil. Atlayabileceğin durumlar:

• Çok küçük değişiklikler (buton rengi, metin değişikliği)
• Mevcut design system'dan direkt uygulama
• Daha önce yapılmış benzer sayfa
• Çok sıkı deadline ve validate edilmiş konsept

---

Wireframe Sunumu

Wireframe'i stakeholder'lara sunarken dikkat et:

Yapılması gerekenler:

• Bağlamı anlat: "Bu sayfa şu amaçla tasarlandı"
• Akışı göster: "Kullanıcı buradan buraya gidiyor"
• Feedback iste: "Yapı hakkında ne düşünüyorsunuz?"
• Görsel olmadığını vurgula: "Bu final tasarım değil"

Yapılmaması gerekenler:

• Renk/font tartışmasına girme
• Her detayı açıklama
• Tek seçenek sunma
• Feedback olmadan geçme

---

---

---

İlgili İçerikler

Önceki: UX ve UI Arasındaki Fark

Sonraki: Prototype Nedir?

İlgili konular:

• User Flow ve Task Flow
• Wireframe vs Mockup vs Prototype (yakında)

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

---

Kaynaklar

Derinleşmek istersen:

• Wireframing - Usability.gov (İngilizce, 6 dk)
• What is a Wireframe? - IxDF (İngilizce, 8 dk)
• The Guide to Wireframing - UXPin (İngilizce, 10 dk)