Framer ile Yüksek Kalite Prototipleme

Teknoloji ile etkileşim biçimimizin değişmesiyle şimdi sıra ürünlerimizi tasarlamak için kullandığımız araçların değişmesinde. Bugün fikirlerimizi yüksek kalite interaktif prototipler oluşturarak test edebileceğimiz Framer’ı inceleyeceğiz.

Prototipleme ve Amaçları

Dünyayı değiştireceğine inandığınız bir fikriniz var fakat biliyorsunuz ki fikrinizi hayata geçirmek o kadar da kolay değil. Farklı uzmanlıklara sahip birçok kişi ile birlikte bu fikre inanıp, zamanınızı ve paranızı ortaya koyacaksınız. Belki de aylar süren ürün geliştirme sürecinin ardından, beklediğiniz başarı gerçekleşmeyecek. Elbette hiçbirimiz ürünümüzün başarısız olmasını istemeyiz, peki bunu nasıl engelleyebiliriz?

Cevap aslında çok basit! Uygulamayı hemen kodlamaya başlamak yerine Modern Tasarım Süreci’ni takip ederek fikirlerimizi olabildiğince erken süreçte, her aşamada test etmemiz gerekmektedir. Peki, henüz kodları yazılmamış bir uygulamayı nasıl test edebiliriz? Prototip ile! Yani uygulamanızın çalışıyor takliti yapan sahte haliyle test edebilir ve tasarım sürecimizin her aşamasında kullanabiliriz.

Örneğin eskiz aşamasından başlayarak ürünümüzü prototip haline getirebilir ve çalışma arkadaşlarımız ile somut bir prototip üzerinde fikirlerimizi tartışabiliriz. Ayrıca bu prototipleri her aşamada kullanıcılar üzerinde test edebilir ve test sonucunda öğrendiklerimiz ile hatalarımızı düzeltebilir, uygulamamızı daha iyi hale getirebiliriz.

POP, Balsamiq, Flinto, Marvel, InVision, Proto.io, Axure, Keynote, Adobe After Effects, Form, Origami, Framer, Xcode… hepsi birer prototip aracı ve hepsinin amacı aynı olsa da çalışma prensipleri farklılar göstermekte ve bu durum prototip oluşturma sürecine avantaj ve dezavantaj olarak yansımakta.

Örneğin Zaman Akışı (Timeline) çalışma prensipini baz alan araçlar ile birbirinden güzel animasyonlar hazırlayabilir, sunabilir fakat kullanıcı testi yapmakta zorlanabilirsiniz çünkü kullanıcının etkileşimi ile değil zaman ile otomatik bir animasyon geçekleşmektedir.

Zengin Akış (wysiwyg click-through) çalışma prensipini kullanan prototip araçları ile kullanıcının tıkladığı alana göre farklı ekranları görüntülemesini sağlayabilirsiniz, geçişlere animasyon ekleyebilirsiniz. Kullanıcı testleri için mükemmel bir yöntemdir, hızlıdır fakat mobil cihazları farklı kılan basılı tutma, sürükleyip bırakma (Gesture) veya özel animasyonlar oluşturma konusunda sınıfta kalacaklar ve sizi limitleyeceklerdir.

Gesture, özel animasyon gibi özelliklere sahip prototip oluşturmanız, kodlanmış, bitmiş uygulamanıza en yakın sonuçları vereceğinden en gerçekci kabul edilen yöntemdir. Fakat hazırlama süresini uzatabilir. Bu yöntem ile prototip hazırlamak istiyor fakat kod editörü kullanmak istemiyorsanız Bağlamsal Akış (Signal Flow) çalışma prensipini kullanan Form, Quartz Composer + Origami gibi araçları kullanabilirsiniz. Veya kod editörü ile en güçlü prototipleme araçları olan Framer veya xCode’u kullanabilirsiniz.

Dolayısıyla avantajları ve dezavantajlarıyla tasarım sürecinde, içinde bulunduğumuz aşamaya göre prototip aracımız da değişecek ve bir ürünü tasarlarken birden fazla prototip aracı kullanacağız. Bugün sizlerle en güçlü prototipleme araçlarından biri kabul edilen Framer’ı inceleyeceğiz.


Framer

Yüksek kalitede interaktif prototipler, animasyonlar oluşturabileceğiniz Framer, tarayıcıda çalışan açık kaynak ve ücretsiz bir JavaScript frameworkü. Teknik kelimeler sizleri korkutmasın, çünkü Framer tasarımcılar için hazırlanmış bir prototip geliştirme aracı.

Özellikle vurgulamak istediğim konu, static çıktılar veren tasarım araçlarına köprü olan Framer ile interaktiflik üzerinde oynayarak yeni fikirler elde edebilmemiz tasarımcılar için yepyeni bir kapı açmaktadır.

İlham Verici Prototip Örnekleri

Facebook, Google, Stripe, Dropbox ve Instagram gibi birçok şirket tarafından aktif olarak kullanılan Framer ile yapılmış birkaç ilham verici prototip örneği inceleyelim.

Prototip
Prototip
Prototip
Kaynak

Daha fazla örnek incelemek için Framer’ın galeri sayfasını ziyaret edebilirsiniz.

Framer’ın Özellikleri

Framer, kendini JavaScript’e derleyen, okunabilirliği ve sadeliği ile dikkat çeken CoffeeScript dili ile yazılmakta. Daha önce arayüz geliştirme deneyimi olan arkadaşlar Framer’ı zaten bildiklerini farkedecekler, ilk defa kod dünyasına giriş yapanlar ise sadeliğinden dolayı rahat bir öğrenme süreci geçirecekler.

Framer ile oluşturduğunuz interaktif prototiplerde spring fiziği ve 3d animasyonlar kullanabilirsiniz. JavaScript üzerinde çalışmasından dolayı teknolojik anlamda herhangi bir limitasyonu bulunmamaktadır.

Framer’ın özelliklerini ‘Framer Studio Editörü’, ‘Tasarımı İçe Aktarma’, ‘Önizleme, Paylaşım ve Sunum’ ve ‘Modüler Yapı ve Diğer Özellikler’ başlıkları altında inceleyeceğiz.

Framer Studio Editörü

Framer Studio Editörü, Framer.js’i kullanarak daha rahat prototip hazırlamanıza olanak sağlayan $80 ücreti olan ve sadece MAC’te çalışan kod editördür. Ücreti ödemek istemeyenler veya MAC kullanmayan arkadaşlar ise GitHub üzerinde açık kaynak sunulan Framer.js reposunu kullanabilirler.

Framer Studio Editörü, ekranın sol tarafta yazdığınız CoffeeScript’i anlık olarak derleyerek ekranın sağ tarafında dilediğiniz cihaz üzerinde interaktif olarak sonucunu görmenizi sağlar. Editörün diğer özelliklerini farklı bölümlerde incelemeye devam edeceğiz.

Tasarımı İçe Aktarma

Tasarımınızı yaptığınız Sketch ve Photoshop araçları için hazırlanmış olan eklentiler aracılığıyla tek tık ile tasarımınızı saniyeler içinde Framer’a aktarabilir ve dilediğiniz animasyon, etkiletişim üzerinde çalışmaya başlayabilirsiniz.

En önemlisi ise, tasarımınızda bir şey değiştirdiğinizde içe aktarma butonuna yeniden basmanız ile Framer’ı da güncelliyor. Böylece güzel bir geliştirme döngüsüne sahipsiniz.

Önizleme, Paylaşım ve Sunum

Framer, WiFi’daki cihazların erişebileceği localhost linki ile veya Android ve iOS uygulamarı aracılığıyla hazırladığınız çalışmayı dilediğinizden cihazdan görüntülemenizi sağlar ve kullanıcı testlerinde kullanabilirsiniz.

Framer Studio’da sunum moduna geçerek kod editörünü gizleyebilir ve bir toplantıda fikirlerinizi somut bir şekilde, dilediğiniz cihaz önizlemesinde anlatabilirsiniz.

Ayrıca Framer uzaktan çalışanları da tabiki unutmamış, paylaşım özelliği ile birlikte dosyalarınızı Framer’ın bulutuna atabilir ve size özel oluşturacağı link dilediğiniz kişi ile paylaşarak fikirlerini edinebilirsiniz.

Modüler Yapı ve Diğer Özellikler

Framer’a gün geçtikçe yeni özellikler eklemekte ve sürekli gelişmekte.

Modüler Yapı mantığı ile farklı projelerde ortak kullandığınız fonksiyonları, özellikleri paylaşabilirsiniz. Ayrıca diğer geliştiricilerin açık kaynak hazırladığı Flip Card, Slider, Klavye gibi modülleri kendi projenize entegre edebilirsiniz.

Framer prototipleri temel anlamda web teknolojisini ve cihazın kendi özelliklerini birleştirmesinden ötürü sınırsız özelliği sahiptir. Farklı tasarım ekranları arasına geçiş efekti koymaktan öte kullanıcının yaptığı çift dokunuş, sürükleme, basılı tutma gibi tüm gestureları algılayabilir ve bunlara özel etkileşimler sunabilirsiniz. Buna cihazın oryantasyonunu algılamak veya tam fonksiyonel, çalışan bir müzik playerı oluşturmak da dahildir.

Ayrıca veritabanınızdan çektiğiniz gerçek veriyi kullanabilir ve aynı şekilde kullanıcının üreteceği içeriği veritabanınıza yazdırabilirsiniz. Ögeyi denetle (inspect) ile kodlarınızdaki hataları debugging yapabilir, Framer’ın aktif güncellenen dökümanını ve hazır kod parçacıklarını her zaman kullanabilirsiniz.

Framer ile Apple Watch Bildirimi Prototipi

Framer’a hızlı bir giriş için Sketch tasarım aracını kullanarak Apple Watch’a uygun bir bildirim tasarımı yaptık. Amacımız bu iki ekran arasında ortak eleman olarak logoya geçiş animasyonu vermek, ardından ikinci sayfanın scroll etmesini sağlamak ve kullanıcı logoya tekrar tıkladığında uygulamanın ilk duruma geri dönmesi.

Böylece iki ekran arasında tasarıma tad katan, anlamlı bir geçiş sağlıyor olmayı amaçlıyor.

Framer Studio’nun import özelliğini kullanarak tek tık ile Sketch artboardlarımızı aktardık. İkinci ekranımızın scroll edilebilir olmasını sağladık. Kullanıcı ekrana tıkladığında hangi elementlerin ne gibi değişimlere uğrayacaklarını, hangi animasyon özelliklerine (zaman, davranış) sahip olacağını tanımladık. Ve son olarak da hangi elemente tıklandığında bu işlemlerin çalışacağanı tamamlayarak prototipimizi bitirdik.

Framer kaynak dosyası — indir

Sonuç olarak kullanıcının dokunması ve scroll yapmasını algılayabilen ve buna göre özel animasyonların çalıştığı kompleks, interaktif bir Apple Watch uygulaması prototipi oluşturmayı başardık.

Yeni başlayanlar, ilk defa kod yazacak tasarımcılar için Framer’ı öğrenmek sonuç anlamında buna değecek ve ödüllerinici bir uğraştır.

Yıllardır işin yarısını yaparak static uygulamalar tasarladık. Bizler için üretilen, yaptığımız tasarımın interaktifliği üzerinde oynayabileceğimiz araçlar ile birlikte bugün tasarımcı olmak için gerçekten mükemmel bir gün.


Bu içerik ilk olarak 29 Mart 2015 tarihinde WebMagazin.Co sitesinde yayınlanmıştır. Aradan geçen 1 yılın üzerinde süre boyunca Framer prototip aracı üzerinde çeşitli geliştirmeler yapılmış olmasına rağmen, yazının temelindeki mesajların geçerliliğini koruması nedeniyle Medium’a taşınmıştır.

Bu içerik için hazırlamış olduğum Apple Watch Bildirimi Prototipi, Framer ekibinin galeride sergilemek için seçtiği 50 prototip arasında yer almaktadır.

Dilerseniz beni Twitter’dan takip edebilirsiniz veya retweet ederek daha fazla kişiye ulaşması sağlayabilirsiniz:

Teşekkürler.

WebMagazin Co

Daha iyi Türkçe web için!

Rıza Selçuk Saydam

Written by

Product Designer at Facebook

WebMagazin Co

Daha iyi Türkçe web için!