İpucu

Bir uygulama geliştirmeye başlamadan önce en önemli aşama analiz kısmıdır. Analizin ardından, gereksinimlerin belirlenmesi ve proje kapsamının netleştirilmesinden sonra, proje fikrinin uygulama üzerinde somutlaştırdığımız, iş akışları belirdiğimiz aşama: Wireframe Sketch'lerinin oluşturulmasıdır.

 

 

Bu püf noktası serimizde amacımız, Windows8 üzerinde sıfırdan başlayarak uzun zamandır aklımda olan bir fotoğraf portfolyo uygulamasını hep birlikte yapmak. Yapacağımız projede hobi amaçlı çektiğim fotoğrafları yayınlayacağım. Bunu bir template olarak belirleyerek ilerleyen günlerde uygulama üzerinde güzel sürprizlerim de olacak. Uygulama sayesinde de ince detaylar ve UX konularına değiniyor olacağız.

 

Bu yazımızda uygulamamıza ait wireframe çizimi nasıl olacak onu göreceğiz.

 

Bu örneğimizde sadece high-level olarak değindiğim wireframe sketchler konusunda, önümüzdeki günlerde ayrı bi yazı dizisi olarak başlatacağım.

 

Şimdi bizim fotoğraf portfoliosu için sahip olacağımız wireframe genel görünümü aşağıdaki gibi olacak.

 

 

 

3 temel sayfası olan ve hiyerarşik olarak 3 aşamaya sahip olacak bir uygulama olacak.

 

MainPage.xaml

MainPage.xaml projemizin anasayfası olacak ve ilgili gruplar altında detayları görebileceğiz, Bu sayfadan hem group sayfasına hem de detay sayfasına linkler olacak.

Bu sayfa içerisine pek çok özellikler ekleyeceğiz, Semantic Zoom, Application bar, system contractları(search,share ve settings gibi)... İstediğimiz takdirde de gruplama kriterini değiştirebileceğiz.

 

groupPage.xaml

Bu sayfamızda proje içerisinde grupladığımız içeriklere grup bazında erişerek içeriklerini görebileceğiz. Bu ilgili içeriklerin detaylarına yine tıklayarak gidebileceğiz.

 

detailPage.xaml

Detay sayfasında seçtiğimiz fotoğrafın büyük halini görebilecek, ilgili fotoğraf açıklamaları ve değerlerine erişebileceğiz. Ayrıca burada Fullview settings'i olacak. Fotoğraf'a ait tüm detaylarla birlikte bing maps üzerinde nerede çekildiğini de pinleyebileceğiz.

 

Uygulamanın sistem charms içerisinde sahip olacağı özellikleri de aşağıdaki gibi olacaktır.

 

Settings

Burada uygulamaya ait özelliklerin bulunacak ve kullanıcılar bu özellikleri isteklerine göre değiştirebilecekler; arkaplan rengi, uygulamanın background'da çalışıp çalışmaması, lokasyonu kullanıp kullanmaması gibi özellikleri yer alacak.

 

Search

Fotoğrafın başlık veya içeriğinde arama yaparak ilgili fotoğraf sonuçlarını elde edeceğiz. Bu filtrelenen sonuçlara da tıklayarak yine aynı şekilde fotoğraf detaylarını görebileceğiz.

 

Share

Bu paylaşma özelliği ile, seçilen fotoğraf detayını e-posta veya sosyal ağlarda paylaşmak için uygulamamıza share contract'ı ekleyeceğiz.

 

 

Aşağıda da alanında çok güzel WireFrame çizimleri mevcut, bu çizimlere de bakarak sizin çizeceğiniz fikirler için ilham alabilirsiniz.

http://webdesignledger.com/inspiration/inspiring-ui-wireframe-sketches

http://webdesignledger.com/inspiration/18-great-examples-of-sketched-ui-wireframes-and-mockups

 

Beni https://twitter.com/ikivanc dan takip edebilir ve sorularınızı buradan sorabilirsiniz. 

 

İyi çalışmalar.