Wireframe (Şema Tasarımı) Nedir?

Bir site ya da mobil uygulamanın sahip olduğu bileşenleri, işlemleri kaba ve detaysız (tasarıma çok bulaşmadan) bir yerleştirme düzeni içerisinde projenin kurgusu, akışı ve işlevselliği hakkında hem müşteriye hem de yazılımcılara fikir sunma imkanı sağlayan, proje ön hazırlık aşamasındaki anlatım dilidir. Şema Tasarımı olarak Türkçe ifade edilebilir.

Özgün tasarımın hazırlanmasına referanslık yapar. Revizyonları ve fikir geliştirme sürecini hızlandırır.

Uygulamanın veya web sitesinin mobil cihazlarda önceliklerin belirlenmesi için önemli bir görev üstlenmekte, kuşbakışı görünümü göstermektedir.

Wireframe tasarımı;

  • Öncelikli bilgi ve fonksiyonları yansıtır.
  • Kullanıcının sistemdeki bilgiyi nasıl işleyeceği içeririr. 
  • Kullanıcıların arayüzle ile nasıl etkileşime gireceğini barındırır.
  • Çoklu ekran senaryolarındaki farklılıkların anlaşılmasını sağlar.

Wireframe, tasarım sürecinin giriş öğesi olarak düşünülebilir. Genelde bağlı kalma zorunluluğu düşük (lo-fi) çizgiler, (renklerle hiyerarşi atamasını yapmamak adına) tercihen gri kutular ve yer tutucu içeriklerle sunulan örnek metinlerle hazırlanmış, stil bağımsız bir bilgi mimarisi eskizidir.

Bir wireframe çizmekte temel amaç neyin nerede konumlanacağına, estetik ve stil atamasındaki kaygılara kaynak harcamadan göz atabilecek bir düzen kurmaktır. Başarılı bir wireframe’in aşağıdaki özelliklere sahip olması beklenir:

  • İçeriği nasıl grupladığını net anlatabilmek.
  • Bilginin yapı taşlarını doğru ve yine net bir şekilde organize edebilmek.
  • En temel kullanıcı etkileşimlerinin (navigasyon gibi) eksiksiz konulandırmasını yapabilmek.

Wireframe Neden Gereklidir?

  • Proje tasarım ve geliştirme süreçleri başlamadan genel hatları ile tüm sürecine hakim olunmasını sağlar..
  • Neyin nasıl yapılacağını net olarak karar verilmesini sağlar.
  • Projeden çıkartılıp eklenecek hususları net olarak tespit edilmesinin önünü açar.
  • Projenin diğer süreçlerine kıyasla kolay elde edilir ve hızlı yorumlanabilir.
  • Proje paydaşları arasında ortak dilin konuşulmasını sağlar. Herkes tarafından kolay algılanır. Öğrenme ve anlama eşiğini eşitlemiş olur.
  • Proje geliştirme ve tasarım sürecinde sürekli geri dönüp düzeltme eylemini azaltır. Bu süreçleri hızlandırır.

Başarılı Bir Wireframe Neler İçermelidir?

  • içeriği nasıl grupladığını net anlatabilmek
  • bilginin yapı taşlarını doğru ve yine net bir şekilde organize edebilmek
  • en temel kullanıcı etkileşimlerinin (navigasyon gibi) eksiksiz konulandırmasını yapabilmek

 

Wireframe Çiziminde Detay Seviyesi

Wireframe çizimine başlamadan önce karar verilmesi gereken en önemli hususlardan biri detay seviyesidir. Eğer proje fikir aşamasındaysa, öncelikle az detaylı wireframe’ler yapıp süreci başlatmak önem taşır. Ama projenin kapsamı, fonksiyon analizleri tamamlandıysa yüksek detaylı (High fidelity) ve özenli wireframe’ler yapılabilir.

Yüksek detay içeren (high-fidelity) wireframe’ler, esasen düşük detaylı (low-fidelity) wireframe’lerdeki boşlukları doldurmayı ve final ürüne en yakın çıktıyı sunmayı amaçlıyor. Örneğin; düşük detaylı wireframe’leri geçici görsel ve metinsel öğelerle oluştururken, yüksek detaylı wireframe’lerde gerçek logoyu, gerçek içeriği hatta bazen renkleri de tasarıma dahil etmek mümkün.

High-fidelity wireframe’ler, low-fidelity wireframe’lerin bir alternatifi değildir ve farklı amaçlara hizmet ederler.

Düşük Detaylı Wireframe’ler (Low-Fidelity)

  • Yer tutucu öğeler içerir.
  • Çok daha fazla ayrıntı gösterirler.
  • Gerçek UI tasarım öğelerinin neye benzeyeceğine yakın, daha iyi bir fikir verirler.
  • Hazırlaması kolay ve hızlıdır.
  • Yazılımcılar ile daha iyi iletişim kurmak konusunda işe yararlar.
  • Tasarım aşamasına etkisi düşüktür.

DEZAVANTAJLARI 

  • Müşterinin hayal gücüne daha çok ihtiyaç yaratır.

Yüksek Detaylı Wireframe’ler (High-Fidelity)

  • Gerçek içeriklerden yararlanır.
  • Tasarımcı işlevleri daha iyi anlar ve detayları daha dikkatli tasarlama imkanı bulur.
  • Gerçeğe yakın düşünmenin önünü açar, tasarımı somutlaştırır.
  • Müşterinin hayal gücüne daha az ihtiyaç yaratır.
  • Proje paydaşlarını ikna etmek istediğinizde ya da müşterinizi etkilemek istediğinizde onlara yüksek detaylı bir wireframe sunmak hayatınızı kurtarabilir.
  • Tasarım aşamasına etkisi yüksektir.
  • Aynı zamanda dokümantasyon amacıyla da kullanılabilir.

DEVAVANTAJLARI

  • Uzun zamana ihtiyaç duyar.
  • Müşteri için karışıklık yaratan bir neden olabilir.
  • Değerlendirme sürecinde müşterinin yaratıcılığını öldürebilir.
  • Müşteriniz, final arayüz tasarımı olduğunu düşünebilir.
  • İterasyonlara dayalı bir sürecin verimliliğinden yararlanmanızı engelleyebilir.