Wireframe, MockUp, Prototip Anlam Karmaşasına Son Nokta…

Geçen gün ortağımla oturduk yarım saat ‘yok wireframe şudur, yok mockup şöyle, o öyle değil aslında böyle’ gibi boş boş anlamlar üzerine tartıştık. En sonunda aynı şeyleri farklı kelimelerle anlattığımızda hemfikir olup HapŞeklinde’ye konu etmeye karar kıldık.

Sıralama şu şekilde: Sketch/Eskiz -> Wireframe -> Mockup -> Prototip

Wireframe
Görsel ve işlevsel bir ön hazırlık aşaması ve tasarımın belki de ilk adımıdır. Bir kağıt ya da çizim programı üzerinde hazırlanabilir. Estetik kaygı anlamında renk dahil neredeyse hiçbir şeye gerek yoktur. Önemli olan iskeleti çıkartmak ve bir ön fikir sahibi olmaktır. İçerik bilgi mimarisidir: Menüler, metinler, butonlar, resimler, bunların konumları ve kapladığı alanlar, gruplamalar, sayfalar/ekranlar arası bağlantılar, senaryolarla kullanıcı etkileşimleri yer alır.
Faydası: Fazla vakit ve kaynak harcamadan yapılır. Siz ve müşteri istediğiniz şey üzerinde tartışır ve mutabık kalırsınız. Tasarımcı, yazılımcı ve bilumum ekip rahat eder.
Önerilen uygulamalar: Sketch, Balsamiq, Pencil, Omnigraffle (*)

Mockup
Aslında model veya maket de diyebiliriz. Wireframe’i alıp müşteriye güzel janjanlı bir şekilde tam ölçekli sunmaktır. Yani estetik kaygısı olan, son kullanıcının nihai şekildeki kullanımlarına en yakın görsel sunumdur. Bu sunum bir pdf olabileceği gibi müşterinin hayal edebilmesi için tamamen statik bir mobil uygulama da olabilir.
Faydası: Görsel tasarım ve gerçek dünyadaki kullanım alanları netleşmiş olur. Müşteri en sonunda neyle karşılaşacağını bilir, sürprize yer kalmaz.
Önerilen uygulamalar: Invision, UXPin, Marvel, Framer, JustInMind

Prototip
İşte bu en can alıcısıdır çünkü hayalinizin çalışan, işleyen basit bir versiyonudur. Tabi ki full fonksiyon değildir ama interaktif bir simulasyondur. Müşteriye verdiğinizde ‘aa bitirmişsiniz’ tepkisi almanız muhtemeldir.

Faydası: Hatalar ve kolay kullanımlı olup olmadığı gözlenir. Ayrıca ürünü yatırımcılara ve patronunuza göstermek için büyük fırsattır.
Önerilen uygulamalar: Invision, JustInMind, UXPin, 3D yazıcılar

(*) Bu yazıda bahsedilen uygulamalar genelde her aşama için kullanılabiliyorlar. Bir de web tabanlı ücretsiz birçok seçenek bulabilirsiniz.

Mustafa El-Aliwat