UI / UX Prototip Hazırlama Aracı: Invisionapp | Ömer Korkmaz



UI / UX Prototip Hazırlama Aracı: Invisionapp

Bu yazımızda tasarımcılar için çok faydalı olabilecek, benim vazgeçilmezlerimden olan Invisionapp ‘ten bahsedeceğiz. Web, tablet, ios, android, smart watch gibi tüm mecralarda uygulayacağınız tasarımları prototip haline getirip daha anlaşılır bir şekilde paylaşabileceğiniz harika bir araç.

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.

fixed-header

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

Desktop, ipad, android tablet, iphone, android 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.

crated-project

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 🙂

prototipler

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.ekranlar

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.

prototip1 prototip2

 

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.

build-mode-1

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.

comment

 

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

Henüz mobil uygulama tasarımı yapmadıysan senin için hazırlayıp paylaştığım Cafegrapp ‘i PSD leriyle beraber en free şekilde indirip dilediğin gibi kullanabilirsin.

Hemen Bak

0 Comments

  1. Pingback: Mobil Uygulama Tasarımı (Android) | Ömer Korkmaz

Leave a Reply

E-posta hesabınız yayımlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir

Sen gerçek misin? * Time limit is exhausted. Please reload CAPTCHA.