App user flows with Sketch
Artboards in Sketch are great for designing different screens and states of an app, but documenting how users navigate from one to another view isn’t obvious.
There are great tools available to turn screen designs into interactive prototypes, like the versatile Apple Keynote or InVision and Framer.
Though often it’s useful to just have a big two dimensional presentation of all steps and the resulting flows.
Let me show you a little hack Oliver and I use for this at Uber.
Sketch hides the overflowing parts of objects, which makes for sad arrows between screens.
Moving the arrows on top of all artboards, makes them visible. We can group them all on their own artboard with a transparent background.
Though Sketch won’t preserve artboard shadows in exports or presentation mode, resulting in harder to understand visuals.
You can solve this by putting an artboard with a (neutral) background color underneath all your work.
Now you can select the Export artboard and generate a file that’s easily shared with other people.
To recap:
- Place the arrows on a transparent artboard on top of your work;
- And put an artboard with a background color below your work.
We call this the Flow Sandwich.
Thanks to Teehan+Lax for their free iOS GUI and to Bohemian Coding for making Sketch so awesome.
Don’t forget to checkout our open design positions at Uber. We’re working on some big challenges and are looking for smart team players.