Wireframe Nedir, Tasarıma Neden Çizimle Başlanıyor?

---

Bir siteye başlarken renk ve font seçmek cazip görünüyor. Oysa deneyimli ekipler işe gri kutulardan oluşan basit çizimlerle başlıyor: hangi bilgi nerede duracak, kullanıcı hangi yolu izleyecek, hangi alan sayfanın merkezinde olacak.

Bu yazı wireframe'in ne olduğunu, hangi kararların bu aşamada verildiğini, çizim aşamasında düşünülmezse sonradan pahalıya patlayan başlıkları ve düzenin okunabilirlikle ilişkisini araç üreticisinin belgesine ve W3C'nin tasarım rehberine bakarak topluyor.

Wireframe ne demek?​

Figma'nın tanıtım sayfası, wireframe'i düşük çözünürlüklü maketlerle birlikte anıyor ve bunları fikirleri görsel olarak ifade etmenin yolu olarak konumlandırıyor.

Sayfa, çizim araçlarının ürün fikirlerini hızlıca taslağa dökmek, gereksinimleri görsel olarak not almak ve maket üretmek için kullanıldığını belirtiyor. Yani wireframe bitmiş bir tasarım değil, karar almak için üretilen bir ara ürün.

Bu aşamada ne kararlaştırılıyor?​

Düşük çözünürlüklü çizimde renk ve tipografi henüz gündemde değil. Karara bağlanan şeyler yerleşim, hiyerarşi ve akış: hangi bilginin önce görüneceği, hangi eylemin nerede duracağı ve sayfalar arasında nasıl gezinileceği.

• Yerleşim: Bilgi bloklarının sayfadaki yeri ve sırası.
• Hiyerarşi: Neyin öne çıkacağı, neyin geride kalacağı.
• Akış: Kullanıcının bir adımdan diğerine nasıl geçeceği.

Erken verilmesi gereken kararlar​

W3C'nin tasarım için başlangıç ipuçları sayfası, arayüz ve görsel tasarımda erken düşünülmesi gereken başlıkları sıralıyor ve bunların çoğu doğrudan wireframe aşamasına denk geliyor.

Sayfa, sitede birden fazla gezinme yöntemi sunulmasını öneriyor; örnek olarak site içi arama ve site haritası veriliyor. Bu, çizim aşamasında yer ayrılması gereken bir karar.

Form tarafında da net bir kural var: tüm alanların, alanın yanında yer alan açıklayıcı bir etiketi olması gerekiyor. Etiketin nereye konacağı da düzen kararı.

Püf nokta' Alıntı:

Wireframe'de yer ayırmadığınız her öge, sonradan tasarımı bozarak eklenir.

Genişletmek için tıkla ...

Boşluk ve okunabilirlik​

Aynı sayfa, içerik arasındaki ilişkileri belirginleştirmek için boşluk ve yakınlığın kullanılmasını öneriyor. Yani hangi ögenin hangisine ait olduğunu, aralarındaki mesafe anlatıyor.

Bir başka öneri metinle ilgili: metin boyutunun ve satır genişliğinin okunabilirliği en üst düzeye çıkaracak biçimde ayarlanması gerekiyor. Satır genişliği doğrudan sütun genişliğine bağlı olduğu için bu da bir yerleşim kararı.

Sayfa ayrıca tasarımda görseller ve medya için alternatiflere yer ayrılmasını öneriyor. Alternatif metnin nereye sığacağını düşünmek, çizim aşamasında yapılırsa maliyetsiz oluyor.

Tasarım sürecinin bütününe toplu bakmak isteyenler için web tasarım yazımız başlangıç noktası olabilir.

Karşıtlık kararı da burada başlıyor​

W3C'nin sayfası, ön plandaki metnin arka plan renkleriyle yeterli karşıtlığa sahip olması gerektiğini söylüyor ve bunun görseller üzerindeki metni, arka plan geçişlerini, düğmeleri ve diğer ögeleri kapsadığını belirtiyor.

Wireframe aşamasında renk seçilmiyor olsa da metnin nereye geleceği burada belirleniyor. Görselin üstüne yazı koymaya karar verdiyseniz, karşıtlık sorunu daha çizim aşamasında masaya gelmiş oluyor.

Sayfa bu kuralın logolar ve fotoğrafın içinde tesadüfen bulunan metin gibi ikincil durumlar için geçerli olmadığını da ekliyor.

Neden ucuz bir aşama?​

Wireframe'in en büyük avantajı değiştirme maliyeti. Bir bloğun yerini çizimde değiştirmek dakikalar sürerken, aynı değişiklik kodlanmış bir sayfada saatlere mal olabiliyor.

Bu yüzden tartışmalı kararların çizim aşamasında bitirilmesi öneriliyor: hangi bilgi ilk ekranda görünecek, form kaç adımda tamamlanacak, arama kutusu nerede duracak. Bunların hepsi düzen kararları ve hepsi sonradan değiştirilmesi pahalı olan başlıklar; çizim aşamasında yarım saat, kodlandıktan sonra günler mesele oluyor.

Çizimden sonra ne oluyor?​

Wireframe onaylandığında sıra görsel tasarıma ve ardından geliştirmeye geliyor. Bu geçişte en sık kaybedilen şey, çizimde verilmiş kararların gerekçesi.

Klavyeyle gezinme sırası da bu aşamada belirleniyor; sıralamanın nasıl sınandığını klavye testi yazımızda göstermiştik.

Küçük ama unutulan ögeler de aynı listede: sekmede görünen simgenin doğru boyutlarla eklenmesini favicon yazımızda anlatmıştık.

Sık Sorulan Sorular​

Wireframe nedir?
Renk ve tipografi kararları verilmeden önce yerleşimi, hiyerarşiyi ve akışı belirlemek için üretilen düşük çözünürlüklü çizim.

Neden renk kullanılmıyor?
Amaç görünümü değil düzeni tartışmak; renk kararı bu aşamada dikkati dağıtıyor.

Hangi kararlar bu aşamada veriliyor?
Gezinme yöntemleri, form alanlarının ve etiketlerin yeri, boşluk ilişkileri ve metin genişliği gibi düzen kararları.

Gezinme için tek bir yol yeterli mi?
W3C'nin sayfası birden fazla gezinme yöntemi sunulmasını öneriyor; site içi arama ve site haritası örnek veriliyor.

Form etiketleri nereye konmalı?
Sayfaya göre her alanın, alanın yanında yer alan açıklayıcı bir etiketi olmalı.

Özetle​

Wireframe, tasarımın görünüm kararlarından önce gelen düzen aşaması. Bu aşamada gezinme yolları, form yapısı, boşluk ilişkileri ve metin genişliği gibi kararlar veriliyor; hepsi sonradan değiştirilmesi pahalı olan başlıklar. Renk ve tipografi ise bu çizimin üzerine geliyor.

Son projenizde yerleşimi mi önce çözdünüz, görünümü mü?

Güncelleme: 1 Eylül 2026. Figma yardım merkezinin tanıtım sayfası ve W3C Web Erişilebilirliği Girişimi'nin tasarım ipuçları sayfası kontrol edildi.

---