Wireframe (Şema Tasarımı) Nedir?

Yeni bir projenin hazırlığı içerisindesiniz. Müşteriden edinilen brief doğrultusunda ihtiyaçlar doğrultusunda fikir üretildi ve analizler yapıldı ve bir yol haritası oluşturuldu.

AA

Analiz süreci sonrasında işin kapsamının tam olarak belirlenememesi muhtemel ve bu nedenle planlama bazı konuların atlanmasına veya yanlış değerlendirilmesine söz konusu olabilmekte. Elbette bu tür durumlar projeye ve müşteriyle olan uzun birlikteliğe bağlı olarak daha sancısız çözüme kavuşturulabilir. Şu an için konuyu her durumun bir “ilk” olduğunu düşünerek ilerletelim. Proje sürecindeki karmaşayı ve dolayısıyla kaynak israfını (emek, zaman, motivasyon gibi) önlemek amacıyla bir ön tasarım sürecinden faydalanmak mümkün. Ön tasarım sürecini fikirlerin herkes tarafından değerlendirilebileceği ortak bir payda olarak nitelendirebiliriz. İşte bu noktada wireframe adını verdiğimiz çözümlemelerden faydalanırız. Wireframe, brief’in temel basit bir görsel ifadesi olarak özetlenebilir. Gelelim konuya dair detaylara.

Wireframe

Wireframe, bir projenin kurgusu, ürün ve hizmetin son kullanıcıyla sunulması planlanan özellikleri hakkında müşteriye ve geliştirici ekibe fikir edinme imkanı sunan, tasarım ekibinin ise bilgi hiyerarşisini tanımlamalarını ve planlamalarını sağlayan bir ön hazırlık uygulaması, tasarım çözümlemesi ve bilgi mimarisi eskizidir. Geçmişi 1970’lere kadar uzanan wireframe’e Türkçe karşılık olarak web sitesi şeması yakıştırılsa da, sınırlandırma olmaksızın web ve mobil uygulamalar başta olmak üzere kullanıcı arayüzüne sahip tüm ürünler için kullanılması mümkün. Bu nedenle, şema tasarımı gibi bir genel ifadenin daha doğru olacağını düşünüyorum.

Bir wireframe ile bir uygulamanın / servisin hangi aşamada hangi işlevi sunacağı, bu işlev için nelerin gerekli olduğu (bağımlılıklar, zaman, ekip dağılımı vb.) kolaylıkla belirlenebilir ve buna göre projenin zaman planı oluşturulabilir. Bu plan doğrultusunda uygulamanın veya servisin kapsamı da netlik kazanacak ve brief çerçevesinde eksik olan ve/veya ihmal edilmiş hususlar da projeye dahil edilebilecektir.

Wireframe’ler:

  • Öncelikli bilgi ve fonksiyonları yansıtır,
  • Farklı ekran senaryonlarını gösterir ve farklılıkların anlaşılmasını sağlar.

Bir wireframe temel grafik elemanlardan (kareler, daireler, temel renk tonları ve benzeri) oluşur ve mümkün olduğu kadar basit bir şekilde ele alınır. Herhangi bir stil özelleştirmesi veya etkileşim taşımaz. Wireframe sürecinde, mümkünse projede ele alınacak ürün veya hizmete dair tüm adımları yansıtması amaçlanır. Wireframe’ler farklı seviyelerde ve kategorik düzeyde detaylandırılabilirler. Bu detaylandırma son ürüne yakınlık / aslına uygunluk (fidelity) üzerinden ifade edilir.

Wireframe

Low-fidelity

Kaba bir taslak veya hızlı bir mock-up’a benzeyen, düşük detaylara sahiptirler. Bu tür wireframe’ler takım içerisinde soyut fikirlerin netleştirilmesi ve yeni fikirlerin sürece dahil edilebilmesi amacıyla basit grafik elemanlarla (kareler, etiketler, lorem ipsum metinler gibi) tasarlanırlar. Bağımlı kalma zorunluluğu düşüktür, yani süreç içerisinde wireframe elemanları sıklıkla değişikliğe uğrar.

High-fidelity

High-fidelity wireframe’ler dokümantasyon amacıyla kullanılırlar ve son ürüne (web veya mobil uygulama, web sayfası vb.) en yakın görüntüyü yansıtırlar. Bağımlı kalma zorunluluğu yüksektir. Bu tür wireframe’lerin üretimi ürün detayına bağlı olarak oldukça zaman alır.

Wireframe Tasarımında Detayların Belirlenmesi

Bir ürün arayüzü için çalışmalara başlandığında belirlenmesi gereken ilk konu detay ölçeğidir. Oluşturulacak wireframe ne amaçla kime sunulacak? Amaç sadece kısa zaman içerisinde fikirlerin netleştirilmesi ve gereksinimlerin belirlenmesi için low-fidelity (düşük detaylı) gayet uygun olacaktır.

Sketch Wireframe

Eğer oluşturulacak wireframe dokümantasyonda kullanılacak ve süreçten bağımsız olarak farklı ekiplerce kılavuz olarak kullanılacaksa (stil hariç) soru işaretlerini önleyecek derecede detay içermelidir. Bu ürünün farklı ülkelerde kullanılabileceğini düşünün. Bu durumda stil farklılıkları olabilir ancak bilgi mimarisi, navigasyon ve grafik elemanlar arasındaki ilişki mümkün olduğunca benzer olmalıdır. Bu gibi durumlar için en uygun ilerleyiş high-fidelity wireframe’lerle sağlanabilir. Çünkü, yüksek detaylı wireframe’ler (high-fidelity), düşük detaylı olanlara göre çok daha fazlası bilgi sunar.

Wireframe Elemanları

Bir web sitesinin iskelet (skeleton) planı üç bileşene ayrılabilir:

  • Bilgi tasarımı (information design),
  • Navigasyon tasarımı (navigation design),
  • Arayüz tasarımı (interface design).

Sayfa düzeni (page layout), bu bileşenlerin bir araya geldiği yeri, wireframe ise bu bileşenler arasındaki ilişkiyi gösterir.

Bilgi tasarımı (information design), sunumdur; bilginin anlaşılmasını kolaylaştıracak şekilde yerleştirilmesi ve öne çıkarılması gerekir. Navigasyon tasarımı (navigation design), kullanıcının web sitesinde ve/veya uygulama içerisinde sayfalar / ekranlar arasında hareket etmesini sağlayan bir dizi ekran öğesi sunar. Arayüz tasarımı (interface design), kullanıcıların sistemin işlevselliği ile etkileşime girmesini sağlamayan arayüz elemanlarını içerir.

Detaylandırma Süreci

Wireframe Kullanımı

Yukarıdaki açıklamaları maddeler halinde, daha yalın şekilde listeleyelim.

Fikirler daha kolay ifade edilir ve anlaşılmasını sağlanır

WireFrame ile ürüne dair soyut fikirler estetik yorumlama olmaksızın (renksiz, logosuz vb. olmaksızın) sunulur. Bu sayede proje planlaması net bir şekilde gerçekleştirilebilir.

Geribildirimler (feedback) ile soru işaretleri ortadan kaldırılır

Son kullanıcılar, tasarım ve geliştirici ekibi, karar vericiler, paydaşlar… ürünün gelişim aşamasını gözden geçirebilir ve geribildirimlerde bulunabilirler. Feedback döngüsü sayesinde sürece erkenden müdahale edilebilir ve kaynaklar daha efektif yönetilebilir.

WireFrame özellikler ve gereksinimler net hale getirilir

WireFrame, sayfa ve ekranlarda sunulması gereken bilgiler / bilgi mimarisi, bu bilgiler arasındaki akış (navigasyon) ve işlevler için hiyerarşi oluşturmayı kolaylaştırır. Kullanıcılar ve işlev kolaylıkla analiz edilebilir ve nihai ürüne en uygun şekilde tasarlanabilir.

En İyi WireFrame Araçları

Wireframe süreci eskiz (sketch) aşamasından sonra ve mockup aşamasından önce gelir ve eskizlerin daha anlaşılır şekilde ifade edilebilmesini, notlar ve akış çizgileri ile sıralanabilmesini sağlar. Bu işlem yine el çizimi ile yapılabileceği gibi MockPlus, UXpin, Whimsical ve Balsamiq gibi uygulamalarla da yürütülebilir.

Son olarak, aşağıda okunmasını özellikle tavsiye ettiğim ve bu yazı için de kaynak niteliği taşıyan bazı yazıları listeliyorum.