Menu Search
Jump to the content X X
Smashing Conf San Francisco

We use ad-blockers as well, you know. We gotta keep those servers running though. Did you know that we publish useful books and run friendly conferences — crafted for pros like yourself? E.g. upcoming SmashingConf San Francisco, dedicated to smart front-end techniques and design patterns.

UX Sketching And Wireframing Templates For Mobile Projects

Today we are happy to release two printable UX sketching and wireframing templates, designed by Pixle81 for Smashing Magazine’s readers. This article presents Outline, a set of sketching and wireframing papers for mobile platforms and Tapsize, a set of templates for checking optimal tap areas without a mobile device.

Outline Link

Outline is a set of 28 printable sketching and wireframing papers (in PDF) for seven mobile platforms: Android, BlackBerry, iOS (iPad and iPhone), Meego, Symbian, webOS, Windows Phone 7. The set consists of a few combinations, such as actual size, 10 devices fit to a page, and landscape layout.

Note: Print the sheets at actual size (i.e. do not resize).

As a bonus, Outline includes an Illustrator file displaying the mobile devices.

Outline set
Outline paper set

Windows Phone 7 Panorama template
Windows Phone 7 and 8 panorama template

Android 4.x template
Android 4.x template

Tapsize Link

With Tapsize, you can determine the optimal tap area without having an actual device. Just print the screen you need. The set includes 9 PDFs:

  • 3.5 inches — 640 × 960 pixels
  • 4.65 inches — 1280 × 720 pixels
  • 5.3 inches — 1280 × 800 pixels
  • 7 inches — 1024 × 600 pixels
  • 7 inches — 1280 × 800 pixels
  • 7.7 inches — 1280 × 800 pixels
  • 8.9 inches — 1280 × 800 pixels
  • 9.7 inches — 1024 × 768 and 2048 × 1536 pixels
  • 10.1 inches — 1280 × 800 pixels

Note: Print the sheets at actual size (i.e. do not resize).

Tapsize set
Tapsize paper set

Calculated grid
Calculating the grid

Checking optimal tap size on paper Google Nexus 7 tablet :)
Checking the optimal tap area for the Google Nexus 7 tablet.

Behind the Design Link

Pixle2 are talented and skilled dots based in Warsaw, Poland, focusing on mobile software and UI design. Besides mobile apps like Bord3 and Foldify4, they designed Gesty5 and Subway6 icons sets for designers and developers.

Download The Set For Free Link

Both sets are completely free to use for commercial and personal projects, without any restrictions. Please link to this article if you want to spread the word.

We’d like to thank the creative minds behind Pixle81 for providing the resources for everybody to use and share!

(al) (il)

Footnotes Link

  1. 1
  2. 2
  3. 3
  4. 4
  5. 5
  6. 6
  7. 7
  8. 8

↑ Back to top Tweet itShare on Facebook

The Smashing team loves high-quality content and cares about the little details. Through our online articles, Smashing Books, eBooks as well as Smashing Conferences, we are committed to stimulating creativity and strengthening the web design community’s creative forces.

  1. 1

    Benjamin Christine

    September 19, 2012 12:40 am

    brilliant templates! very handy! will try and use them.

  2. 3

    You’re amazing. :)

  3. 4

    Well what can I say? AWESOME! Thanks for this! :D

  4. 5

    then what? design different layouts for every single device? guys, stop thinking in pixels!

    • 6

      Responsive native apps? What are you thinking?

    • 7

      you clearly don’t get it.

      You still need different sizes to understand and illustrate how a site can be responsive.

      It’s also very important, when designing a native app, to understand how your app relates to the device it’s on (ie. android hardware controls on the bottom of the screen)

    • 8

      That’s alright Peter.

      I up-voted, because you made me crack a smile.

      Cheers, and appreciated.

  5. 9

    Truly awesome freebies! Thanks!

  6. 10

    Thanks! maybe not sleep tonight :>

  7. 11

    This is great, it will help a lot.

  8. 12

    Thanks a lot !

  9. 13

    I love you guys… Thanks for this, it really helps in this crazy world we try to enhance the experience, and at times we spend most of our time just trying to keep it the same throughout multiple platforms.

  10. 14

    Aleksandar Jakovljevic

    September 19, 2012 6:41 am

    Great stuff, thanks!

  11. 15

    Thank you so much – exactly what I’ve been thinking of TRYING to do on my own, but so much better!

  12. 16

    Very handy – thanks so much….

  13. 17

    Nowasys’s can supply top quality technology consulting resources to our clients enabling them to outsource specific functions at a much reduced cost. For example one of our clients have outsourced their mobile development department to Nowasys.

    Nowasys’s outsourcing services – has been designed specifically for those organisations who are considering outsource development or who have tried the traditional outsourcing model and found that it does not meet their requirements for responsiveness, quality and manageability.

    The motivated, dedicated, expeienced Team solution is simple, straight forward, low risk and very cost effective – it refers to a highly qualified, self managing development team, working exclusively for you, and completely under your direction. It gives you all the financial benefits of off-shoring but in a controlled and easily managed way.

  14. 18

    This is great. As a programmer trying to learn design elements this helps.

  15. 19

    wow… muchas gracias!

  16. 20

    Cool resource, thanks!

    It would be neat if there was also a version where the paper would ‘accordion’ open (like the last page on a Mad magazine) and represent some responsive nature… just kidding :)

  17. 21

    THANKS! yay

  18. 22

    These look awesome. Thanks.

    I’d love to see these for Windows 8 as well. That would include size like 1366×768, 1920×1080 at 10.6″ etc

  19. 25

    Nice, thanks!

  20. 26


  21. 27

    I want to cry… Thank you all.

  22. 28

    Martino Spreafico

    September 20, 2012 1:02 am

    Once again a handy MUST HAVE by SM! Thanks!

  23. 29

    Uber-awesomesauce guys, thanks :)

  24. 30

    Tom-Erik Thorbeck

    September 20, 2012 3:01 am

    Just uploaded these to adobe creative cloud and now I got some sweet templates for my adobe touch apps. Yey!

  25. 31

    Luis Hernández

    September 20, 2012 7:17 am

    Great Resource !!! Thank you

    • 32

      It is a major problem, but in the elxpmaes that you have given it takes no time at all for them to respond to just acknowledge they have received your email / enquiry and get back to it as soon as poss, and if they haven’t had a chance to get back to you properly for a while to just send an update to you.

  26. 33

    Remember the days when you would start with a drawing of a laptop before you begin sketching? ;-)

  27. 34

    A fantastic resource – thanks for sharing!

  28. 35

    wow! just amazing.

  29. 36

    Thx !

  30. 37

    Great Resource !!! Thank you

  31. 38

    Amazing job! Thank for this freebie.

  32. 39

    This is what is called “SOLUTION” :-]
    Amazing stuff…!

  33. 40

    wow, Thanks so much!

  34. 41

    This is so great – thank you for posting, and thank you Pixle for creating this wonderful tool! Now, I don’t design in 25px increments – I stick with 10px increments since most screens are divisible by 10 (although now I’m pissed there’s another 6 pixels in the new iPhone 5 :) So, I tweaked Pixle’s iPhone 4 vector object to fit a standard iPhone 4 640×960 screen at 100% on a tabloid sheet of paper (11″ x 17″). If you’d like to use this resource for your drawing projects, I’ve uploaded the PSD over on Dribbble:

  35. 42

    make also sure to checkout this neat little service where you can download customizable templates for iPad, iPhone etc.:

  36. 43

    thats cool. thanks

  37. 44

    Just printed some and I know these will come handy.
    Thank you!

  38. 45

    We can’t ask for more!!

  39. 46

    It’s awesome guys. Thank you very much. (y)

  40. 47

    Thank you!! Very useful!

  41. 48

    Just wanted to say thank you very much!

  42. 49

    These are amazing! Thank you for your share.

  43. 50

    thanks so so so so much for your efforts :)

  44. 51

    The links seem to be broken, and I’m not able to download the zip :(

  45. 52

    no link :(
    404 not found

  46. 53

    I made actual Nokia 620 Windows Phone 8 template. .pdf’s and .ai
    Feel free to download at

  47. 54

    Thanks a lot! (link works fine)

  48. 55

    Thanks alot.

    But iPhone 4/4S sizes are smaller (after printing on A4 paper)!

  49. 56

    Thank you so much for this freebie!

    Please add iPhone5 in next update.


  50. 57

    Already iphone 6 :)

    Many thanks to the author!!!

  51. 58

    AWESOME!!!!!!!!!!!!!!!! Thank you guys!

  52. 59

    Wonderful! Thank you!

  53. 60

    Perfect Wire framing Templates. So far the best template I’ve ever seen on the Internet

    – Thanks


↑ Back to top