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



↑ Back to top