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.

12 thoughts on “Wireframe Screen Flow Template [Free Download]”

    1. Hey,

      You’re welcome! If you downloaded that previously, please download a new updated version, I just fix some issue with repeating smart objects. Happy New Year 🙂

      Rgds,
      Taylor Ling

      Reply

  2. Thanks very much for making this available as well as your Photoshop GUI Design Kit. Both are really helpful resources so thanks again for creating and sharing them. Happy New Year.

    Reply
  3. Pingback: Free Download by Taylor Ling: Wireframe Screen Flow Template | MobileAppUI

  5. Hi Taylor
    after I open the file and right click on the mockup, I could not find any item for the ‘Mock Up Screen (Edit’)?

    Reply

  6. Hi! This is fantastic, trying to use it now. I feel like I’m missing something obvious. You say to create images the size of 1280 x 720 but the screen size of the mock up screen in your template is 276 x
    488. Are we supposed to resize to fit?

    Reply

    1. Hey Jess Eddy,

      Nope, you doesn’t need to resize. Just look for the mock up screen that you want to place your mock up, right click on it, and select ‘Edit Contents’. You should be greeted with a 1280×720 layer, which is basically the selected mock up screen. Just paste your mock up there, Ctrl+S to save, then you will see the mock up is magically shown at the Wireframe Screen Flow main screen. 🙂

      Taylor Ling

      Reply
  8. Pingback: Free Android GUI & Wireframe Templates 2014

Leave a comment