Wireflow: यूज़र फ्लो प्रोटोटाइप के लिए मुफ़्त ऑनलाइन open source टूल

 (wireflow.co)
4 पॉइंट द्वारा GN⁺ 2023-12-21 | 1 टिप्पणियां | WhatsApp पर शेयर करें
  • Wireflow एक मुफ़्त ऑनलाइन टूल है, जिससे जटिल design tools या अलग kits के बिना user flow prototypes जल्दी बनाए जा सकते हैं
  • यह 100 से अधिक graphics/cards और 113 flows देता है, ताकि web elements, interactions और आम use cases को तुरंत जोड़ा जा सके
  • यह real-time collaboration और live chat सपोर्ट करता है, जिससे colleagues को invite कर उसी ऐप के अंदर flows को साथ मिलकर design किया जा सकता है
  • project/room access permissions को public या private के रूप में manage किया जा सकता है, और इसमें zoom in/out, connectors, undo जैसी बुनियादी editing features हैं
  • यह एक side-project किस्म का prototype है, जिसे एक महीने से कम समय में बनाया गया था; idea validation सफल रहा, लेकिन bugs की संभावना बाकी है

user flow design जल्दी शुरू करने वाला टूल

  • Wireflow user flow prototypes बनाने के लिए एक मुफ़्त, ऑनलाइन और open source टूल है
  • इसका लक्ष्य शुरुआती project planning और brainstorming को संभव बनाना है, बिना Photoshop, Illustrator, wireframe या user flow kits खरीदे
  • यह 100 से अधिक graphics/cards देता है, जिनमें web elements, interactions और आम use cases शामिल हैं
  • चुने जा सकने वाले flows 113 हैं, जिन्हें 10 categories में से चुना जा सकता है
    • All
    • Article
    • Blog
    • Features
    • Gallery
    • Header
    • Misc
    • Multimedia
    • Sign In
    • Social

collaboration और access control

  • real-time collaboration को ध्यान में रखते हुए colleagues को invite कर एक ही project में साथ काम किया जा सकता है
  • built-in live chat के ज़रिए design करते समय भी उसी ऐप के अंदर team members से बातचीत की जा सकती है
  • project या room स्तर पर access permissions तय किए जा सकते हैं, और public/private status सेट किया जा सकता है

editing features और open source संरचना

  • बुनियादी editing tools user flows को जल्दी arrange और modify करने के लिए ज़रूरी features देते हैं
    • zoom in/out
    • connectors और arrows
    • canvas movement
    • undo/redo
    • header हटाना
    • header text edit करना
    • आगे लाना/पीछे भेजना
    • keyboard shortcuts
  • Wireflow पूरी तरह open source project है और GitHub पर देखा जा सकता है
  • tech stack Node.js, Meteor.js, React.js से बना है
    • Node.js: Chrome V8 JavaScript engine पर आधारित JavaScript runtime
    • Meteor.js: pure JavaScript में web और mobile apps बनाने के लिए platform
    • React.js: user interfaces बनाने के लिए declarative JavaScript library

project status

  • यह उस समय चल रहे दूसरे प्रमुख projects के साथ-साथ जल्दी बनाया गया side project है, और development period एक महीने से कम था
  • मौजूदा स्थिति एक ऐसे free prototype जैसी है जिसने सरल लेकिन उपयोगी app idea को validate किया है, और इसमें bugs हो सकते हैं

संबंधित पढ़ाई

1 टिप्पणियां

 
GN⁺ 2023-12-21
Hacker News टिप्पणियाँ

  • पहली नज़र में उपयोगी लगता है, लेकिन पता नहीं इसका maintenance हो रहा है या नहीं
    GitHub की main branch कई सालों से update नहीं हुई है: https://github.com/vanila-io/wireflow

    • मूल Wireflow Meteor में बनाया गया था, और तब data save करने का एक तरीका था
      बाद में इसे React में फिर से लिखा गया, लेकिन तब भी data save करने का कोई तरीका नहीं था, और maintainers के पास ऐसे दूसरे projects भी आ गए जिन पर उनका ज़्यादातर समय जाता है
      इसलिए सोचता हूँ कि क्या अभी भी ऐसे tool में रुचि रखने वाले लोग हैं, क्या कोई Wireflow में ज़्यादा योगदान देना चाहता है, और क्या ऐसे मिलते-जुलते tools की नई ख़बरें Wireflow maintenance में बड़ी रुचि पैदा कर सकती हैं
      Wireflow के maintainers में से एक होने के नाते यही सोच रहा हूँ

  • मैंने क्लिक किया और तुरंत ड्रॉ करना शुरू कर दिया, और इसे image के रूप में export भी कर पाया
    ना login, ना signup — यह सच में बहुत अच्छा है

    • signup न होना अच्छा है
      लेकिन मुझे समझ नहीं आ रहा कि “ड्रॉ करना” से क्या मतलब है, और क्या इसमें सचमुच कोई drawing tool होना चाहिए
      यह sitemap बनाने के लिए templates के bundle जैसा लगता है, लेकिन पता नहीं क्या यह mobile design patterns तक को कवर करने वाला tool है
      एक महीने से भी कम समय में इसे बनाया गया है, यह समझता हूँ, लेकिन अगर Principle(https://principle.app/) जैसी चीज़ पर कुछ दिन लगा दिए जाएँ, तो लगता है बाकी काम 2 हफ्तों में पूरा किया जा सकता है और अंत में एक interactive full-scale prototype भी बनाया जा सकता है

  • शानदार लग रहा है
    GitHub README में दिया गया YouTube video link नहीं खुल रहा: https://youtu.be/zm0XbLmXtXY
    नया demo video देखना चाहूँगा

  • इसे deploy कैसे करना है, इस पर थोड़ा confusion है
    इसे installable web app की तरह पेश किया गया है, लेकिन Android के Chrome में यह पूरी तरह टूटा हुआ लगता है
    फ़ोन पर देखकर मैंने क्या उम्मीद की थी, यह तो नहीं जानता, लेकिन कम-से-कम tablet पर तो इसे चलना चाहिए
    फ़ोन पर इसका उपयोग editing के बजाय शायद viewing के लिए हो सकता है, और अगर इसे असली काम में इस्तेमाल करना है तो meetings के बीच changes review करने पड़ सकते हैं और email thread या Teams chat का जवाब भी देना पड़ सकता है
    अगर app design के nवें revision की PDF export के साथ ही जूझते रहना पड़े, तो वह सबसे बुरा होगा, और ऐसी चीज़ सबको नापसंद है

  • इस तरह के flowchart को वास्तव में smartly scaled-down wireframe के आधार पर बनाने के विचार पर मैंने पहले एक लेख लिखा था: https://medium.com/proof-of-concept/the-story-of-a-true-ux-t...
    कभी-न-कभी मैं अपने छोटे UX app(https://www.tinyux.app) में भी ऐसा कुछ जोड़ना चाहता हूँ, लेकिन अभी तक उस पर काम नहीं कर पाया
    अगर flow, page, या component — किसी भी नज़रिए से शुरू करने पर — अंत में सबको एक ही single source of truth इस्तेमाल करने दिया जा सके, तो वह वाकई शानदार होगा
    पहले जब मैंने UX designers की एक gathering में यह vision और concept पेश किया था, तो प्रतिक्रिया बहुत अच्छी थी, लेकिन जैसे ही मैंने wireframe को manipulate करने वाले Vim-style text commands का prototype दिखाया, सबके चेहरे blank हो गए
    expectations का वह mismatch आज भी मुझे मज़ेदार लगता है

  • क्या किसी को ऐसा मिलता-जुलता project पता है जो Vue.js में लिखा गया हो?

  • feature sidebar में permisions लिखा है, लगता है यह permissions की typo है

  • यह सच में उपयोगी लग रहा है
    सोच रहा हूँ कि क्या इसे fork करके game design icons के लिए बनाना आसान होगा

    • मुझे समझ नहीं आता कि इस project का उद्देश्य क्या है
      आप screens जोड़ सकते हैं, लेकिन वे basic graphics हैं और सिर्फ text बदला जा सकता है
      screens के बीच relationships भी जोड़ सकते हैं, लेकिन उन पर click नहीं किया जा सकता
      तो यह sitemap जैसा लगता है, क्या बस यही है?

  • user flow prototype क्या होता है?

    • यह वे सारे steps हैं जिनसे user किसी task को पूरा करने के लिए गुजरता है
      आम तौर पर यह finished design नहीं होता, बल्कि wireframe जैसा low-fidelity रूप होता है, और prototype का मतलब शायद यह है कि Figma prototype की तरह इस पर click करके आगे बढ़ा जा सके
      उदाहरण के लिए, login form में initial state → error state → submitting state → success state दिखाया जा सकता है, और इसे “user login flow” कहा जा सकता है

  • “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.”
    मैं grammar की शिकायत नहीं कर रहा, लेकिन अगर संबंधित लोग यह देख रहे हों तो इस वाक्य को थोड़ा सुधार लेना अच्छा होगा