tasarım süreçlerinde wireframe
DESCRIPTION
Wireframe elimizdeki içeriği/süreçi kullanıcıya nasıl sunacağımıza karar verdiğimiz oyun alanıdır.TRANSCRIPT
![Page 1: Tasarım süreçlerinde wireframe](https://reader034.vdocuments.mx/reader034/viewer/2022052508/559aa3211a28abcf508b45ff/html5/thumbnails/1.jpg)
Tasarım süreçlerinde wireframe
![Page 2: Tasarım süreçlerinde wireframe](https://reader034.vdocuments.mx/reader034/viewer/2022052508/559aa3211a28abcf508b45ff/html5/thumbnails/2.jpg)
Mehmet HAZMAN www.mehmethazman.com
#uxturkiye@ziftin_peki
![Page 3: Tasarım süreçlerinde wireframe](https://reader034.vdocuments.mx/reader034/viewer/2022052508/559aa3211a28abcf508b45ff/html5/thumbnails/3.jpg)
Wireframe nedir? Başlamadan önce! Wireframe tipleri Araçlar Faydalar
Tasarım süreçlerinde wireframeSunum İçeriği
![Page 4: Tasarım süreçlerinde wireframe](https://reader034.vdocuments.mx/reader034/viewer/2022052508/559aa3211a28abcf508b45ff/html5/thumbnails/4.jpg)
Tasarım süreçlerinde wireframe
Wireframe nedir?
![Page 5: Tasarım süreçlerinde wireframe](https://reader034.vdocuments.mx/reader034/viewer/2022052508/559aa3211a28abcf508b45ff/html5/thumbnails/5.jpg)
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?
![Page 6: Tasarım süreçlerinde wireframe](https://reader034.vdocuments.mx/reader034/viewer/2022052508/559aa3211a28abcf508b45ff/html5/thumbnails/6.jpg)
Tasarım süreçlerinde wireframe
Başlamadan önce!
![Page 7: Tasarım süreçlerinde wireframe](https://reader034.vdocuments.mx/reader034/viewer/2022052508/559aa3211a28abcf508b45ff/html5/thumbnails/7.jpg)
Site haritası Rakip analizi Kullanıcı fonksiyon listesi Akışlar
Tasarım süreçlerinde wireframeBaşlamadan önce!
![Page 8: Tasarım süreçlerinde wireframe](https://reader034.vdocuments.mx/reader034/viewer/2022052508/559aa3211a28abcf508b45ff/html5/thumbnails/8.jpg)
Başlamadan Önce!Site haritası
![Page 9: Tasarım süreçlerinde wireframe](https://reader034.vdocuments.mx/reader034/viewer/2022052508/559aa3211a28abcf508b45ff/html5/thumbnails/9.jpg)
Başlamadan Önce!Rakip analizi
![Page 10: Tasarım süreçlerinde wireframe](https://reader034.vdocuments.mx/reader034/viewer/2022052508/559aa3211a28abcf508b45ff/html5/thumbnails/10.jpg)
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
![Page 11: Tasarım süreçlerinde wireframe](https://reader034.vdocuments.mx/reader034/viewer/2022052508/559aa3211a28abcf508b45ff/html5/thumbnails/11.jpg)
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
![Page 12: Tasarım süreçlerinde wireframe](https://reader034.vdocuments.mx/reader034/viewer/2022052508/559aa3211a28abcf508b45ff/html5/thumbnails/12.jpg)
Tasarım süreçlerinde wireframe
Peki ya şimdi?
![Page 13: Tasarım süreçlerinde wireframe](https://reader034.vdocuments.mx/reader034/viewer/2022052508/559aa3211a28abcf508b45ff/html5/thumbnails/13.jpg)
Tasarım süreçlerinde wireframe
Wireframe tipleri
![Page 14: Tasarım süreçlerinde wireframe](https://reader034.vdocuments.mx/reader034/viewer/2022052508/559aa3211a28abcf508b45ff/html5/thumbnails/14.jpg)
Eskiz Referans alan Düşük öncelikli Yüksek öncelikli
Tasarım süreçlerinde wireframeWireframe tipleri
![Page 15: Tasarım süreçlerinde wireframe](https://reader034.vdocuments.mx/reader034/viewer/2022052508/559aa3211a28abcf508b45ff/html5/thumbnails/15.jpg)
Wireframe tipleriEskiz
![Page 16: Tasarım süreçlerinde wireframe](https://reader034.vdocuments.mx/reader034/viewer/2022052508/559aa3211a28abcf508b45ff/html5/thumbnails/16.jpg)
Wireframe tipleriReferans alan
![Page 17: Tasarım süreçlerinde wireframe](https://reader034.vdocuments.mx/reader034/viewer/2022052508/559aa3211a28abcf508b45ff/html5/thumbnails/17.jpg)
Wireframe tipleriDüşük öncelikli
![Page 18: Tasarım süreçlerinde wireframe](https://reader034.vdocuments.mx/reader034/viewer/2022052508/559aa3211a28abcf508b45ff/html5/thumbnails/18.jpg)
Wireframe TipleriYüksek öncelikli
![Page 19: Tasarım süreçlerinde wireframe](https://reader034.vdocuments.mx/reader034/viewer/2022052508/559aa3211a28abcf508b45ff/html5/thumbnails/19.jpg)
Tasarım süreçlerinde wireframe
Araçlar
![Page 20: Tasarım süreçlerinde wireframe](https://reader034.vdocuments.mx/reader034/viewer/2022052508/559aa3211a28abcf508b45ff/html5/thumbnails/20.jpg)
AraçlarOffline araçlar
Kağıt / Kalem Axure Visio Omnigraffle Balsamiq Illustrator, Photoshop, Fireworks v.b.
![Page 21: Tasarım süreçlerinde wireframe](https://reader034.vdocuments.mx/reader034/viewer/2022052508/559aa3211a28abcf508b45ff/html5/thumbnails/21.jpg)
AraçlarOnline araçlar
Mockflow Hot Gloo Mockingbird
…ve sayamadığım diğer tüm online araçlar…
![Page 22: Tasarım süreçlerinde wireframe](https://reader034.vdocuments.mx/reader034/viewer/2022052508/559aa3211a28abcf508b45ff/html5/thumbnails/22.jpg)
Tasarım süreçlerinde wireframe
Faydaları
![Page 23: Tasarım süreçlerinde wireframe](https://reader034.vdocuments.mx/reader034/viewer/2022052508/559aa3211a28abcf508b45ff/html5/thumbnails/23.jpg)
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…
![Page 24: Tasarım süreçlerinde wireframe](https://reader034.vdocuments.mx/reader034/viewer/2022052508/559aa3211a28abcf508b45ff/html5/thumbnails/24.jpg)
Teşekkürler….