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.

Printable A4 GUI Sketching Kit 3.0 – Nexus S, Galaxy Nexus, Nexus 4, Nexus 7, Nexus 10 and Xoom

UPDATE 13/11/2012: To celebrate the release of the new Nexus 4 and Nexus 10, Android GUI Sketching Kit is now updated to version 3.0! It has been added with Nexus 4 and Nexus 10 sketching templates, as well as added the guide for Split Action Bar for Galaxy Nexus and Nexus 4.

UPDATE 27/09/2012: The Android GUI Sketching Kit is mentioned in the 3rd episode of Android Design in Action! To thanks Roman Nurik and Nick Butcher for the shout-out, I have spent some time updating the sketching template to version 2.0, which also includes the Xoom template! I have removed the title and description fields in the templates, and introduce the guide for Status Bar, Action Bar, Navigation Bar, and Combined Bar (for Xoom). Hope you will find it useful!

Besides making the Android ICS GUI Design Kit that can be used in Adobe Photoshop, I also think (and love!) that sketching is a big part of UI/UX designing, while it can be messy, but it definitely help in quick idea visualization and aid in brainstorming.

So here I come up with a few sketch templates for Android App, using the Samsung Nexus S, Samsung Galaxy Nexus and Asus Nexus 7 as the sample devices, and put them on an A4-sized PDF with almost real-life size so designers can sketch the app with the size as close as the real device (don’t blame me if there is one or two pixels off! /jk/).

Android app designer, go create some awesome apps with the GUI Design Kit and GUI Sketching Kit!

Download

Download Android GUI Sketching Kit 3.0