Buğra Yazar

UI / UX Prototip Hazırlama Aracı: Invisionapp

invisionapp
invisionapp
0

Bu yazıyı arkadaşlarınla paylaş

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 için mükemmel bir araç olan Invisionapp‘yi inceyeceğim.

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

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.

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.

Bu yazıyı arkadaşlarınla paylaş

0

Buğra Yazar

Startup Wordpress firma sahibi olarak 5 yıldır kurumsal firmalara WordPress danışmanlık hizmetleri vermekteyiz. Siz hayalinizdeki projeyi anlatın biz gercekleştirelim.

Yazıyı Beğen



1 Yorum

  • Invision’i yıllardır kullanan birisi olarak bu yazıda görmek mutlu etti 🙂