4 ms·

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?

cebu 3y ago
excalidraw is my go to for that in-between
keerthiko 3y ago
I have no trouble using Figjam for this, or just figma but borrowing the arrow connector objects from Figjam
- staplers 3y ago
  Figma isn't ugly enough for developers to want to use. /s
deleted 3y ago
[deleted]
baoluofu 3y ago
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.
neeleshs 3y ago
I use balsamiq for both flows and UX "paper" prototypes. My only gripe is not being able to easily re-use groups of controls
vanviegen 3y ago
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-vscode 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/ https://quant-ux.com/
- lf-non 3y ago
  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.
zachthewf 3y ago
Whimsical is amazing. https://whimsical.com/ https://whimsical.com/
sublinear 3y ago
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.
edg5000 3y ago
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.
petepete 3y ago
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 3y ago
  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 https://github.com/zsviczian/obsidian-excalidraw-plugin has been a game changer for me.

cebu 3y ago

excalidraw is my go to for that in-between

keerthiko 3y ago

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

staplers 3y ago
Figma isn't ugly enough for developers to want to use. /s

deleted 3y ago

[deleted]

baoluofu 3y ago

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.

neeleshs 3y ago

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

vanviegen 3y ago

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-vscode 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/ https://quant-ux.com/

lf-non 3y ago
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.

zachthewf 3y ago

Whimsical is amazing. https://whimsical.com/ https://whimsical.com/

sublinear 3y ago

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.

edg5000 3y ago

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.

petepete 3y ago

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 3y ago
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 https://github.com/zsviczian/obsidian-excalidraw-plugin has been a game changer for me.