Wireflow: herramienta gratuita en línea y open source para prototipos de flujos de usuario

• Wireflow es una herramienta gratuita en línea para crear rápidamente prototipos de flujos de usuario sin herramientas de diseño complejas ni kits por separado
• Ofrece más de 100 gráficos/tarjetas y 113 flujos, lo que permite combinar al instante elementos web, interacciones y casos de uso comunes
• Admite colaboración en tiempo real y chat en vivo, para invitar a colegas y diseñar flujos juntos dentro de la misma app
• Permite gestionar el acceso a proyectos/salas como público o privado, e incluye funciones básicas de edición como zoom, conectores y deshacer
• Es un prototipo de proyecto paralelo creado en menos de un mes; logró validar la idea, pero aún puede tener posibles bugs

---

Herramienta para empezar rápido a diseñar flujos de usuario

• Wireflow es una herramienta gratuita, en línea y open source para crear prototipos de flujos de usuario
• Su objetivo es permitir la planificación inicial de proyectos y el brainstorming sin comprar Photoshop, Illustrator, wireframes ni kits de flujos de usuario
• Ofrece más de 100 gráficos/tarjetas, que incluyen elementos web, interacciones y casos de uso comunes
• Hay 113 flujos seleccionables, repartidos en 10 categorías
  • All
  • Article
  • Blog
  • Features
  • Gallery
  • Header
  • Misc
  • Multimedia
  • Sign In
  • Social

Colaboración y control de acceso

• Está pensado para la colaboración en tiempo real, por lo que permite invitar a colegas y trabajar juntos en el mismo proyecto
• Con el chat en vivo integrado, es posible conversar con el equipo dentro de la misma app mientras se diseña
• Se pueden definir permisos de acceso por proyecto o sala, y configurar si son públicos o privados

Funciones de edición y composición open source

• Las herramientas básicas de edición ofrecen las funciones necesarias para ubicar y modificar rápidamente flujos de usuario
  • Zoom
  • Conectores y flechas
  • Desplazamiento del canvas
  • Deshacer/rehacer
  • Eliminar encabezado
  • Editar texto del encabezado
  • Traer al frente/enviar al fondo
  • Atajos de teclado
• Wireflow es un proyecto completamente open source y se puede consultar en GitHub
  • Open Source
• Su stack tecnológico está compuesto por Node.js, Meteor.js y React.js
  • Node.js: runtime de JavaScript basado en el motor JavaScript Chrome V8
  • Meteor.js: plataforma para crear apps web y móviles con JavaScript puro
  • React.js: biblioteca declarativa de JavaScript para construir interfaces de usuario

Estado del proyecto

• Es un proyecto paralelo creado rápidamente en paralelo con otros proyectos principales que estaban en curso en ese momento, con un periodo de desarrollo de menos de un mes
• Su estado actual se parece más a un prototipo gratuito que validó una idea de app simple pero útil, y puede contener bugs

[GN⁺]

Comentarios de Hacker News

• A primera vista parece útil, pero no sé si tiene mantenimiento
  La rama main de GitHub no se ha actualizado en años: https://github.com/vanila-io/wireflow

  • Originalmente Wireflow fue hecho con Meteor, y en ese entonces había una forma de guardar datos
    Después se reescribió en React, pero todavía no había una forma de guardar datos, y además surgieron otros proyectos en los que quienes lo mantenían pasaban la mayor parte del tiempo
    Así que me pregunto si hay gente interesada en una herramienta como esta, si hay alguien que quiera contribuir más a Wireflow, o si nuevas novedades sobre herramientas similares podrían generar más interés en mantener Wireflow
    Es algo que pienso como uno de los mantenedores de Wireflow

• Hice clic y empecé a dibujar de inmediato, y pude exportarlo como imagen
  Es genial que no haya inicio de sesión ni registro

  • Está bien que no haya registro
    Pero no entiendo qué significa “dibujar”, ni si se supone que debe haber una herramienta de dibujo real
    Parece más bien un conjunto de plantillas para crear un mapa del sitio, y tampoco me queda claro si es una herramienta que busca abarcar hasta patrones de diseño móvil
    Entiendo que fue hecho en menos de un mes, pero también parece que, si uno aprende durante unos días algo como Principle(https://principle.app/), podría terminar el resto del trabajo en menos de 2 semanas y acabar con un prototipo completo e interactivo

• Se ve genial
  El enlace al video de YouTube en el README de GitHub no abre: https://youtu.be/zm0XbLmXtXY
  Me gustaría ver un video demo más reciente

• Estoy un poco confundido sobre cómo planean distribuir esto
  Lo presentan como una app web instalable, pero en Chrome para Android se ve completamente roto
  No sé qué esperaba al revisarlo desde el teléfono, pero al menos debería poder ejecutarse en una tablet
  En un teléfono su uso quizá no sea editar proyectos sino verlos, y si se va a usar en el trabajo real, uno podría necesitar revisar cambios entre reuniones y responder en un hilo de correo o en un chat de Teams
  Tener que seguir peleando con exportaciones en PDF de la enésima revisión del diseño de una app sería lo peor, y a todo el mundo le molestan esas cosas

• Hace tiempo escribí sobre la idea de crear este tipo de diagramas de flujo basados en wireframes realmente reducidos de forma inteligente: https://medium.com/proof-of-concept/the-story-of-a-true-ux-t...
  Algún día me gustaría poner algo así también en mi pequeña app de UX(https://www.tinyux.app), pero todavía no he podido hacerlo
  Sería genial si pudieras hacer que, sin importar si empiezas desde la perspectiva del flujo, de la página o del componente, al final todo use una misma fuente única de verdad
  Una vez presenté esta visión y este concepto ante un grupo de diseñadores UX y la reacción fue muy buena, pero cuando les mostré un prototipo de comandos de texto estilo Vim para manipular wireframes, todos se quedaron con cara de desconcierto
  Todavía me da risa lo mucho que no coincidieron las expectativas

• ¿Alguien conoce un proyecto similar escrito en Vue.js?

• En la barra lateral de funciones dice permisions, pero parece un error; debería ser permissions

• Se ve realmente útil
  Me pregunto si sería fácil hacer un fork y adaptarlo para íconos de diseño de juegos

  • No entiendo cuál es el propósito de este proyecto
    Puedes agregar pantallas, pero los gráficos son básicos y solo se puede cambiar el texto
    También puedes agregar relaciones entre pantallas, pero no se pueden hacer clic
    Entonces parece un mapa del sitio, ¿o eso es todo?

• ¿Qué es un prototipo de flujo de usuario?

  • Son todos los pasos por los que pasa un usuario para completar una tarea
    Normalmente no es un diseño terminado, sino algo de baja fidelidad como un wireframe, y que lo llamen prototipo probablemente significa que se puede ir avanzando con clics, como en un prototipo de Figma
    Por ejemplo, en un formulario de inicio de sesión podrías mostrar el estado inicial → el estado de error → el estado de envío → el estado de éxito, y a eso podrías llamarlo “flujo de inicio de sesión de usuario”

• “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.”
  No es por ponerse a corregir la gramática, pero si alguien del proyecto está viendo esto, convendría ajustar un poco esa frase