--- title: "Wireframe nedir?" author: Androverse author_url: https://androverse.com.tr/yazar/androverse publisher: Androverse updated_at: 2026-10-15 url: https://androverse.com.tr/sozluk/wireframe language: tr --- # Wireframe nedir? Wireframe, bir ekranın içerik ve işlev yerleşimini görsel ayrıntıları geri planda tutarak gösteren iskelet tasarımdır. Diğer adlar: İskelet tasarım. ## Nerede işine yarar? Başlık, ana işlem, yardımcı bilgi ve gezinme öğelerinin önceliği tartışılır. Gerçek içerik uzunlukları kullanılmazsa final tasarımda yerleşim yeniden bozulabilir. Wireframe, yapı kararını erkenden görünür kılar; nihai görsel dilin tamamını tarif etmez. ## Bir cümlede uygulaması Bir hizmet detayında önce tanım, ardından süreç, teslimler ve iletişim adımını kabaca yerleştirmek. ## Neyle karıştırılmamalı? Wireframe ekran yapısını; prototip bu ekranlar arasındaki davranışı sınamak için kullanılır. ## Renkleri seçmeden önce yerini bulalım Bir hizmet detay sayfası hazırlanıyor. Başlık, kısa açıklama, örnek çalışma, teslim kapsamı ve görüşme çağrısı var; fakat bunların hangi sırada gelmesi gerektiği henüz kararlaştırılmadı. Wireframe, bu yerleşim ve öncelik sorularını görsel kimliğin bütün ayrıntılarına girmeden tartışmayı sağlar. Basit çizgiler kullanabilir, ama basit düşünce anlamına gelmez. Ekranın ne anlattığını açıkça göstermesi gerekir. Örnek bir taslakta uzun hizmet açıklamasını en üste koyduğumuzu düşünelim. Ziyaretçi ne üretildiğini görmek için çok aşağıya inmek zorunda kalıyorsa içerik sırasını değiştiririz. Bir çalışma örneği ilk açıklamanın yanına gelebilir, teslimler daha sonra ayrıntılanabilir. Bu karar bir renk revizesi değildir. Bilginin ne zaman gerekli olduğunu ve sayfanın ritmini ilgilendirir; wireframe bunu erken konuşmak için kullanılabilir. Yalnız gri kutular ve anlamsız metinlerle hazırlanmış taslak önemli sorunları saklayabilir. Gerçek başlık uzunluğu, görselin oranı ve açıklamanın miktarı yerleşimi değiştirir. Bu nedenle yeterince gerçek içerikle çalışmak gerekir. Wireframe’in düşük görsel ayrıntısı, içerik belirsizliğini mazur göstermez. Amaç sonunda nasıl parlayacağını değil, şu anda nasıl anlaşılacağını ortaya koymaktır. Wireframe sunumunda notların tasarımın hangi kısmına ait olduğunu açıklaştır. Bir katılımcı üst bölümün çok boş olduğunu söylerken görselin henüz yer tutucu olduğunu bilmiyor olabilir. Başka biri final metin sanarak taslak ifadeyi tartışabilir. Görüşmenin başında değerlendirilecek kararları ve henüz açık olan ayrıntıları belirtmek, geri bildirimi daha kullanışlı hale getirir. Ancak bu açıklama her eleştiriyi ertelemek için kullanılmamalıdır. Yapısal bir sorun ortaya çıktıysa erken aşamada görülmesi çalışmanın değeridir; taslağın amacı zaten daha pahalı üretim başlamadan bu soruları yakalamaktır. İki yerleşim alternatifi hazırlanacaksa her birinin hangi varsayımı taşıdığını yaz. Birinde örnek proje erken gelirken diğerinde kapsam açıklaması önce gelebilir. Hangisinin daha güzel göründüğünden önce hangi ziyaretçi ihtiyacını karşılamaya çalıştıklarını konuş. Alternatifleri yalnız sütun sayısıyla farklılaştırmak yerine bilgi sırasının etkisini düşün. Karar verildiğinde nedenini kaydet; sonraki içerik değişikliğinde aynı düzenin hâlâ uygun olup olmadığını bu gerekçeyle değerlendirebilirsin. Wireframe böylece tek kullanımlık gri çizim olmaktan çıkar, tasarımın düşüncesini açıklayan kısa bir belgeye dönüşür. Görsel aşamada da bu çerçeveye geri dönülebilir. ### İçerik önceliği Her bloğun hangi soruya cevap verdiğini not et. Açılış, örnek, kapsam ve çağrı aynı görevi yapmaz. Ziyaretçi bir sonraki kararı verebilmek için hangi bilgiye ihtiyaç duyuyorsa ona doğru zamanda yer aç. Sayfayı yalnız hazır bir şablon sırasına uydurma. ### Yerleşim ilişkisi Birbirine ait bilgileri birlikte konumlandır. Etiketin alanından, açıklamanın görselinden veya ana eylemin ilgili bağlamından kopması anlamı zayıflatır. Wireframe’de bu yakınlıkları görmek, sonradan yalnız boşluk değerleriyle çözülmeye çalışılan temel düzen sorunlarını erken ortaya çıkarır. ### Dar ekran İki sütun tek sütuna geçtiğinde okuma sırasının nasıl değişeceğini düşün. Masaüstünde yan yana duran bir görselin mobilde açıklamadan önce mi sonra mı geleceği içerik kararıdır. Taslağı küçültmek yerine önceliği koruyan yeni yerleşimi çiz ve gerçek başlıklarla incele. ## Wireframe, mockup ve prototip ### Yerleşim taslağı Wireframe bilginin düzenini, ekran bölümlerini ve temel eylemleri öne çıkarır. Görsel kimlik ayrıntıları sınırlı tutulabilir. Bu tercih, ekipte renk ve süs tartışması başlamadan önce yapısal kararların görülmesini sağlar. Ancak wireframe her zaman yalnız siyah beyaz çizgi demek değildir; ayrıntı seviyesi cevaplanacak soruya göre belirlenir. ### Görünüm ve davranış Mockup tasarımın görsel ifadesini daha ayrıntılı gösterir; prototip ise etkileşimi veya akışı denemeyi sağlar. Aynı çalışma bazen bu amaçların birkaçını taşıyabilir. İsimlerden çok hangi kararın değerlendirileceği önemlidir. Görsel olarak bitmiş bir ekranın kullanıcı akışını sınamadığını, tıklanabilir bir taslağın da final görünümü temsil etmek zorunda olmadığını unutma. ## Görsel ayrıntıdan önce yerleşim Wireframe'in amacı renk ve yüzey beğenisini tartışmak yerine içeriğin sırasını değerlendirmektir. Başlıklar gerçek metne yakın olmalı, ana görevler anlaşılmalıdır. Aşırı soyut kutular yanlış bir güven yaratabilir; gerçek içerik geldiğinde düzenin bozulup bozulmayacağı da denenir. - Her ekranın birincil görevini göster. - Metin uzunluğunu ve içerik önceliğini gerçekçi tut. - Mobilde değişecek sıralamayı ayrıca düşün. ## Wireframe ile prototip farklı mı? Wireframe ağırlıkla yapıyı gösterir; prototip bir davranışın denenmesini sağlar. Basit bir wireframe tıklanabilir hale getirilebilir. Dolayısıyla ayrım dosyanın ne kadar süslü olduğundan çok hangi soruyu yanıtladığıyla ilgilidir. ## Bu karar, işinin neresinde? Wireframe kavramının bir projede nasıl ele alındığını; yaklaşım, süreç ve teslimler üzerinden incele. [Mobil uygulama](https://androverse.com.tr/hizmetler/mobil-uygulama-tasarim) ## Karar masası ### Her projede wireframe gerekli mi? Kapsamı ve belirsizliği değerlendirmek gerekir. Mevcut sistemde küçük bir içerik değişikliği için ayrı bir wireframe aşaması gerekmeyebilir. Yeni bir akış, karmaşık içerik veya paydaşların farklı beklentileri varsa basit bir yerleşim taslağı ortak dili hızlandırabilir. Süreci belge üretmek için büyütme; hangi soruyu daha erken ve daha düşük maliyetle cevaplayacağını belirle. Yöntemin değeri bu soruya hizmet etmesidir. ### Wireframe’e gerçek metin koymak neden önemli? Metnin uzunluğu ve anlamı düzenin parçasıdır. Kısa bir yer tutucu, gerçek hizmet adının iki satıra çıktığını veya açıklamanın daha fazla bağlam gerektirdiğini göstermez. Bütün içerik hazır değilse temsil edici gerçek örnekler seç ve belirsiz alanları işaretle. Böylece sonraki aşamada tasarımın metne uymaması sürpriz olmaz. İçeriği sonradan kutulara sığdırmak yerine, kutuların içeriğe neden ihtiyaç duyduğunu birlikte düşün. ### Wireframe onayı hangi kararı kapatır? Genellikle bilgi sırası, temel bölümler ve ana eylemler üzerinde ortaklaşmayı hedefler. Bu onay, bütün etkileşimlerin ve görsel ayrıntıların tamamlandığı anlamına gelmez. Sunumda hangi konuların değerlendirileceğini açık söyle. Bir sonraki aşamada yeni bilgi nedeniyle yapı değişebilir; değişikliğin nedeni ve etkisi kaydedilmelidir. Onay sürecini keşfi yasaklayan bir mühür yerine, o anda paylaşılan kararların görünür kaydı olarak kullan. ## Gri kutuya bir soru ver Yeni hazırladığın bir sayfayı seç. Her bölümü bir kutuyla temsil et, fakat kutunun içine yalnız içerik adını değil, ziyaretçinin hangi sorusuna cevap verdiğini yaz. Görsel ayrıntıya geçmeden sayfanın düşüncesini incele. - [ ] Sayfanın ana görevini tanımla ve ilk ekranda gerekli bilgiyi ayır. Bütün içeriğin üstte bulunması gerekmez; kullanıcının doğru yerde olduğunu ve devamında ne bulacağını anlaması gerekir. Açılışın gereksiz tekrarlarla dolup dolmadığını gerçek cümlelerle kontrol et. - [ ] Bölümleri beklenen okuma sırasına yerleştir. Bir iddia gösteriyorsan kanıtının nerede olduğunu, bir eylem istiyorsan karar için gerekli bilginin öncesinde bulunup bulunmadığını sor. CTA’yı sadece boş yere koyma; hangi düşüncenin doğal devamı olduğunu belirt. - [ ] Taslağı dar bir sütunda yeniden kur. Görsel, başlık ve açıklama sırasının anlaşılır kaldığından emin olmak için içerikleri sırayla oku. İki sütunun birleşmesiyle aynı bilgi tekrar ediyorsa yalnız aralıkları değil, bölümün yapısını da yeniden düşün. - [ ] Taslağı başka birine kısa bir görevle anlatmadan göster. Neyi nerede aradığını dinle. Tasarımın henüz görsel olarak bitmediğini ve hangi kararı konuştuğunu baştan belirt. Böylece geri bildirim renk veya font tercihlerine sapmadan asıl yapıyı değerlendirebilir. Wireframe, tasarımı süsten arındırılmış bir dosyaya indirgemek değildir. İçerik ve karar sırasını erken görünür kılan bir düşünme aracıdır. Doğru soru için kullanıldığında sonraki görsel çalışma daha sağlam başlar. ## Bağlantılı kavramlar - [Prototip](https://androverse.com.tr/sozluk/prototip) — Prototip, bir ürün fikrinin akışını veya etkileşimini gerçek ürün tamamlanmadan denemeye yarayan temsildir. - [Görsel hiyerarşi](https://androverse.com.tr/sozluk/gorsel-hiyerarsi) — Görsel hiyerarşi, içerikte neyin önce ve neyin sonra fark edilmesi gerektiğini ölçek, renk, boşluk ve konumla düzenlemektir. - [Kullanıcı akışı](https://androverse.com.tr/sozluk/kullanici-akisi) — Kullanıcı akışı, bir kişinin belirli bir hedefe ulaşmak için ürün içinde geçtiği adımlar ve karar noktalarıdır. ## Konuyu uygulamaya taşı - [Mobil uygulama](https://androverse.com.tr/hizmetler/mobil-uygulama-tasarim) — Wireframe kavramının bir projede nasıl ele alındığını; yaklaşım, süreç ve teslimler üzerinden incele. - [“Biraz daha wow” kaç piksel?](https://androverse.com.tr/blog/biraz-daha-wow-kac-piksel) — Wireframe ile ilgili tasarım kararını Androverse’nin uygulama örnekleri ve değerlendirme sorularıyla birlikte düşün. ## Kaynaklar - [Nielsen Norman Group — Görsel tasarım sözlüğü](https://www.nngroup.com/articles/visual-design-cheat-sheet/) [Androverse profili](https://androverse.com.tr/yazar/androverse) · [Yayın ilkeleri](https://androverse.com.tr/yayin-ilkeleri)