Printable A4 Screen Flow Sketch Template [Free Download]

Featured

Update 07 January 2013: Added Screen Flow Sketch Template for Tablet (Nexus 10). Download link below.

During the new year of 2013, I have released a PSD template for wireframe/mock up screen flow, which I hope can help a little bit in creating an app screen flow easily in digital format. And today, considering there are still many people love to do sketching for wireframe/mock up, I have created a Printable A4 Screen Flow Sketch Template in PDF Format, so you can easily sketch the screen flow on the paper, and because each screen is considerably small, you only need to focus on the main interaction area for the flow, so details are not needed.

I strongly recommended to use this one to sketch out your app idea before going into details since the navigation/screen flow will be there when you are expanding your idea, eliminating some confused/undetermined navigation between screen.

Printing Tips

  • Use Fit option to print (Don’t use exact size)
  • Print in Black and White
  • Use High Quality (This won’t use much ink)

Download

I have placed it in my Mediafire account and it’s free to download:

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

Advertisements

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.