Proto.io ile etkileşimli prototipler oluşturun

Proto.io, başta web ve mobil arayüz tasarımlarınız olmak üzere, mobil cihazların işletim sistemlerine ait UI komponentleri de kullanarak hızlı bir şekilde etkileşimli prototipler oluşturabileceğiniz web tabanlı bir prototipleme aracıdır.

Fatih Akgöze
SHERPA Blog Bülten

--

Hazırladığınız prototipleri paylaşabilir, kullanıcı testlerinde kullanabilirsiniz. Proto.io, iOS ve android uygulamaları sayesinde, hazırladığınız prototipleri mobil cihazlarda bir app gibi çalıştırabilmenize de olanak sağlar.

Künye

Kuruluş yılı: 2011
Menşei: Yunanistan/Atina
Mevcut kullanıcı sayısı: 500.000+

Değer önermesi: Mobil uygulamalardan web sitesi ve akıllı saatlere, farklı boyutlardaki pek çok cihaz için native component’leri kullanarak tasarımlarınızı hızlı bir şekilde etkileşimli prototiplere dönüştürün.

Kategori: Prototipleme, kullanıcı deneyimi, kullanıcı testleri.

Ücretlendirme:

  • Freelancer: $29/aylık | 1 kullanıcı, 5 aktif proje
  • Startup: $49/aylık | 2 kullanıcı, 10 aktif proje
  • Agency: $99/aylık | 5 kullanıcı, 15 aktif proje
  • Corporate: $199/aylık | 10 kullanıcı, 30 aktif proje

Web sitesi: proto.io

Entegrasyonlar

  • Photoshop ve Sketch ile tasarım elementlerinin aktarımını kolaylaştırır. Oluşturduğunuz grup yapısını doğrudan aktarmanızı sağlar.
  • Validately, UserTesting ve Lookback entegrasyonu, online kullanıcı testlerinde oluşturduğunuz prototipleri kullanmanızı sağlar.

SHERPA’da kullanıyor muyuz?: Evet.

Neden kullanıyoruz?: SHERPA’da özellikle high-fidelity wireframe’ler ve basit iş akışına sahip projelerde prototipleme için kullanmayı tercih ediyoruz.

Artıları

  • Photoshop ve Sketch ile entegreasyonu çok iyi çalışıyor. Kullanacağınız plug-in sayesinde, çalışmanızdaki asset’leri doğrudan Proto.io’ya aktarmanızı sağlıyor. İlk aktarım işleminden sonra yapacağınız güncellemelerin hızlı bir şekilde Proto.io üzerinde de güncellenmesini sağlayabiliyorsunuz.
  • Web sitesinden, akıllı saatlere kadar pek çok farklı boyuttaki ekran için hazır şablonları kullanmanıza olanak sağlıyor. Ekran boyutları için kendi hazırladığınız özel ekran ölçülerini de kullanabiliyorsunuz.
  • iOS, Material Design ve Windows için hazır UI kitleri kullanabilmenize olanak sağlıyor.
  • Proto.io üzerinde bütün çalışmayı sürükle-bırak kullanarak kolayca hazırlayabiliyorsunuz. Yazılımla ilgili bir bilgi birikiminiz olmasına gerek yok.
  • Elementleri özelleştirmek için editörü kullanabilirsiniz. Bu editör, bir elementle ilgili CSS ile vermeniz gereken hemen hemen her türlü özelliği düzenleyebilmenize olanak veriyor.
  • Katmanlar halinde kullanılabilmesi, hem Sketch ve Photoshop’la daha uyumlu bir yapıda kullanılabilmesini hem de gruplamayı kullanabilmenizi sağlıyor.
  • Ease, linear, quint gibi on farklı tipteki animasyonları, UI kitlerdeki bütün elemanlar için kullanabilmenizi sağlıyor. Ayrıca bezier ile kendi animasyonunuzu da kullanabilirsiniz.
  • Google Fonts kütüphanesindeki fontlara erişmenize izin veriyor. Varsayılan fontlar haricindeki fontları da projenize dahil edebilirsiniz.

Eksileri

  • Drag&Drop yapıda olması her ne kadar kullanım açısından basitlik sağlasa da daha karmaşık yapılar için hazırladığınız prototiplerde size ekrandaki elementlerin yerleşimi konusunda sorun çıkarabiliyor. Özellikle farklı koşullarda ekrandaki elementlerin değişiklik göstermesi gereği söz konusu olduğunda yerleşimle ilgili hatalar oluşabiliyor.
  • Projenin HTML olarak çıktısını alabilmek imkanınız olsa da bu çıktıyı aldıktan sonra üzerinde değişiklik yapmanıza izin vermiyor.
  • CSS ve/veya JS kullanarak, Proto.io içindeki elementlere müdahale etmenize izin vermiyor. CSS konusunda editör fazlasıyla yeterli olsa da çok basit bir şekilde çözebileceğiniz bazı sorunlara müdahale edememenize sebep oluyor. Bunu çözebilmek için, değişkenler ve koşullu ifadeler için hazırlanan bir yapı var. Ancak bu yapı çok kullanışlı değil ve yapıyı anlamanız ve uygulama şekillerini öğrenebilmeniz için biraz zaman gerekiyor.

Ekran Görüntüleri

Proto.io dashboard
Proto.io interaktivite ekleme sihirbazı
Proto.io editör eklentileri
Proto.io animasyon zamanlama ayarları
Proto.io önizleme ekranı

Proto.io özellikle mobil ve tablet cihazlar için geliştirilen uygulamaların prototiplerin hazırlanması için oldukça ideal bir web uygulaması. Aynı şekilde basit bir iş akışına sahip web siteleri/uygulamaları için de rahatlıkla kullanabileceğiniz bir prototip aracı. Ancak daha karmaşık süreçlere sahip bir uygulama için bazen kullanıcı deneyimini ciddi olarak etkileyebilecek çıkmazlara girmenize sebep olabiliyor.

Editörün kullanım basitliği, özellikle yeni başlayanlar için hızlı adaptasyon sağlasa da, özellikle değişkenler ve koşullu ifadelerin kullanımı konusunda başlangıç aşamasında sıkıntı yaşayabilirsiniz. Bu sorunu aşmanız için sunulan örnekleri inceleyebilir, bunları kendi profilinize kopyalayabilirsiniz.

Originally published at sherpa.blog on July 26, 2017.

--

--