Tasarımın en pahalı kısmı, müşterinin kafasındakini bilemediğinizde başlar. Wireframe ve prototip, bu maliyeti dakikalar — değil saatler — içinde sıfıra indirir. Renk yok, görsel yok; sadece blok düzeni, mantık ve akış.
Wireframe nedir?
Bir sayfanın iskeletini gösteren düşük çözünürlüklü taslak. Renkler grilik, fontlar nötr, görseller "Görsel buraya" notu. Tek amaç: hangi blok nerede olacak, hangi ekran neyi gösterecek?
Prototip nedir?
Wireframe'lerin tıklanabilir hâli. Kullanıcı bir butona bastığında hangi sayfaya geçeceği, hangi animasyonun olacağı, hangi state'lerin değişeceği gösterilir. Müşteri "buton işliyormuş gibi" deneyim yaşar.
Neden wireframe atlayıp doğrudan tasarıma geçmek pahalıdır?
Yüksek çözünürlüklü Figma tasarımında bir sayfayı yeniden düzenlemek 4–6 saat sürer. Wireframe'de aynı değişiklik 15 dakika. Müşteri 3. revizyonda "Hizmetleri sayfanın altına alalım" derse, wireframe'de bunu hızlıca yaparsınız; tasarım aşamasında günler kaybedersiniz.
İyi bir wireframe nasıl olur?
- Sadece gri tonlar — renk dikkati dağıtır.
- Tek font (Inter, Helvetica, Roboto gibi sade sans-serif).
- Blok hiyerarşisi net — başlık büyük, alt başlık orta, body küçük.
- Görseller boş kutu + "Görsel: ürün fotoğrafı" notu.
- İçerik tüm bloklarda lorem ipsum değil, gerçek metinle (en azından üst bölümler).
- Mobile + desktop ayrı çizilir.
Hangi araçlar?
- Figma
- En popüler. Wireframe + prototip + tasarım hep birlikte.
- Sketch
- macOS özel. Eskiden popülerdi, Figma'ya alan kaybetti.
- Adobe XD
- 2023'te durdurulduğu duyuruldu, artık kullanılmıyor.
- Whimsical, Balsamiq
- Hızlı low-fi wireframe için. Kaba estetik bilinçli.
- Pen + kağıt
- İlk taslak için hâlâ en hızlı yöntem.
Prototip etkileşim mantığı
Figma'da prototip oluştururken her butonu hedef sayfasına bağlar, geçiş animasyonunu seçer (instant, dissolve, slide). Mikro-etkileşim (hover, focus, error) için varyant kullanırsınız. Müşteri Figma linki ile mobilde test eder; gerçek dokunma deneyimi yaşar.
Onay döngüsü — sağlıklı süreç
- 01Wireframe taslağı hazırlanır (1–2 gün).
- 02Müşteri ile 45 dakika ekran paylaşımı görüşmesi — wireframe'leri birlikte gözden geçirilir.
- 03Geri bildirimle revizyon (1 gün).
- 04Onaylı wireframe'den prototipe geçilir (1–2 gün).
- 05Prototip ile ikinci sunum — akış doğru mu?
- 06Onay alındıktan sonra yüksek çözünürlüklü tasarıma geçilir.
Şunu yapmayın: müşteriye e-postayla göndermek
E-posta ekiyle wireframe gönderilince müşteri 3 gün sonra "Şöyle olsa daha iyi olur" listesi gönderir, siz neyin neyi etkilediğini anlatmaya bir hafta harcarsınız. Görüşme yaparsanız 1 saatte tüm konular netleşir.
NotProfesyonel wireframe + prototip + tasarım süreci için: +90 537 729 40 97 (WhatsApp). Tüm projelerimizde wireframe → prototip → tasarım hattını uyguluyoruz.