UI / UX Prototip Hazırlama Aracı: Invisionapp

Prototip Derken Neyi Kastediyorsun?

invisionapp-ui-ux-prototype

Bildiğiniz prototip. Hazırladığınız arayüz tasarımının ya da hazırlayacağınız tasarımın wireframe ekranlarının bir birini takip eden sayfalar haline getirip canlıya en yakın örneğini oluşturmak diyebiliriz.

Peki Invisionapp Nasıl Kullanılıyor?

Çok anlaşılır bir arayüze sahip olan Invisionapp ‘i kullanmak fazlasıyla eğlenceli. Kullandıkça keşfediyorsunuz bir şeyleri ve ihtiyacınız doğrultusunda bir hayli esnek davranabiliyosunuz. Mesela Invisionapp ‘te hazırladığınız bir tasarımda header ya da menünün sticky olduğunu göstermek sadece 1 tık’ lık bir hareket. Tabi bu örnek, yapabileceklerinizin sadece çok küçük bir örneği.

 

Tüm Mecralar Düşünülmüş

Desktop, ipad, android tablet, iphoneandroid phone, apple watch, android watch gibi geniş bir kullanım alanı mevcut. Bir mobil projesi oluştururken size sunulan yapılandırma ayarları ile bir desktop projesi oluştururken sunulan ayarlar arasında farklılıklar mevcut. Yani tool lar ihtiyaca göre şekilleniyor.

Birden Fazla Proje Oluşturabilirsiniz

Aynı anda birden fazla projeyi Invisionapp ‘e yükleyebilirsiniz. Projelerinizi ‘Prototypes’ başlığı altından takip edebilirsiniz. Proje içerisine sınırsız sayfa tasarımı atabilir prototip in çok daha gerçekçi olmasını sağlayabilirsiniz. Ancak çoklu proje oluşturma olayı süre kısıtlıdır. 30 gün tadını çıkartabilirsiniz. Sonrasında sadece 1 proje oluşturabilirsiniz. Kullanım sıklığınıza göre o şekilde de işinizi görebilir.

mobile

Ancak fazla yardımsever bir destek ekibi var. Benim deneme sürümüm bitmiş projelerimi görüntüleyemiyorum dediğimde +30 gün daha ek süre verdiler sağolsunlar 🙂

 

invisionapp.com ‘dan hesap oluşturup giriş yaptığınızda Web App, Mobile App ve Clikable Wireframe olarak 3 proje zaten hazır olarak karşınıza çıkıyor. Bu projeleri inceleyerek ne şekilde hazırlanmış olduklarını anlayabilirsiniz.

Hiç Bir Kod Bilgisine Gerek Yok

Örneğin anasayfa, ürün liste, ürün detay, iletişim başlıkları olan basit bir site tasarımını photoshop ile hazırladınız. Invisionapp ‘te yeni bir web projesi oluşturup içerisine bu tasarımları ister psd ister jpg ister png olarak sürükle bırak şeklinde hızlıca aktarıyoruz.

Görseller yüklendikten sonra mesela anasayfa.jpg ‘i açalım. Aşağıdaki görselde gördüğünüz gibi banner alanında kullandığımız görsel full değil. Ancak sağ sol beyaz boşluklarda hoş durmuyor. Configuration başlığı altındaki ayarlardan auto stretch ‘i seçtiğimiz de görselin sağ ve sol alanındaki 1 pikselin renklerini baz alarak sağ ve sola sonsuz şekilde otomatik olarak uzatıyor.

Tabi bu kullanım, geçişli renklerden ziyade tek renklerde daha sağlıklı sonuç veriyor.

 

Daha sonra sayfa içerisindeki ilişkili bir alana link mantığı ile detay sayfalarımıza yönlenmesini sağlayalım. Sayfa içerisinde alt kısımda Preview, Build, Comments, History olarak 4 mod umuz var. Build moduna geçerek sayfa içerisindeki düzenlemelerimizi yapabiliriz. Tasarımımızda All Posts, Photos, Videos şeklinde bir tab yapısı oluşturulmuş. Tabların üzerinde işaretleme yaptıktan sonra ekranımıza yeni bir panel geliyor. Bu alandan gidecek diğer sayfamıza link verebilir, belirli bir efekt uygulayabilir, tıklandığında gitsin ya da üzerine geldiğinde hover olarak şu tasarım gözüksün vb. bir çok seçenekten uygulamak istediğimizi belirleyebiliriz.

 

Ekip Olarak Kullanın

Invisionapp ‘in temel amaçlarından birisi de çoklu katılım ile projenin ilgili kişiler tarafından görüntülenip üzerine pinleme yapılarak dilediğmiz bölgeye anlık yorum atma gibi özelliklerden faydalanarak süreci daha anlaşılır ve hızlı yönetmektir. Prototipinizi tamamladıktan sonra share seçeneğinden proje linkini mail, sms vs. mecralardan aktarabilirsiniz. Linke tıklayan kişi comment mode kısmına gelerek tasarım üzerindeki belirli bir alan hakkındaki görüşünü o bölgeye tıklayarak anlık olarak bırakabilir. Eğer bir tasarım ekibiniz yok, tek kişilik dev kadro iseniz bunu freelance yaptığınız işlerde müşteriye tasarımı sunarken ondan daha anlaşılır bir yorum ve revize almak şeklide çok verimli olarak kullanabilirsiniz.

 

Bunun gibi bir çok faydalı özelliği kullandıkça anlayacak ve keşfettikçe seveceksiniz. O yüzden daha fazla detaya girmiyorum. Zaten sitedeki kullanım videolarını izleyerek az çok anlayacaksınız. Bu arada anlatımım demo sürüm üzerindendi. Premium üyelik içerisnide yapacağınız çok daha harika şeyler var. Ayrıca Invisionapp gibi bir kaç prototip oluşturma hizmeti daha mevcut, ancak benim severek kullandığım inv. oldu. Dediğim gibi, ister ekip olarak kullanın, ister freelance çalışmalarınızda kullanın, bir şekilde hayatınızda olsun. Kod işlemine girmeden tasarımlarınıza biraz hareket katın 🙂 Kolay gelsin.

Invisionapp ‘e Katıl

 

kaynak: http://www.cafegrafik.com/