Wireflow: kullanıcı akışı prototipleri için ücretsiz çevrimiçi açık kaynak araç

• Wireflow, karmaşık tasarım araçları ya da ayrı kitler olmadan kullanıcı akışı prototiplerini hızlıca oluşturmayı sağlayan ücretsiz bir çevrimiçi araçtır
• 100'den fazla grafik/kart ve 113 akış sunarak web öğelerini, etkileşimleri ve yaygın kullanım senaryolarını hemen birleştirmeye olanak tanır
• Gerçek zamanlı iş birliği ve canlı sohbet desteği sayesinde ekip arkadaşlarınızı davet edip aynı uygulama içinde akışları birlikte tasarlayabilirsiniz
• Proje/oda erişim izinleri herkese açık veya özel olarak yönetilebilir; ayrıca yakınlaştırma/uzaklaştırma, bağlayıcılar ve geri alma gibi temel düzenleme işlevlerine sahiptir
• Bir aydan kısa sürede hazırlanmış yan proje niteliğinde bir prototiptir; fikir doğrulamada başarılı olsa da hata olasılığı hâlâ vardır

---

Kullanıcı akışı tasarımına hızlı başlamak için bir araç

• Wireflow, kullanıcı akışı prototipleri oluşturmak için ücretsiz, çevrimiçi ve açık kaynak bir araçtır
• Amaç; Photoshop, Illustrator, wireframe veya kullanıcı akışı kitleri satın almadan ilk proje planlamasını ve beyin fırtınasını mümkün kılmaktır
• Web öğeleri, etkileşimler ve yaygın kullanım senaryolarını içeren 100'den fazla grafik/kart sunar
• Seçilebilen akış sayısı 113 olup 10 kategoriden seçilebilir
  • All
  • Article
  • Blog
  • Features
  • Gallery
  • Header
  • Misc
  • Multimedia
  • Sign In
  • Social

İş birliği ve erişim kontrolü

• Gerçek zamanlı iş birliği odaklıdır; ekip arkadaşlarınızı davet ederek aynı projede birlikte çalışabilirsiniz
• Yerleşik canlı sohbet ile tasarım sırasında da aynı uygulama içinde ekip üyeleriyle konuşmak mümkündür
• Proje veya oda bazında erişim izinleri belirlenebilir, herkese açık/özel ayarı yapılabilir

Düzenleme özellikleri ve açık kaynak yapısı

• Temel düzenleme araçları, kullanıcı akışlarını hızlıca yerleştirip değiştirmek için gereken işlevleri sunar
  • Yakınlaştırma/uzaklaştırma
  • Bağlayıcılar ve oklar
  • Tuval üzerinde gezinme
  • Geri alma/yeniden yapma
  • Başlığı kaldırma
  • Başlık metnini düzenleme
  • Öne getirme/arkaya gönderme
  • Klavye kısayolları
• Wireflow tamamen açık kaynak bir projedir ve GitHub'da incelenebilir
  • Open Source
• Teknoloji yığını Node.js, Meteor.js ve React.js'den oluşur
  • Node.js: Chrome V8 JavaScript motoru tabanlı JavaScript çalışma zamanı
  • Meteor.js: Saf JavaScript ile web ve mobil uygulamalar oluşturmak için bir platform
  • React.js: Kullanıcı arayüzleri oluşturmak için bildirimsel bir JavaScript kütüphanesi

Proje durumu

• O dönemde yürütülen diğer büyük projelerle paralel olarak hızla hazırlanmış bir yan projedir ve geliştirme süresi bir aydan kısadır
• Mevcut durumu, basit ama faydalı bir uygulama fikrini doğrulamış ücretsiz bir prototipe daha yakındır ve hatalar içerebilir

[GN⁺]

Hacker News yorumları

• İlk bakışta kullanışlı görünüyor ama bakımı yapılıyor mu emin değilim
  GitHub’daki main dalı yıllardır güncellenmemiş: https://github.com/vanila-io/wireflow

  • Wireflow aslında Meteor ile yapılmıştı ve o dönemde verileri kaydetmenin bir yolu vardı
    Daha sonra React ile yeniden yazıldı ama hâlâ veri kaydetme yöntemi yoktu; bakımcıların zamanının çoğunu alan başka projeler de ortaya çıktı
    Bu yüzden böyle bir araca ilgi duyan var mı, Wireflow’a daha fazla katkı yapmak isteyen var mı, benzer araçlarla ilgili yeni haberler Wireflow’un bakımına daha fazla ilgi doğurabilir mi merak ediyorum
    Bunu Wireflow bakımcılarından biri olarak düşünüyorum

• Tıklayıp hemen çizmeye başladım ve görsel olarak dışa aktarabildim
  Giriş de yok, kayıt da yok; gerçekten harika

  • Kayıt olmaması güzel
    Ama “çizmek” ne anlama geliyor anlamadım; gerçekten bir çizim aracı olması mı gerekiyor merak ediyorum
    Site haritası oluşturmak için bir şablon paketi gibi görünüyor; mobil tasarım kalıplarını da kapsamak isteyen bir araç mı, onu da bilmiyorum
    Bir aydan kısa sürede yapıldığını anlıyorum ama Principle(https://principle.app/) gibi bir şeyi birkaç gün öğrenirseniz kalan işi 2 hafta içinde bitirip sonunda etkileşimli, tam ölçekli bir prototip de çıkarabilecekmişsiniz gibi görünüyor

• Havalı görünüyor
  GitHub README içindeki YouTube video bağlantısı açılmıyor: https://youtu.be/zm0XbLmXtXY
  Güncel bir demo videosu görmek isterim

• Bunu nasıl dağıtmayı düşündükleri konusunda biraz kafam karıştı
  Kurulabilir bir web uygulaması gibi tanıtılıyor ama Android için Chrome’da tamamen bozuk görünüyor
  Telefonda kontrol ederken ne beklediğimi bilmiyorum ama en azından tablette çalıştırılabilmesi gerektiğini düşünüyorum
  Telefondaki kullanım amacı proje düzenlemek değil, daha çok görüntülemek olabilir; gerçek işte kullanmak için toplantılar arasında değişiklikleri gözden geçirip e-posta zincirlerine veya Teams sohbetlerine yanıt vermek gerekebilir
  Uygulama tasarımının n’inci revizyonuna ait PDF dışa aktarımlarıyla sürekli uğraşmak zorunda kalırsanız bu berbat olur ve herkes bundan nefret eder

• Gerçekten zekice küçültülmüş wireframe’lere dayanarak böyle akış diyagramları oluşturma fikri hakkında daha önce yazmıştım: https://medium.com/proof-of-concept/the-story-of-a-true-ux-t...
  Bir gün küçük UX uygulamama(https://www.tinyux.app) da bunu eklemek istiyorum ama henüz el atamadım
  Akış, sayfa veya bileşen perspektiflerinden hangisiyle başlarsanız başlayın, sonunda aynı tek doğruluk kaynağını kullandırabilirseniz gerçekten harika olurdu
  Eskiden UX tasarımcılarının bir araya geldiği bir etkinlikte bu vizyonu ve kavramı sunduğumda tepkiler çok iyiydi; ama wireframe’leri manipüle eden Vim tarzı metin komutları prototipini gösterince herkes boş boş baktı
  Beklentilerin bu kadar farklı çıkması hâlâ komiğime gidiyor

• Benzer projeler arasında Vue.js ile yazılmış olanını bilen var mı?

• Özellikler yan çubuğunda permisions yazıyor; permissions için yazım hatası gibi görünüyor

• Gerçekten kullanışlı görünüyor
  Forklayıp oyun tasarımı ikonları için uyarlamak kolay olur mu merak ediyorum

  • Bu projenin amacının ne olduğunu bilmiyorum
    Ekran ekleyebiliyorsunuz ama temel grafikler var ve sadece metni değiştirebiliyorsunuz
    Ekranlar arasındaki ilişkileri de ekleyebiliyorsunuz ama tıklanabilir değiller
    Bu yüzden site haritası gibi görünüyor; hepsi bu mu?

• Kullanıcı akışı prototipi nedir?

  • Kullanıcının bir işi tamamlamak için geçtiği tüm adımlar
    Genellikle tamamlanmış tasarım değil, wireframe gibi düşük sadakatli bir biçimdedir; prototip denmesi de muhtemelen Figma prototipi gibi tıklayarak gezilebildiği anlamına gelir
    Örneğin bir giriş formu için başlangıç durumu → hata durumu → gönderiliyor durumu → başarı durumu gösterilebilir; buna “kullanıcı giriş akışı” denebilir

• “It have built in live chat which give you ability to communicate with your team mate and still be in the same app while you collaborating in real-time.”
  Dilbilgisi düzeltmesi yapmak niyetinde değilim ama ilgili biri görüyorsa bu cümleyi biraz düzeltmek iyi olur