İçeriğe geç
parazade

Wireframe Nedir?

Yayın: · Son güncelleme:

Wireframe Nedir? Kısaca

Wireframe, bir web sayfasının ya da uygulama ekranının renk, görsel ve ayrıntı içermeden yalnızca yerleşim, içerik blokları ve gezinme yapısıyla çizildiği basit iskelet taslağıdır.

Wireframe nedir?
İçindekiler
  1. Wireframe nedir?
  2. Wireframe, mockup ve prototip farkı
  3. Nasıl hazırlanır?

Wireframe nedir?

Wireframe, Türkçede tel kafes ya da ekran iskeleti olarak karşılanır. Bir ekranın hangi bölümlerden oluşacağını, menünün, butonların ve metinlerin nerede duracağını gösterir. Renk, yazı tipi ve fotoğraf kullanılmaz; görseller yerine çarpı işaretli kutular, metinler yerine çizgiler bulunur.

Bu sadelik bilinçlidir. Ekip renk tartışmasına girmeden önce "bilgiler doğru sırada mı?" sorusuna odaklanır.

Wireframe, mockup ve prototip farkı

Üç kavram tasarım sürecinin farklı aşamalarını anlatır:

  • Wireframe: Yerleşim iskeleti, siyah beyaz ve statik.
  • Mockup: Renk, yazı tipi ve görsellerle son görünüme yakın, ama tıklanamaz.
  • Prototip: Tıklanabilir, ekranlar arası geçiş yapılabilen model.

Süreç genellikle bu sırayla ilerler, ancak küçük projelerde bazı adımlar birleştirilebilir.

Nasıl hazırlanır?

İlk adım, sayfanın amacını belirlemektir. Bir ürün detay sayfası için amaç "kullanıcı ürünü sepete eklesin" olabilir. Ardından sayfada bulunması gereken içerikler listelenir: ürün görseli, ad, fiyat, beden seçimi, sepete ekle butonu ve yorumlar.

Sonra bu öğeler önem sırasına göre yerleştirilir. Mobil ekranda fiyatın ve butonun ilk bakışta, kaydırmadan görünmesi gerekir. Kâğıda çizilen ilk taslak birkaç dakika sürer; ekip üzerinde anlaşınca Figma, Balsamiq ya da Whimsical gibi bir araçta temize çekilir.

Sık yapılan hata, wireframe aşamasında ayrıntıya fazla girmektir. Bu aşamada piksel hassasiyetine gerek yoktur. Bir sonraki tasarımınızda önce üç farklı yerleşimi hızlıca çizip ekibinizle karşılaştırmayı deneyin.

Sıkça Sorulan Sorular

Wireframe ne demek?

Wireframe, tel kafes anlamına gelir. Tasarımda bir ekranın renk ve ayrıntı olmadan yalnızca yerleşimini gösteren iskelet çizimini ifade eder.

Wireframe çizmek için hangi araçlar kullanılır?

Figma, Balsamiq, Whimsical ve Miro yaygın araçlardır. Fikir aşamasında kâğıt ve kalem de en hızlı yöntemlerden biridir.

İlgili terimler