return to table of content

Wireflow – free, online, open source tool for creating user-flow prototypes

gervwyk
12 replies
21h34m

What tools are others using to build these wireflows? We find figma too detailed and mockup does not quite get us there (not sure why).

Any recommendations?

vanviegen
1 replies
18h53m

I like text-based editing but found plantuml lacking in this regard, so I created my own thing. It's basically a html/css template engine with a library of (hand-drawn-ish) components. You can use it as a VSCode extension ('WireText'), featuring a live preview.

https://gitlab.com/saxion.nl/42/wiretext-code#wiretext-vscod...

A (non-text-based) alternative I kind of like is Quant-UX: https://quant-ux.com/

lf-non
0 replies
12h23m

Your solution is awesome. Thanks for sharing.

Love the indentation based DSL - this looks very intuitive.

I do a lot of quick sketches with excalidraw but I easily see wiretext-code replacing that with a better workflow where I can extract out components and prototype by composing those instead of copy pasting around.

petepete
1 replies
8h2m

I use Excalidraw for this kind of stuff. It has the best interface of all the tools in its class and it's easy to create diagrams/flows/mockups that peope recognise are 'in progress', but still look great.

bunsenhoneydew
0 replies
7h14m

I use excalidraw for almost everything. Brilliant tool. I already mentioned it in another response in this thread but using excalidraw inside obsidian via https://github.com/zsviczian/obsidian-excalidraw-plugin has been a game changer for me.

keerthiko
1 replies
21h22m

I have no trouble using Figjam for this, or just figma but borrowing the arrow connector objects from Figjam

staplers
0 replies
20h8m

Figma isn't ugly enough for developers to want to use. /s

zachthewf
0 replies
15h44m

Whimsical is amazing.

https://whimsical.com/

sublinear
0 replies
15h22m

I've used Zeplin on a few projects and it was a good experience.

mockup does not quite get us there (not sure why)

I can only speak as a dev, but it's incredibly frustrating when design agencies leave out too many details or don't consistently follow guidelines. No tool is going to fix that.

On my side of the fence we generally don't care about the tools used as long as we have a completed design to look at that isn't late and isn't going to be pulled out from under us. I've seen product managers lie about all reviews being completed to "get devs started early" only to see the next revision break a ton of work. They also lie about copy text being final not realizing the impact even one word can have on everything. I've seen designers commit sins ranging from using system or licensed fonts causing them to have to rework an entire layout to not even exporting assets properly or at all before handing off to devs. If you have people like that, the back and forth and pain is endless for everyone.

neeleshs
0 replies
19h29m

I use balsamiq for both flows and UX "paper" prototypes. My only gripe is not being able to easily re-use groups of controls

edg5000
0 replies
13h8m

Draw.io (freeware, cross-platform desktop app). I have used it for diagrams mainly, but also for quite a bit of UX mockups. Its strength is diagrams though. But it is quite generic also in a way.

cebu
0 replies
21h32m

excalidraw is my go to for that in-between

baoluofu
0 replies
20h51m

I find balsamiq is quite easy to get to grips with. My biggest complaint (at least for the desktop app, haven't tried the cloud version) is the lack of an "infinite" canvas.

hbcondo714
9 replies
1d1h

At first glance, this looks useful but is it being maintained? Their main branch on GitHub hasn't been updated in years: https://github.com/vanila-io/wireflow

xet7
8 replies
1d

1. Originally, Wireflow was made with Meteor, when there was a way to save data.

2. Then there was a rewrite with React, but not yet a way to save data.

3. Then maintainers did have some other projects where they did spend most of their time.

That brings my questions, are some interested in this kind of tool? Would some like to contribute more to Wireflow? Has some news about other similar tools bring more interest to have Wireflow maintained even better?

Just thinking, as one of the maintainers of Wireflow.

highmastdon
1 replies
22h13m

I’m a heavy user of excalidraw. I wonder if it would be possible to extend something like that to add “flow” design. It could be as simple as defining the dotted arrow as the view direction, ie. when an element is clicked, show this bounding box, where the dotted bounding box is used to zoom to that level.

bunsenhoneydew
0 replies
7h21m

You may already do this but if you haven’t, check out the excalidraw plugin in Obsidian: https://github.com/zsviczian/obsidian-excalidraw-plugin

Zslot has put an incredible amount of work into it and it extends excalidraw to have a lot of additional capabilities. You can also use it within Obsidian canvas for some of the flow stuff you mention but you could very likely just use the plugin.

Zslot is constantly updating it too so you get new features and updates almost every other time you open it. Amazing work done there.

And Obsidian is just awesome too :)

simulo
0 replies
1d

You could ask for feedback on https://discourse.opensourcedesign.net/ where quite some UX designers in open source projects hang out. I personally remember nokias flowella fondly, but I do not know if it does the same as wireflow.

pedro_rtm
0 replies
5h34m

If it got to the point where it replaced the feature set of Adobe XD, and it remained free and open source, I could see this being useful. It took me a while to get the hang of Figma, and sometimes you don't need that sophistication at the very early stage.

haolez
0 replies
21h33m

On a side note, Meteor always seems like a good idea at the beginning, but I see lots of projects failing with it. It's unfortunate.

fl0id
0 replies
15h53m

Seems to limited to me fwict. Likely very basic icons for each step. Might as well just use a normal flowchart

debarshri
0 replies
1d

I had contributed the Dockerfile to the project when it was last posted in HN.

Friendly maintainers but I think being built by an App development studio, I can imagine they have different priorities.

_betty_
0 replies
9h57m

Almost feel like it'd make more sense to merge with another tool, like tldraw

saint11
1 replies
14h7m

This looks really useful! I wonder if it's easy to fork it to make game design icons.

pihentagy
0 replies
8h26m

What is the point of this project? I can just add screens (which are stock graphics, can change the text). I can add relationships between screens (but not clickable).

So this looks like a sitemap.

Is that all?

lxe
1 replies
21h8m

I clicked and started drawing. Can export as image. No logins, no signups. What a delight.

pazimzadeh
0 replies
14h8m

No signups is great.

But what do you mean by drawing? Are there supposed to be drawing tools?

It looks like bunch of templates for constructing site-maps?

Is this supposed to encompass mobile design patterns as well?

I understand it was done in less than a month but if you take a few days to learn something like Principle (https://principle.app/) then you could the rest of the work in two weeks and have an interactive full scale prototype in at the end.

CyberDildonics
1 replies
1d

What is a user-flow prototype?

thoughtpalette
0 replies
1d

All the steps it takes a User to accomplish an action. Usually low fidelity (wireframes vs finished designs). The prototype part I'd assume means you can click through it (like Figma prototypes).

E.g. Login Form. Could should initial state -> error state -> submitting state -> success state. Could be a "User Login flow".

xet7
0 replies
1d1h

What has happened? Has some other news raised more interest in this project?

tomgs
0 replies
22h52m

Small typo: it says permisions instead of permissions in the feature sidebar

sublinear
0 replies
15h40m

I'm a bit confused about the delivery of this. It's presented as an installable web app, but seems to be completely broken in chrome for android.

I'm not sure what I expected trying to check it out on my phone, but I'd at least expect to be able to run it on a tablet. The use case for running it on a phone might be to view, but not edit a project. One might need to review changes and reply to an email chain or teams chat between meetings from their phone if this was going to be used in the real world. Would suck to need to juggle nth-revision PDF exports about an app design. Everyone hates that.

reichardt
0 replies
1d1h

Looks awesome! The YouTube video linked inside the GitHub README seems to be unavailable: https://youtu.be/zm0XbLmXtXY Would love to see an up-to-date demo video.

lfmunoz4
0 replies
21h37m

Anyone know of a similar project but written in VueJs?

juliushuijnk
0 replies
4h52m

Wrote an article a while back about the idea of creating flow-charts like that based on your actual smartly-minified wireframes. https://medium.com/proof-of-concept/the-story-of-a-true-ux-t...

I eventually want to incorporate something like this in my tiny ux app (https://www.tinyux.app), but have not yet gotten around to it.

It would be so cool if you could start either from the flow, page or component perspective, but all are essentially using the same source of truth.

Had a presentation once to a room of UX designers who really liked the vision and concept. Then I showed them my prototype with vim-like text commands to manipulate wireframes and got a lot of blank stares. Still makes me laugh to think about that mismatch of expectations.

dominick-cc
0 replies
1d1h

I'm having trouble loading the webpage

dalore
0 replies
23h42m

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.

Not to be the grammar tsar, but if anyone from there is reading this it could do with a little fixing.