Wireflow: ferramenta online gratuita e open source para protótipos de fluxo de usuário

• Wireflow é uma ferramenta online gratuita que permite criar rapidamente protótipos de fluxo de usuário sem ferramentas de design complexas nem kits separados
• Oferece mais de 100 gráficos/cartões e 113 fluxos, permitindo combinar imediatamente elementos da web, interações e casos de uso comuns
• Suporta colaboração em tempo real e chat ao vivo, para convidar colegas e projetar fluxos juntos no mesmo app
• É possível gerenciar permissões de acesso por projeto/sala como públicas ou privadas, e a ferramenta inclui funções básicas de edição como zoom, conectores e desfazer
• É um protótipo com perfil de projeto paralelo criado em menos de um mês; teve sucesso em validar a ideia, mas ainda pode conter bugs

---

Ferramenta para começar rapidamente o design de fluxos de usuário

• Wireflow é uma ferramenta gratuita, online e open source para criar protótipos de fluxo de usuário
• O objetivo é permitir planejamento inicial de projetos e brainstorming sem precisar comprar Photoshop, Illustrator, kits de wireframe ou kits de fluxo de usuário
• Oferece mais de 100 gráficos/cartões, incluindo elementos da web, interações e casos de uso comuns
• Há 113 fluxos disponíveis para seleção, distribuídos em 10 categorias
  • All
  • Article
  • Blog
  • Features
  • Gallery
  • Header
  • Misc
  • Multimedia
  • Sign In
  • Social

Colaboração e controle de acesso

• Com foco em colaboração em tempo real, é possível convidar colegas para trabalhar juntos no mesmo projeto
• Com o chat ao vivo integrado, também é possível conversar com a equipe dentro do mesmo app durante o design
• É possível definir permissões de acesso por projeto ou sala e configurar se serão públicas ou privadas

Recursos de edição e composição open source

• As ferramentas básicas de edição oferecem os recursos necessários para posicionar e ajustar rapidamente fluxos de usuário
  • Zoom
  • Conectores e setas
  • Movimentação da tela
  • Desfazer/refazer
  • Remoção de cabeçalho
  • Edição do texto do cabeçalho
  • Trazer para frente/enviar para trás
  • Atalhos de teclado
• Wireflow é um projeto totalmente open source e pode ser visto no GitHub
  • Open Source
• A stack tecnológica é composta por Node.js, Meteor.js e React.js
  • Node.js: runtime de JavaScript baseado no motor JavaScript V8 do Chrome
  • Meteor.js: plataforma para criar apps web e mobile com JavaScript puro
  • React.js: biblioteca declarativa de JavaScript para construir interfaces de usuário

Estado do projeto

• Na época, era um projeto paralelo feito rapidamente em conjunto com outros projetos principais em andamento, com menos de um mês de desenvolvimento
• O estado atual está mais próximo de um protótipo gratuito que validou uma ideia de app simples, porém útil, e ainda pode ter bugs

[GN⁺]

Comentários do Hacker News

• À primeira vista parece útil, mas não sei se está recebendo manutenção
  O branch main no GitHub não é atualizado há anos: https://github.com/vanila-io/wireflow

  • Originalmente, o Wireflow foi feito com Meteor, e naquela época havia uma forma de salvar dados
    Depois ele foi reescrito em React, mas ainda não havia uma forma de salvar dados, e os mantenedores também passaram a ter outros projetos que consomem a maior parte do tempo deles
    Então fico curioso para saber se há pessoas interessadas nesse tipo de ferramenta, se alguém gostaria de contribuir mais com o Wireflow, e se novidades sobre ferramentas semelhantes poderiam gerar mais interesse na manutenção do Wireflow
    É uma reflexão minha como um dos mantenedores do Wireflow

• Cliquei e comecei a desenhar na hora, e consegui exportar como imagem
  Sem login nem cadastro — isso é ótimo

  • É bom não precisar de cadastro
    Mas não sei o que “desenhar” quer dizer, e fico me perguntando se deveria haver uma ferramenta de desenho de verdade
    Parece um conjunto de templates para criar um sitemap, e também não sei se a ferramenta pretende abranger padrões de design mobile
    Entendo que foi feito em menos de um mês, mas parece que, se você aprender algo como o Principle(https://principle.app/) por alguns dias, poderia terminar o restante do trabalho em duas semanas e, no fim, criar um protótipo interativo em escala completa

• Parece legal
  O link do vídeo do YouTube no README do GitHub não abre: https://youtu.be/zm0XbLmXtXY
  Gostaria de ver um vídeo de demonstração mais recente

• Estou um pouco confuso sobre como pretendem distribuir isso
  É apresentado como um web app instalável, mas no Chrome para Android parece totalmente quebrado
  Não sei o que eu esperava ao conferir pelo celular, mas acho que pelo menos deveria rodar em um tablet
  No celular, o uso poderia ser mais para visualizar do que para editar projetos, e, em um uso real de trabalho, talvez seja preciso revisar mudanças entre reuniões e responder a threads de e-mail ou conversas no Teams
  Se você tiver que ficar lidando com exportações em PDF da enésima revisão do design do app, é o pior cenário, e todo mundo odeia isso

• Na verdade, já escrevi antes sobre a ideia de criar esse tipo de fluxograma com base em wireframes inteligentemente reduzidos: https://medium.com/proof-of-concept/the-story-of-a-true-ux-t...
  Um dia eu gostaria de colocar isso também no meu pequeno app de UX(https://www.tinyux.app), mas ainda não mexi nisso
  Seria muito legal se fosse possível fazer com que, independentemente de você começar pela perspectiva de fluxos, páginas ou componentes, tudo acabasse usando a mesma fonte única da verdade
  Quando apresentei essa visão e esse conceito em um encontro de designers de UX, a reação foi muito boa; mas, quando mostrei um protótipo com comandos de texto no estilo Vim para manipular wireframes, todo mundo ficou com cara de paisagem
  Ainda acho engraçado como as expectativas estavam tão desalinhadas

• Alguém conhece um projeto parecido escrito em Vue.js?

• Na barra lateral de recursos está escrito permisions, mas parece um erro de digitação de permissions

• Parece realmente útil
  Fico curioso se seria fácil fazer um fork e adaptar para ícones de design de jogos

  • Não sei qual é o propósito deste projeto
    Dá para adicionar telas, mas são gráficos básicos e só dá para mudar o texto
    Também dá para adicionar relações entre telas, mas elas não são clicáveis
    Então parece um sitemap; é só isso?

• O que é um protótipo de fluxo de usuário?

  • São todas as etapas pelas quais um usuário passa para concluir uma tarefa
    Normalmente é algo de baixa fidelidade, como um wireframe, em vez de um design finalizado; e “protótipo” provavelmente quer dizer que dá para clicar e navegar, como em um protótipo do Figma
    Por exemplo, em um formulário de login, você poderia mostrar o estado inicial → estado de erro → estado de envio → estado de sucesso, e chamar isso de “fluxo de login do usuário”

• “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.”
  Não quero ficar apontando erros de gramática, mas, se alguém envolvido estiver vendo, seria bom dar uma ajustada nessa frase