Wireframe Nedir?
Wireframe, bir sayfanın 'low-fidelity' iskelet tasarımı — sadece layout + content yapısı, renk/font/foto yok. Müşteri + tasarımcı + geliştirici arası ilk hizalanma aracı. Figma, Whimsical, Balsamiq en yaygın araçlar. Tipik proje akışında 'keşif sonrası, tasarım öncesi' aşamada üretiliyor.
Wireframe çeşitleri: 1. Low-fidelity (lo-fi) — kalem-kağıt eskizi, gri kutular, placeholder metinler. 5-15 dakikada üretiliyor. 2. Mid-fidelity — Figma'da basit elementler, gerçek metin, ikonlar. 30 dakika - 2 saat. 3. High-fidelity — neredeyse tasarım kalitesinde, renkler + tipografi dahil. Wireframe'den 'mockup'a geçiş.
Wireframe ne için kullanılır: 1. Stakeholder hizalanması — 'bu sayfada ne olacak' netleştirme 2. Content audit — hangi metin/foto/CTA'lar gerekli, eksikler tespit 3. UX flow — kullanıcı yolculuğu (login → onboarding → ana feature → conversion) 4. Geliştirme estimate — kaç sayfa, hangi modüller 5. A/B test variant'ları — 3 farklı layout, hangisi conversion'u artırıyor
Wireframe vs Mockup vs Prototype: - Wireframe — sadece yapı (gri box'lar) - Mockup — gerçek tasarım (renk, font, foto) - Prototype — interactive (clickable, transitions)
DevPixel'in proje akışı: Hafta 1 = keşif + content brief; Hafta 2 = wireframe (3-5 ana sayfa için); Hafta 3 = mockup; Hafta 4 = prototype + revision; Hafta 5+ = geliştirme. Wireframe aşaması 1-2 günde tamamlanıyor; bu kısa süre içinde 80-90% layout kararları veriliyor, sonraki aşamalar 'detaylandırma' oluyor.
DevPixel'in wireframe yaklaşımı: Figma'da mid-fidelity wireframe, müşteri onayı sonrası mockup'a geçiş. 50+ projemizde wireframe aşaması ortalama 2 gün — bu yatırım sonraki development sürecini 1-2 hafta kısaltıyor. Müşteri 'ben bu layout'u beğendim' kararını mockup beklemeden veriyor.