Wireframe (Tel Kafes) Nedir?
Kısa tanım
Wireframe, bir sayfanın ya da ekranın yapısını gösteren, genellikle gri tonlarda hazırlanmış sade bir taslaktır: içerik, menü ve aksiyonların nerede ve hangi öncelikte yer alacağını gösterir, ancak nihai renk, görsel ve stil içermez. Ekipler wireframe'i projenin başında, görsel tasarıma ve koda yatırım yapmadan önce yerleşim ve içerik hiyerarşisi üzerinde anlaşmak için kullanır.
Diğer adları: tel kafes çizim, sayfa iskeleti, wireframing
Wireframe'de ne olur, ne olmaz?
Wireframe'in amacı tartışmayı doğru yere çekmektir. Renkler ve fotoğraflar ortada olmadığında ekip, "bu mavi mi olmalı?" yerine "kullanıcı bu sayfada önce neyi görmeli?" sorusuna odaklanır.
- Olanlar: Bölümlerin sırası ve büyüklüğü, menü yapısı, başlık seviyeleri, ana aksiyon butonları, form alanları, görsel ve video için yer tutucular, gerektiğinde davranışı anlatan notlar.
- Bilerek olmayanlar: Marka renkleri, nihai yazı tipleri, fotoğraflar, ikon detayları, gölge ve animasyonlar.
Örnek: bir hizmet sayfasının iskeleti
Wireframe kâğıt üzerinde, bir tasarım aracında ya da düz metinle bile çizilebilir. Aşağıdaki iskelet, bir hizmet sayfasının yapısını renk ve görsel olmadan gösteriyor:
+--------------------------------------------+
| Logo Hizmetler Hakkımızda [İletişim] |
+--------------------------------------------+
| H1: Hizmetin adı |
| Tek cümlelik değer önerisi |
| [Teklif iste] |
+--------------------------------------------+
| Fayda 1 | Fayda 2 | Fayda 3 |
+--------------------------------------------+
| Süreç: 1 - 2 - 3 - 4 |
+--------------------------------------------+
| Sık sorulan sorular (açılır liste) |
+--------------------------------------------+
| Alt bilgi: adres, bağlantılar |
+--------------------------------------------+Bu kadarlık bir çizim bile önemli kararları ortaya koyar: sayfada tek bir H1 olacak ve başlık yapısı bölümlere göre kurulacak, ana aksiyon ekranın üst kısmında görünecek, SSS bölümü en sona kalacak.
Wireframe, mockup ve prototip
| Ne gösterir? | Etkileşim | Görsel detay | |
|---|---|---|---|
| Wireframe | Yapı ve öncelik | Yok ya da çok sınırlı | Düşük |
| Mockup | Nihai görünüm | Yok (statik) | Yüksek |
| Prototip | Akış ve davranış | Var (tıklanabilir) | Düşükten yükseğe |
Düşük ve yüksek sadakatli prototipler
Düşük sadakatli (low-fidelity) prototipler, kâğıt çizimler ya da birbirine bağlanmış gri wireframe ekranlarıdır. Hazırlaması ucuzdur ve akışı test etmek için idealdir: kullanıcı doğru adıma ulaşabiliyor mu, bir şey eksik mi? Yüksek sadakatli (high-fidelity) prototipler ise gerçek görsellere, metinlere ve etkileşimlere yakındır; mikro etkileşimleri denemek, paydaş onayı almak ve geliştiricilere net bir referans vermek için kullanılır. Yüksek sadakat erken devreye girerse geri bildirim kolayca renklere ve görsellere kayar, yapısal sorunlar gözden kaçar.
Daha işe yarar wireframe için
- Mümkün olduğunca gerçek içerikle çalışın. Lorem ipsum, başlığın iki satıra taşacağını ya da bir paragrafın gereğinden uzun olduğunu gizler.
- Önce dar ekran için çizin; telefonda sıralamayı belirlemek, geniş ekranda neyin yan yana duracağını da netleştirir. Bu, responsive tasarım kararlarının erken alınmasını sağlar.
- Davranışları not edin: bu buton ne yapar, form hata verirse ne görünür, liste boşsa ne gösterilir?
- Wireframe'i kasıtlı olarak sade tutun; çok cilalı bir taslak, değiştirilmesi zor bir "bitmiş iş" gibi algılanır.
- Ekip bir tasarım sistemi kullanıyorsa, wireframe'de de o sistemin bileşenlerini temsil eden kutuları kullanın; sonraki aşamada sürpriz azalır.
Wireframe, UX sürecinin en ucuz deneme alanıdır: bir kutuyu taşımak birkaç saniye sürer, yayındaki bir sayfayı yeniden kurmak ise günler.