News for hackers. Stuff that matters.
Re:Wireflow – free, online, open source tool for creating us... by gervwyk on Wednesday December 20, 2023 @03:51PM (#38713479)
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?

Re:Wireflow – free, online, open source tool for creating us... by baoluofu on Wednesday December 20, 2023 @04:34PM (#38713938)
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.
Re:Wireflow – free, online, open source tool for creating us... by keerthiko on Wednesday December 20, 2023 @04:03PM (#38713602)
I have no trouble using Figjam for this, or just figma but borrowing the arrow connector objects from Figjam
Re:Wireflow – free, online, open source tool for creating us... by staplers on Wednesday December 20, 2023 @05:17PM (#38714376)
Figma isn't ugly enough for developers to want to use. /s
Re:Wireflow – free, online, open source tool for creating us... by cebu on Wednesday December 20, 2023 @03:53PM (#38713498)
excalidraw is my go to for that in-between
Re:Wireflow – free, online, open source tool for creating us... by neeleshs on Wednesday December 20, 2023 @05:56PM (#38714759)
I use balsamiq for both flows and UX "paper" prototypes. My only gripe is not being able to easily re-use groups of controls
Re:Wireflow – free, online, open source tool for creating us... by vanviegen on Wednesday December 20, 2023 @06:31PM (#38715068)
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/

Re:Wireflow – free, online, open source tool for creating us... by lf-non on Thursday December 21, 2023 @01:02AM (#38717474)
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.

Re:Wireflow – free, online, open source tool for creating us... by zachthewf on Wednesday December 20, 2023 @09:41PM (#38716414)
Whimsical is amazing.

https://whimsical.com/

Re:Wireflow – free, online, open source tool for creating us... by sublinear on Wednesday December 20, 2023 @10:02PM (#38716548)
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.

Re:Wireflow – free, online, open source tool for creating us... by edg5000 on Thursday December 21, 2023 @12:17AM (#38717239)
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.
Re:Wireflow – free, online, open source tool for creating us... by petepete on Thursday December 21, 2023 @05:23AM (#38718829)
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.
Re:Wireflow – free, online, open source tool for creating us... by bunsenhoneydew on Thursday December 21, 2023 @06:11AM (#38719087)
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.