UX Sketching And Wireframing Templates For Mobile Projects

Advertisement

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

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

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

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

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

  1. 1 http://www.pixle.pl/
  2. 2 http://www.pixle.pl
  3. 3 http://bord.pixle.pl
  4. 4 http://foldifyapp.com
  5. 5 http://gesty.pixle.pl
  6. 6 http://subway.pixle.pl
  7. 7 http://provide.smashingmagazine.com/pixle_outline_tapsize.zip
  8. 8 http://www.pixle.pl/

↑ Back to topShare on Twitter

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.

Advertising
  1. 1

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

    4
  2. 3

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

    -12
    • 4

      Responsive native apps? What are you thinking?

      4
    • 5

      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)

      6
    • 6

      That’s alright Peter.

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

      Cheers, and appreciated.

      2
  3. 7

    Thanks! maybe not sleep tonight :>

    4
  4. 8

    You’re amazing. :)

    1
  5. 9

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

    1
  6. 10

    Truly awesome freebies! Thanks!

    2
  7. 11

    This is great, it will help a lot.

    0
  8. 12

    Thanks a lot !

    0
  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.

    1
  10. 14

    Aleksandar Jakovljevic

    September 19, 2012 6:41 am

    Great stuff, thanks!

    1
  11. 15

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

    1
  12. 16

    Very handy – thanks so much….

    1
  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.

    http://nowasys.com

    -38
  14. 18

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

    0
  15. 19

    wow… muchas gracias!

    0
  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 :)

    -3
  17. 21
  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

    5
  19. 25

    Nice, thanks!

    0
  20. 26
  21. 27

    I want to cry… Thank you all.

    0
  22. 28

    Once again a handy MUST HAVE by SM! Thanks!

    0
  23. 29

    Uber-awesomesauce guys, thanks :)

    0
  24. 30

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

    0
  25. 31

    Great Resource !!! Thank you

    0
    • 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.

      -2
  26. 33

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

    0
  27. 34

    A fantastic resource – thanks for sharing!

    0
  28. 35

    wow! just amazing.

    0
  29. 36

    Thx !

    0
  30. 37

    Great Resource !!! Thank you

    0
  31. 38

    Amazing job! Thank for this freebie.

    0
  32. 39

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

    0
  33. 40

    wow, Thanks so much!

    0
  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: http://dribbble.com/shots/748432-Iphone4-Drawing-Template-Freebie.

    0
  35. 42

    make also sure to checkout this neat little service where you can download customizable templates for iPad, iPhone etc.: http://generatedpaper.com/en/wireframing

    2
  36. 43

    thats cool. thanks

    0
  37. 44

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

    0
  38. 45

    We can’t ask for more!!

    0
  39. 46

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

    0
  40. 47

    Thank you!! Very useful!

    0
  41. 48

    Just wanted to say thank you very much!

    0
  42. 49

    These are amazing! Thank you for your share.

    0
  43. 50

    thanks so so so so much for your efforts :)

    0
  44. 51

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

    0
  45. 52

    no link :(
    404 not found

    0
  46. 53

    I made actual Nokia 620 Windows Phone 8 template. .pdf’s and .ai
    Feel free to download at http://dribbble.com/shots/1107037-Nokia-620-wireframing-template

    0
  47. 54

    Thanks a lot! (link works fine)

    0
  48. 55

    Thanks alot.

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

    0
  49. 56

    Thank you so much for this freebie!

    Please add iPhone5 in next update.

    Thanks.

    0
  50. 57

    Already iphone 6 :)

    Many thanks to the author!!!

    0

Leave a Comment

Yay! You've decided to leave a comment. That's fantastic! Please keep in mind that comments are moderated and rel="nofollow" is in use. So, please do not use a spammy keyword or a domain as your name, or else it will be deleted. Let's have a personal and meaningful conversation instead. Thanks for dropping by!

↑ Back to top