Wireflow: Kostenloses Online-Open-Source-Tool für Prototypen von User Flows

 (wireflow.co)
4 Punkte von GN⁺ 2023-12-21 | 1 Kommentare | Auf WhatsApp teilen
  • Wireflow ist ein kostenloses Online-Tool, mit dem sich Prototypen von User Flows schnell erstellen lassen – ohne komplexe Design-Tools oder separate Kits
  • Es bietet mehr als 100 Grafiken/Karten und 113 Flows, sodass sich Web-Elemente, Interaktionen und gängige Use Cases direkt kombinieren lassen
  • Mit Echtzeit-Zusammenarbeit und Live-Chat können Kolleginnen und Kollegen eingeladen und Flows gemeinsam in derselben App entworfen werden
  • Zugriffsrechte für Projekte/Räume lassen sich öffentlich oder privat verwalten; grundlegende Bearbeitungsfunktionen wie Zoom, Connectoren und Rückgängig sind vorhanden
  • Ein Side-Project-Prototyp, der in weniger als einem Monat entstanden ist: Die Idee wurde erfolgreich validiert, es können aber weiterhin Bugs vorhanden sein

Tool für den schnellen Einstieg in das Design von User Flows

  • Wireflow ist ein kostenloses, online verfügbares Open-Source-Tool zum Erstellen von Prototypen für User Flows
  • Ziel ist es, frühe Projektplanung und Brainstorming zu ermöglichen, ohne Photoshop, Illustrator, Wireframe- oder User-Flow-Kits kaufen zu müssen
  • Es stellt mehr als 100 Grafiken/Karten bereit und umfasst Web-Elemente, Interaktionen sowie gängige Use Cases
  • Zur Auswahl stehen 113 Flows in 10 Kategorien
    • All
    • Article
    • Blog
    • Features
    • Gallery
    • Header
    • Misc
    • Multimedia
    • Sign In
    • Social

Zusammenarbeit und Zugriffskontrolle

  • Auf Echtzeit-Zusammenarbeit ausgelegt: Kolleginnen und Kollegen können eingeladen werden, um gemeinsam am selben Projekt zu arbeiten
  • Über den integrierten Live-Chat kann das Team auch während des Designs innerhalb derselben App kommunizieren
  • Zugriffsrechte lassen sich auf Projekt- oder Raumebene festlegen, einschließlich der Einstellung, ob sie öffentlich oder privat sind

Bearbeitungsfunktionen und Open-Source-Aufbau

  • Die grundlegenden Bearbeitungswerkzeuge bieten die Funktionen, die nötig sind, um User Flows schnell zu platzieren und anzupassen
    • Zoom
    • Connectoren und Pfeile
    • Canvas verschieben
    • Rückgängig/Wiederholen
    • Header entfernen
    • Header-Text bearbeiten
    • Nach vorne bringen/Nach hinten senden
    • Tastenkürzel
  • Wireflow ist ein vollständig Open Source Projekt und auf GitHub einsehbar
  • Der Tech-Stack besteht aus Node.js, Meteor.js und React.js
    • Node.js: JavaScript-Runtime auf Basis der Chrome-V8-JavaScript-Engine
    • Meteor.js: Plattform zum Erstellen von Web- und Mobile-Apps mit reinem JavaScript
    • React.js: Deklarative JavaScript-Bibliothek zum Aufbau von Benutzeroberflächen

Projektstatus

  • Ein schnell entwickeltes Side Project, das parallel zu anderen damals laufenden größeren Projekten entstand; die Entwicklungszeit lag bei weniger als einem Monat
  • Der aktuelle Zustand entspricht eher einem kostenlosen Prototyp, der eine einfache, aber nützliche App-Idee validiert hat; es können Bugs vorhanden sein

Verwandte Beiträge

1 Kommentare

 
GN⁺ 2023-12-21
Meinungen auf Hacker News

  • Auf den ersten Blick wirkt es nützlich, aber ich weiß nicht, ob es gewartet wird.
    Der main-Branch auf GitHub wurde seit Jahren nicht aktualisiert: https://github.com/vanila-io/wireflow

    • Wireflow wurde ursprünglich mit Meteor gebaut, und damals gab es eine Möglichkeit, Daten zu speichern.
      Später wurde es mit React neu geschrieben, aber es gab immer noch keine Möglichkeit zur Datenspeicherung, und die Maintainer hatten inzwischen andere Projekte, die den Großteil ihrer Zeit beanspruchten.
      Deshalb frage ich mich, ob es Leute gibt, die an so einem Tool interessiert sind, ob jemand mehr zu Wireflow beitragen möchte und ob neue Entwicklungen rund um ähnliche Tools wieder mehr Interesse an der Wartung von Wireflow wecken könnten.
      Das sind Gedanken von mir als einem der Maintainer von Wireflow.

  • Ich habe daraufgeklickt und konnte sofort mit dem Zeichnen beginnen und als Bild exportieren.
    Kein Login und keine Registrierung – wirklich schön.

    • Dass es keine Registrierung gibt, ist gut.
      Aber ich weiß nicht, was mit „Zeichnen“ gemeint ist, und frage mich, ob es dafür ein echtes Zeichenwerkzeug geben sollte.
      Es wirkt wie eine Sammlung von Templates zum Erstellen einer Sitemap, aber ich weiß auch nicht, ob das Tool auch mobile Design Patterns abdecken will.
      Ich verstehe, dass es in weniger als einem Monat gebaut wurde, aber wenn man ein paar Tage in etwas wie Principle (https://principle.app/) investiert, sieht es so aus, als könnte man den Rest in zwei Wochen fertigstellen und am Ende einen vollständig interaktiven Prototyp im vollen Umfang haben.

  • Sieht cool aus.
    Der YouTube-Link im GitHub-README lässt sich nicht öffnen: https://youtu.be/zm0XbLmXtXY
    Ich würde gern ein aktuelles Demo-Video sehen.

  • Ich bin etwas verwirrt, wie das bereitgestellt werden soll.
    Es wird wie eine installierbare Web-App vorgestellt, sieht aber in Chrome für Android komplett kaputt aus.
    Ich weiß nicht, was ich erwartet habe, als ich es auf dem Handy ausprobiert habe, aber zumindest auf einem Tablet sollte es meiner Meinung nach laufen.
    Auf dem Handy könnte der Nutzen eher im Anschauen als im Bearbeiten von Projekten liegen, und wenn man es im Arbeitsalltag verwenden will, muss man Änderungen vielleicht zwischen Meetings prüfen und auf E-Mail-Threads oder Teams-Chats antworten.
    Wenn man sich ständig mit PDF-Exporten der x-ten Überarbeitung eines App-Designs herumschlagen muss, ist das der Worst Case, und alle hassen so etwas.

  • Ich habe früher tatsächlich einmal über die Idee geschrieben, solche Flowcharts auf Basis clever verkleinerter Wireframes zu erstellen: https://medium.com/proof-of-concept/the-story-of-a-true-ux-t...
    Irgendwann möchte ich so etwas auch in meine kleine UX-App (https://www.tinyux.app) einbauen, bin aber noch nicht dazu gekommen.
    Es wäre wirklich großartig, wenn man dafür sorgen könnte, dass man am Ende dieselbe Single Source of Truth verwendet, egal ob man aus der Perspektive von Flows, Seiten oder Komponenten startet.
    Als ich diese Vision und das Konzept früher einmal vor einer Gruppe von UX-Designern vorgestellt habe, war die Reaktion sehr positiv; als ich dann aber einen Prototyp mit Vim-artigen Textbefehlen zur Manipulation von Wireframes zeigte, starrten mich alle nur verständnislos an.
    Ich finde es immer noch lustig, wie weit die Erwartungen damals auseinanderlagen.

  • Kennt jemand ein ähnliches Projekt, das mit Vue.js geschrieben ist?

  • In der Feature-Sidebar steht permisions; das sieht nach einem Tippfehler für permissions aus.

  • Sieht wirklich nützlich aus.
    Ich frage mich, ob es einfach wäre, es zu forken und für Game-Design-Icons anzupassen.

    • Ich verstehe nicht, was der Zweck dieses Projekts ist.
      Man kann Screens hinzufügen, aber sie bestehen aus Standardgrafiken und man kann nur den Text ändern.
      Man kann auch Beziehungen zwischen Screens hinzufügen, aber sie sind nicht anklickbar.
      Also sieht es wie eine Sitemap aus – ist das alles?

  • Was ist ein Prototyp für User Flows?

    • Das sind alle Schritte, die ein Nutzer durchläuft, um eine Aufgabe abzuschließen.
      Normalerweise ist das keine fertige Gestaltung, sondern eine Low-Fidelity-Form wie Wireframes; „Prototyp“ bedeutet vermutlich, dass man sich wie bei einem Figma-Prototyp durchklicken kann.
      Bei einem Login-Formular könnte man zum Beispiel den Ausgangszustand → Fehlerzustand → Absendezustand → Erfolgszustand zeigen, und so etwas könnte man einen „User-Login-Flow“ nennen.

  • „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.“
    Ich will nicht die Grammatikpolizei spielen, aber falls jemand vom Projekt mitliest, wäre es gut, diesen Satz etwas zu überarbeiten.