Wireframe Screen Flow Template [Free Download]

Update: I’ve updated the template to 1.0.1 to fix an issue that all screens will be using the same content. Have to blame myself for the lazy duplication. At the same time, Wireframe Screen Flow Template using Nexus 4 is also available now.

Inspired by a question from the group member within a private G+ community – Android Designers, I decided to spend some time to create a Wireframe Screen Flow Template for Adobe Photoshop that can help Android Developers/Designers to create a complete screen flow for wireframes or mockups. Below is the preview of the template that I have made:

Wireframe Screen Flow Template 1.0

What’s inside

  • 12 mock up screens (They are smart objects so it’s very easy to drag-and-drop your mock ups)
  • Gestures
  • Screen flow arrows (One level down/up and two levels down/up)

How to use

  1. Create all your mock ups or wireframes in 1280×720 or 1280×768 (Photoshop GUI Design Kit recommended) including the Nav Bar and Status Bar. Save them as png.
  2. In the template, select one of the mock up screen folder. Look for Mock Up Screen (EDIT CONTENT). Right click on it then select Edit Contents.
  3. In the new screen, drag-and-drop your mock up. It should fit nicely. Ctrl+S to save, then close it. You should see the mock up appears in the screen flow template.
  4. Select your preferred gestures and screen flow arrows within those folders for a complete screen flow mock up.

Download

I have placed it to Mediafire and it is free to download:

If you have any issue downloading it, let me know and I will send you a copy.

This work is licensed under the Creative Commons Attribution-ShareAlike 3.0 Unported License. To view a copy of this license, visit http://creativecommons.org/licenses/by-sa/3.0/ or send a letter to Creative Commons, 444 Castro Street, Suite 900, Mountain View, California, 94041, USA.