Tasarım süreçlerinde wireframe

Mehmet HAZMAN www.mehmethazman.com

#uxturkiye@ziftin_peki

Wireframe nedir? Başlamadan önce! Wireframe tipleri Araçlar Faydalar

Tasarım süreçlerinde wireframeSunum İçeriği

Tasarım süreçlerinde wireframe

Wireframe nedir?

Wireframe elimizdeki içeriği/süreçikullanıcıya nasıl sunacağımıza karar verdiğimiz oyun alanıdır.

Kullanıcı Deneyimi ve Tasarım sürecinin bir parçasıdır.

Wireframe büyük resmin küçük parçasıdır.

Tasarım süreçlerinde wireframeWireframe nedir?

Tasarım süreçlerinde wireframe

Başlamadan önce!

Site haritası Rakip analizi Kullanıcı fonksiyon listesi Akışlar

Tasarım süreçlerinde wireframeBaşlamadan önce!

Başlamadan Önce!Site haritası

Başlamadan Önce!Rakip analizi

Kullanıcı

İçerik Görüntüler. Etkinliğe Kayıt Olabilir. İçeriği Sosyal Ağlarda Paylaşabilir.

Yorum Yazabilir?

Başlamadan Önce!Kullanıcı fonksiyon listesi

Kullanıcı Yorum yazmak ister.

Kullanıcının kayıtlı olup olmadığı kontrol edilir.

Kullanıcı kayıtlı değil ise kayıt ekranına yönlendirilir.

Kullanıcı kayıtlı ise yorum yazabilir.

Kullanıcı yorumu yorum listesine eklenir.

Yorum listesi güncellenir.

Başlamadan Önce!Akışlar

Tasarım süreçlerinde wireframe

Peki ya şimdi?

Tasarım süreçlerinde wireframe

Wireframe tipleri

Eskiz Referans alan Düşük öncelikli Yüksek öncelikli

Tasarım süreçlerinde wireframeWireframe tipleri

Wireframe tipleriEskiz

Wireframe tipleriReferans alan

Wireframe tipleriDüşük öncelikli

Wireframe TipleriYüksek öncelikli

Tasarım süreçlerinde wireframe

Araçlar

AraçlarOffline araçlar

Kağıt / Kalem Axure Visio Omnigraffle Balsamiq Illustrator, Photoshop, Fireworks v.b.

AraçlarOnline araçlar

Mockflow Hot Gloo Mockingbird

…ve sayamadığım diğer tüm online araçlar…

Tasarım süreçlerinde wireframe

Faydaları

Tasarım süreçinde wireframeFaydaları

Hızlı tasarım kararları verebilirsiniz. Tasarım ekibi ile aynı dilden konuşabilir/anlaşabilirsiniz. Yazılım ekibine akışın nasıl olacağını rahatlıkla anlatabilirsiniz. Müşterinize tüm ekran’ların nasıl görüneceğini “onun

anlayabileceği bir dilde” gösterebilirsiniz.

…ve hepsinden önemlisi yapacağınız projenin büyük resmini rahatlıkla görebilirsiniz…

Teşekkürler….