Web Tasarımda Wireframe’lerin Önemi!

Bundan bir kaç yıl öncesine öncesine kadar hala bilindik yöntemlerle ilerleyen web sitesi tasarlama yöntemleri zaman içinde bir çok yeni elemanın devreye girmesi ile gittikçe gelişiyor. İşte bu elemanlardan en faydalılarından biri olan Wireframe’ler neden bu kadar önemli göz atalım mı?

Wireframe’ler projelerde sadece tasarımcının işini kolaylaştırmaktan öte, henüz tek bir piksel tasarım yapılmadan ve online olmadan, projenin yapı taşlarını oluşturarak deneyimleme imkanı veren en önemli unsurlardır.

Bu arada wireframe ile skeç’leri karıştırmamak gerektiğini hatırlatalım, skeçler daha çok kalem kağıt ile hazırlanan çizimlerken, wireframe’ler ise bir program ya da araç yardımı ile hazırlanan ve projenin kurgusunu daha derinelemesine yansıtan bir ön hazırlık aşamasıdır diye tanımlamak mümkün.

Peki neden wireframe ile başlamalı sorusuna yanıt aramak gerekirse bir kaç madde ile açıklamak mümkün.

Site  Mimarisini ortaya çıkarır

Henüz soyut halde olan sitenin ilk mimari adımları bu aşamada atılır ve somut hale getirilir. Belli bellirsiz halde olan site haritasının ortya çıkmasına destek olur. Navigasyon ve alt kırımların ortaya çıkarak kolayca listelenmesine imkan verir.

Projenin özellikleri ve fonksiyonlarını ortaya koyar

Adım adım hazırlanan ve her senaryoda çalışabilen wireframe’ler sayesinde projenin kurgulama anında farketmediğiniz bazı gereklilik, gereksinim ve fonksiyonel ihtiyaçlarının belirlenmesinde yol gösterici olur.

Kullanılabilirlik için öncelik sağlar

Wireframe konusunun en önemli unsuru belki de kullanılabilirlik konusunda projeye olan katkısının çok yüksek olmasıdır. Bağlantılar, navigasyon, içerik yerleşimi ve diğer gereklilikler konusunda objektif bir bakış açısı sağlayarak, çalışan bir web sitesiymiş gibi davranarak kullanılabilirlik yolunda henüz tasarıma bile geçillmeden önemli miktarda yol katetmenize sebep olur.

Tasarım sürecine yardımcı olur

Bir web projesi hakkında hiç bir fikri olmayan bir tasarımcının önüne ne kadar detaylı olursa olsun bir wireframe koymak ile sayfalar dolusu gereksinimler listesi koymak arasında elbette çok ama çok fark vardır. Kurgulanmış, senaryosu belli, içerik öğelerinin yerleşimi ve  gösterimi konusunda ön fikir oluşturacak detaya sahip bir wireframe elbette tasarımcının da estetik değerler ve işlevselliğin geliştirilmesi konusundaki yaratıcı fikirlerine yer açacak alanı oluşturacaktır.

İçerik gelişimine katkı

Wireframe’ler projede yer alacak (bu herhangi bir şey olabilir ürün, görsel, katalog, metin v.s) içeriklerin yerleşim ve miktarlarını, tahmine kapsayacağı alanları da ortaya çıkararak projenin içerik geliştirme aşamasında da katkıda bulunur.

Müşteri ile iletişimde kolaylık

İyi hazırlanmış, kurgu ve senaryoyu iyi yansıtan bir wireframe, proje sahibi ile iletişimde de büyük faydalar sağlar. İşin çalıştığında nasıl bir yolda ilerleyeceğini, hangi yollar üzerinden kullanıcıya ulaşıp onlara ne gibi bir deneyim sunacağını wireframe’ler üzerinden kolayca anlatmak mümkün.

Zaman tasaruffu

Bu tipte bir çalışma yapıldığında, yukarıdaki maddeleri de göz önüne aldığımızda wireframe’ler ile çalışmak bir proje için en büyük zaman tasarruflarından biri. Özellikle tasarım aşamasında fonksiyonel ve kurgusal  anlamda gelecek revizyonların önünün daha önceden kesilmesi bile size günler belki de haftalar kazandıracak bir durum.

Dezavantaj

Wireframe’lerin yukarıdaki sayısız avantajının yanı sıra özellikle biz tasarımcıları ilgilendiren bir de dezavantajından söz etmek mümkün. Fazla detaylı ve detaycı hazırlanmış wireframe’ler kimi zaman tasarımcıların yaratıcı alanlarının daralmasına sebep olabilir. Wireframe’ler hazırlanırken daha çok işlevsel açıdan değerlendirmek gerekli. Tasarım ve yerleşim konularına yaklaştıkça, tasarımcının oyun alanının daralmaya başladığını unutmamak lazım.

Bu aşamada belki de bu tip wireframe’lerin projeyi görselleştirecek tasarımcı ile birlikte aynı düzlemde hazırlanmasının faydası olabilir. Öte yandan tasarımcının da bu tip kurgusal ve fonksiyonel mimari bilgisine ve tecrübesine sahip olması gerektiği de aşikar.

Wireframe’lerin önemini bu şekilde kavramış olduk sanırım. Yazıyı sizler için seçtiğim wireframel’ler oluşturabileceğiniz bir kaç aracı paylaşarak tamamlamak istiyorum. Hepinize yaratıcı günler.

Ücretsiz wireframe uygulamaları

Mockingbird

Lovely Charts

Cacoo

Lumzy

Mockflow

SimpleDiagrams