How do you layout screen flows…

The first stage usually looks like this:

That’s just to get my mind thinking about the problem. Once I’m ready to to get more specific, and consider variations and alternatives, it starts looking a bit tidier. What I’m doing is a tad more elaborate variant of Ryan Singer’s "shorthand"

If I need to get feedback from others, or present to the team a plan for what we’re doing, I’ll clean that up even further and make it legible for folks using Illustrator (though I imagine Sketch, OmniGraffle, and many other tools might serve you just fine. I once did this in Google Drawing, not that I’d recommend that):

At times, I might do a wireframes that will (literally) cover the corresponding boxes (pages/screens) in that flow diagram if the in-page interactions are complex or if I’m divvying up the work with other designers. Other times, I’ll skip the wireframing and go from the flow diagram to full-fidelity mockups:

… with different states and variables? Do you now any particular tool that helps lay out and structure screen flows for different scenarios?

I find it tough to communicate to others 1) the flow and 2) all the states of each piece of the flow at the same time effectively. I’ve found it more effective when the flow diagram communicated primarily, well, the flow, annotating varying states as a secondary thing. I usually lean on diagramming the happy path in the flow, and then noting down below each screen that it exists in a couple of different states, showing those states if space allows. You might create two or more flow diagrams of the same flow, one showing the "happy path," and another the same set of screens but in different states. Usually, I find that only a couple of paths through the flow are important enough to diagram explicitly.

I’ve found this to be effective inside small, agile product teams that are tackling novel problems. Everyone’s environment is different and, of course, your mileage may vary.

Doing this in Sketch takes so long to draw paths and make it presentable and in the end its not very useful to experiment and consider different flows, while changing the steps etc

Personally, I don’t see all that much value in fussing with arrows and connecting lines once things are mocked up in Sketch. By the time full-fidelity mockups arrive, the team members are usually already aligned and have hashed out the common use cases and internalized happy paths and edge-cases. You’re right, connecting mockups with arrows is time consuming and it can get in a way of experimentation and speed of generating different ideas. Doing that is so much easier with my Rotring 500 and 2B leads ;)

this is my style.

Hi, I have described my workflow here: SQUID & Sketch — The Ultimate Guide to User Flows Creation - Prototypr.io

Hope this will be useful for you. I use the Sketch library created by myself - it is now called SQUID.

I use Draw.io for really rough sketches and screen flows.

If your aim is to explain logic in your application I would recommend using a flowchart with mockups, like this:

* Medium just used as an example, I don't work for them ;)

I agree, Sketch is not fast for flowcharting, it's not created for that purpose. Use apps like Omnigraffle or Axure instead. They both allow you to drag and connect noodles and boxes in a very efficient way.

In the same vein as Lan Belic, I've been using this Sketch library to do user flows: http://uxmisfit.com/squid/

https://medium.com/@lanbelic/interaction-flow-kit-75a8876a3a4

Maybe this kit will help with that :)

You can also check UX map: ux-map.com Currently it works with Axure RP, a version for Sketch is on the way (updates to follow on the social media channels).

To be honest I use Google Draw it's easy to use you don't need a specific app to use it and it's collaborative