Wireframe
Wireframe, bir sayfanın renk ve görsel olmadan, sadece kutular, çizgiler ve kaba metinlerle çizilmiş iskeletidir. Hangi bilginin nerede duracağını ve sayfanın hangi sırayla okunacağını gösterir. Tasarıma ve koda geçmeden önce yapının onaylanmasını sağlar.
Wireframe nedir?
Wireframe, bir sayfanın iskelet çizimidir. Türkçede tel kafes çizim de denir. Renk, fotoğraf ya da yazı tipi yoktur. Gri kutular, çizgiler ve kaba başlıklar vardır. Amacı tek bir soruya cevap vermektir: bu sayfada hangi bilgi, hangi sırayla duracak?
Bir örnek verelim. Hizmet sayfanızın wireframe'inde en üstte başlık ve tek cümlelik açıklama, altında üç kutu halinde hizmetler, ardından sık sorulanlar ve en altta teklif formu var. Bu çizime bakınca "Referanslar formun üstünde olmalı" diyorsunuz. Değişiklik birkaç dakikada yapılır. Aynı değişiklik tasarım bittikten sonra istenseydi hem tasarım hem kod yeniden elden geçerdi.
Neden önemli?
Wireframe, tartışmayı doğru yere çeker. Renk ve fotoğraf olmadığı için herkes içeriğe ve sıraya odaklanır. Eksik bir sayfa ya da unutulan bir bilgi bu aşamada görünür. En ucuz değişiklik, çizgi aşamasındaki değişikliktir. Wireframe kâğıda da çizilebilir. Önemli olan araç değil, sıranın ve içeriğin konuşulmasıdır. Biz genellikle tasarım aracında hazırlar ve bir bağlantıyla paylaşırız.
Wireframe onaylanınca sıra renkli ekranlara ve tıklanabilir prototipe gelir. Bir kurumsal sitede hangi sayfaların olması gerektiğini kurumsal sitede olması gereken sayfalar yazısında listeledik. Tasarım sürecimizi web tasarım sayfasında anlattık.
Sık sorulanlar
Wireframe ile prototip arasındaki fark nedir?
Wireframe durağan bir iskelettir ve yapıyı gösterir. Prototip tıklanabilir bir modeldir ve sayfalar arasındaki geçişi, yani akışı gösterir. Genellikle önce wireframe, sonra prototip yapılır.
Wireframe'i kim onaylar?
İçeriği en iyi bilen kişi, yani firmanız tarafında karar veren kişi onaylar. Onay, sonraki tasarım aşamasının temelidir.
Her proje için wireframe gerekir mi?
Tek sayfalık küçük işlerde kısa bir taslak yeterli olabilir. Birden fazla sayfası, formu ya da kullanıcı akışı olan projelerde wireframe zaman kazandırır.