Wireframe, tasarımcıların olası tasarım çözümlerinin yapısını oluşturmak için etkileşimli ürünlere genel bakışlar çizdiği süreçtir. Bu ana hatlar, kullanıcı ve iş ihtiyaçlarını yansıtır. Sketch olarak (kağıt-kalemle) veya bilgisayar programlarıyla hazırlanır. Bu sebeple, ekiplerin ve paydaşların optimum, kullanıcı odaklı prototipler ve ürünler konusunda fikir yürütmelerini sağlar.
Tasarım için bir plan olan bu yöntem web sitesinin yapısını düzenlemeye yardımcı olan bir iskelet çerçevesidir. Bir web sitesinin tüm sayfalarını ve nasıl birbirine bağlandıklarını gösteren bir şemadır. Geliştiricilere ve tasarımcılara web sitesinin nasıl görüneceği konusunda kabaca bir fikir verir. Bir web sitesinin veya uygulamanın temel işlevlerini daha iyi anlamalarına yardımcı olur.
Bu yöntem, her sayfanın yapılandırılacağı görsel bir referans sağlar, ancak tipik olarak sitenin tasarımına veya içeriğine herhangi bir referans içermez.
Wireframe Ne İşe Yarar?
Bu yöntem şu unsurlara sahiptir: genel gezinme şeması, metin ve medya parçaları ve etkileşim tasarımı. Temel olarak tasarım sürecinin temeli olarak hizmet eder.
- Wireframe, web siteniz için sayfa öğelerinin, site özelliklerinin, dönüşüm alanlarının ve gezinmenin belirli boyutunu ve yerleşimini özetleyen basit siyah-beyaz-gri düzenlerdir.
- Tamamen bir sitenin yapısına odaklanmaktan uzaklaşan renk, yazı tipi seçimleri, logolar veya herhangi bir gerçek tasarım öğesinden yoksundurlar.
Bu aşama, web sitesinin yapısının tasarlandığı aşamadır. Kullanıcı deneyimi tasarımı sürecinde yer alan iskelet oluşturma aşamasındadır.
Site Mimarisini Görsel Olarak Görüntüler.
Websitesi tasarlarken oluşturulan bir site haritası başlangıçta çok soyut bir haldedir. Site haritasına burada yer vermek, projeyi somutlaştırmak için atılan bir adım olur. Projede yer alan tüm paydaşlar için tasarım anlatısını somutlaştırarak tasarımda yer alan tüm paydaşlara fayda sağlar.
Sitenin mimarisi yani navigasyon, ana sayfaların ve alt sayfaların organizasyonu ve kullanıcı akışı gibi unsurla bu yapı içinde ön plana çıkarılır.
Web Sitesi Özelliklerinin Açıklanmasına Yardımcı Olur.
Müşteriler teknik tasarım terimlerini anlayamayabilir. Bir web sitesinin belirli özelliklerini ve onların nasıl çalışacağını bu yöntemle anlatabilirsiniz. Teknik terimlere hakim olmayan paydaşlarla doğru iletişim kurmaya yardımcı olur.
Düşük Maliyetlidir.
Wireframe oluşturulması hızlı, düşük maliyetli ve kolaydır. Bu nedenle, ilerlemeden önce temelleri düzgün bir şekilde planlayabilir, zaman kaybını önleyebilirsiniz.
Kağıda çizilmiş ilk eskizleriniz aslına uygun ve düşük maliyetli olacaktır. Daha sonra bir wireframe aracı kullanarak dijital yapı oluşturduğunuzda, tasarımlarınız düşük maliyetli olmaya devam edecek, ayrıca çekirdek yapıyı ekranda görselleştirebilmeniz tasarımınıza ek fayda sağlayacaktır.
Zaman Kaybını Önler.
Bu yöntemi kullanmak, basit bir yapıyı koruyarak, yalnızca ana özellikleri ve temel görsel yönergeleri yerinde tutarak hikayenin tamamına odaklanmanıza olanak tanır.
Tasarım sürecinin ilk aşamalarında piksel mükemmelliğindeki tasarımlar oluşturmak anlamsızdır. Nihai tasarımınıza ulaşmadan önce birçok farklı yinelemeyi wireframe aracılığıyla keşfedebilirsiniz.
Erken Geri Bildirim Fırsatı Tanır.
Ürün tasarımı süresince paydaşlar tarafından geribildirim alınır ve bu sayede erken müdahale imkanı doğar.
Yukarıdaki sebeplerden dolayı kullanılan bu araç nihai tasarım değildir. Görsel tasarım çalışması barındırmaz. Ayrıntılardan ziyade ana yapıyı odak haline getirir. Bu yapıyı oluşturduktan sonra görsel tasarım yapılması faydalı olur.
Wireframe Nasıl Hazırlanır?
- Sitenizin ana gezinme ve içerik öğelerinin sayfada nerede görüneceğine dair kılavuz hazırladığınızdan ve çizimlerin amacı görsel tasarımı anlatmak olmadığından dolayı basit tutulmalıdır.
- Renkleri kullanmayın. Dolayısıyla öğeleri ayırt etmek ve farklılıkları iletmek için çeşitli gri tonları kullanın.
- Görselleri kullanmayın. Çünkü görüntüler eldeki görevden dikkati dağıtır. Örneğin bir resmi nereye yerleştirmeyi planladığınızı ve boyutunu belirtmek için, bunun yerine “x” ile boyutlandırılmış dikdörtgen bir kutu kullanabilirsiniz.
- Yalnızca bir genel yazı tipi kullanın. Ayrıca çeşitli başlıkları ve sayfadaki metin bilgilerinin hiyerarşisindeki değişiklikleri belirtmek için yazı tiplerini boyutlandırabilirsiniz.
“Wireframe”ler iki boyutlu olduğundan, açılır menüler, hover durumları, göster-gizle işlevini uygulayan akordeon menüler gibi arayüzün etkileşimli özelliklerini göstermede başarılı olmadıklarını fark edebilirsiniz.
Bu Yapıyı Hazırlamasak Olur Mu?
Wireframe hazırlamadan direkt UI tasarıma başladınız ve müşteriye bu tasarımınızı sundunuz. Diyelim ki müşteriniz “hero” sayfanızda yer alan “CTA” bölümünün yerini beğenmedi. Ayrıca footer sayfasının da genel yapısını da beğenmedi. Uzun süre ve emeklerle oluşturduğunuz tasarımınız üzerinde değişiklikler yapmanız, hem ana yapıyı bozarak çalışmanıza sebep olacak, hem de daha öncesinden vakit kaybetmenize sebep olacaktır. Örneğin, basit bir web sitesi yapısı oluşturmak için bu kutu yapılarıyla ile çalışsaydınız ve müşteriye bu yapıyı göstererek geribildirimler alsaydınız, emekleriniz boşa gitmeyecek ve de değişiklikleri hızlıca yapabilecektiniz.
Wireframe Kaynakları
Figma Wireframe Kit
Desktop ve mobil olarak wireframe kitleri bulunan Figma, tasarımcıların hızlı ve kolay yapılar oluşturmasına olanak sağlıyor.
Lo-fi Wireframe Kit by Dave Whitley
Dave Whitley tarafından Figma Community’e eklenen Lo-fi Kit, butonlar, metin alanları, sekmeler, resimler ve birden çok varyasyon dahil olmak üzere 100’den fazla bileşen barındırıyor.
Bloo Lo-fi Kit
150’den fazla kullanıma hazır mobil ekran bileşenine sahip Bloo, hızlı tasarım yapmak için kullanılabilir.
Form Wireframe Kit by InVision
Dijital ürün prototipleme platformu Invision tarafından sunulan bir kittir.
Kaynaklar:
https://www.interaction-design.org/literature/topics/wireframing
