Menu Search
Jump to the content X X
Smashing Conf New York

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 Barcelona, dedicated to smart front-end techniques and design patterns.

50 Free UI and Web Design Wireframing Kits, Resources and Source Files

Planning and communication are two key elements in the development of any successful website or application. And that is exactly what the wireframing process offers: a quick and simple method to plan the layout and a cost-effective, time-saving tool to easily communicate your ideas to others. A wireframe typically has the basic elements of a Web page: header, footer, sidebar, maybe even some generated content, which gives you, your clients and colleagues a simple visually oriented layout that illustrates what the structure of the website will be by the end of the project and that serves as the foundation for any future alterations.

This article focuses on actual wireframing tools and standalone applications, as well as resources that you’ll need to build your own wireframe: wireframing kits, browser windows, form elements, grids, Mac OS X elements, mobile elements, which you’ll use in any typical graphics editor such as Photoshop or Illustrator. …Or you could use pen and paper.

Complete Wireframing Toolkits Link

Mac OS X Interface Stencil Kit1
Leopardy interface stencil kit. This one makes extensive use of tables, for maximum flexibility while maintaining pixel precision.

Wireframe Resources2

Facebook Applications Stencil Kit3
A pretty sizable collection of Facebook related elements to use in creating wireframes for Facebook applications.

Wireframe Resources4

Flex Stencil Kit5
Includes all Flex components from Flex 3 Style Guide: panels, data grid, buttons, fields, links, toggle, menu, scrolls, accordion, tabs, list, data picker, tool tip, errors.

Wireframe Resources6

Eclipse Stencil Kit7
This stencil enables you to easily prototype Eclipse (wizard) dialogs with OmniGraffle(TM).

Wireframe Resources8

Yahoo! Design Stencils – Design Pattern Library9
You would be hard pressed to find a better wireframing resource than this one. The Yahoo! Design Stencil Kit is available for almost every application: OmniGraffle, Visio (XML), Adobe Illustrator (PDF and SVG) and Adobe Photoshop. This huge library covers the following elements (basically, everything): ad units, calendars, carousels, charts and tables, UI controls, form elements, grids, menus and buttons, mobile (general), mobile (iPhone), navigation and pagination, OS elements, placeholder text, screen resolutions, tabs, windows and containers.

Wireframe Resources10

Free Sketching & Wireframing Kit11
The Sketching & Wireframing Kit is a free set of elements for sketching and wireframing. It consists of form elements, icons, indicators, feedback messages, tool tips, navigation elements, image placeholders, embedded videos, sliders and common ad banners. The Kit comes in two vector formats, one for Adobe Illustrator and the other in SVG, which can be easily modified. It can also be downloaded in PDF and EPS formats.

Wireframe Resources12

EightShapes Unify13
EightShapes Unify is a collection of templates, libraries and other assets that enable user experience designers to create more consistent and effective deliverables faster. The system uses the Adobe Creative Suite of products; Adobe InDesign is the primary authoring tool.

Wireframe Resources14

OmniGraffle Wireframe Stencils15
This is a set of shapes for making wireframes in OmniGraffle version 5.x (Mac OS X).

Wireframe Resources16

OmniGraffle UX Template17
This is an OmniGraffle Pro template for interface design that includes shared layers for basic UX document needs; e.g. title page, wireframes, storyboards.

Wireframe Resources18

Web Page Elements19
Using the open-source “Bitstream Vera” font set and free icons from FamFamFam, you should have most of your common web page elements covered, including headings, form elements, content management function, image placeholders, etc.

Wireframe Resources20

Web Browser Templates Link

Photoshop Browser Templates – Web Designer Toolkit21
These Photoshop browser templates come in 1024×768 and 800×600 pixel sizes and cover nearly all browsers (Firefox, IE, Safari, Camino, even Netscape). For both sizes, the safe viewing area is clearly marked in a separate layer.

Wireframe Resources22

Web-Safe Area Templates for Photoshop Link

All of the Web-safe area browser PSD templates23 listed below can be individually downloaded by choosing from the following resolutions: 640×480, 800×600, 1024×768, 1280×960 and 1600×1200 pixels.

Windows Vista IE Web-Safe Area24

Wireframe Resources25

Windows Vista Firefox Web-Safe Area26

Wireframe Resources27

Windows XP IE Web-Safe Area28

Wireframe Resources29

Mac OS X Safari Web-Safe Area30

Wireframe Resources31

Mac OS X Firefox Web-Safe Area32

Wireframe Resources33

Mac OS X Safari Web-Safe Area34

Wireframe Resources35

Web Form Elements Link

Best Practice UX Forms Stencil36
This is a comprehensive release of the stencil kit which follows best practices in UX form design. It provides three different ways of laying forms out, each with their own benefits. This version also provides different button layouts, a progress indicator, captcha code input field, labels and more.

Wireframe Resources37

Photoshop Form Element Templates38
These Photoshop files include screenshots of all the common form elements as displayed in your selected operating system (Mac Classic, Mac OS X, Win XP and Win Classic). The form elements are separated into individual layers so that you can easily select, adjust or switch them as you please.

Wireframe Resources39

Web Form Elements Volume 140
Volume 1 contains a selection of Web user interace elements for forms in Photoshop format.

Wireframe Resources41

Web Form Elements Vol.242
This is Volume 2 of the Web Form UI Elements mentioned above and has been designed in a different style.

Wireframe Resources43

Photoshop Button Templates44
These Photoshop button templates have been separated into individual layers to be easily selectable. You can choose from the following colors: dark blue, light blue, dark green, light green, yellow, orange, red and purple.

Wireframe Resources45

Web Browser Elements Link

You can select the element you need46 from whichever operating system and browser you use, and download them individually.

Windows Vista IE Form Elements47

Wireframe Resources48

Windows Vista Firefox Form Elements49

Wireframe Resources50

Windows XP IE Form Elements51

Wireframe Resources52

Windows XP Firefox Form Elements53

Wireframe Resources54

Mac OS X Firefox Form Elements55

Wireframe Resources56

Mac OS X Safari Form Elements57

Wireframe Resources58

Grid Templates Link

Mobile App Development Resources Link

Ultimate iPhone Stencil – Graffletopia59
This Omnigraffe iPhone stencil kit contains backgrounds, title bars, buttons, selectors and all other iPhone UI elements. It can be easily resized horizontally by ungrouping, resizing the middle element and then regrouping the elements back into a single button.

Wireframe Resources60

iPhone 3G Stencil61
Includes standard interface components for the iPhone 3G: buttons, fields, map elements, keyboards, icons. All components are on a transparent background and should re-size nicely.

Wireframe Resources62

iPhone PSD Vector Kit63
This iPhone starter kit comes with several button elements as well as six different iPhone interface options.

Wireframe Resources64

iPhone GUI Elements65
Free iPhone elements available as layered Photoshop (PSD) files.

Wireframe Resources66

iPhone GUI as Rich Symbols for Fireworks67
This iPhone kit has been designed using Adobe Fireworks. It has several combinations, buttons, backgrounds, etc. It also has some lines of code to transform the simple vector symbols into rich symbols, with some variables.

Wireframe Resources68

RIM Blackberry PSD69
This download package contains 135 detailed layers for Blackberry app development.

Wireframe Resources70

Optional Wireframe Extras Link

Interactive Sketch Notation71
The general idea behind this notation is the desire to visualize user interface states as well as user actions in a clear and rapid manner.

Wireframe Resources72

Storyboard Characters (via Google Chrome)73

Wireframe Resources74

Proofreading Marks75

Wireframe Resources76

Standard Web Banners77
You can download these standard Web banners or ads individually (468×60 pixels, 768×60, 125×125, etc.). There are also templates for common but non-standard banner sizes (120×30, 230×33, 728×210, etc.).

Wireframe Resources78

Wireframe Icons, Royalty-Free EPS and PNG79
The icon set includes EPS and PNG versions of the original Konigi Wireframe Icon Set and are suitable for use in vector drawing applications such as Adobe Illustrator as well as in Microsoft Visio.

Wireframe Resources80

WEB UI Treasure Chest81
This PSD layered file, most of whose files are fully editable, contains more than 100 elements for website design.

Wireframe Resources82

Webdesigner kit83
This Photoshop download contains registration fields, menus, checkboxes, radio buttons and cursors.

Wireframe Resources84

Printable Sketching Paper Link

A4 and A3 Sketching Grid Paper85
This downloadable and printable 960-pixel-wide grid makes it easy to create a three-column (320 pixel), four-column (240 pixel), five-0column (192 pixel) or six-column (160 pixel) grid on a single sheet of paper. You have two sizes to choose from, A4 and A3.

Wireframe Resources86

Print and Sketch Wireframe Template87

Wireframe Resources88

iPhone Application Sketch Template89
The grid squares for this sketching paper are equal to 10 pixels. The tick marks indicate the height of the status bar, nav bar, keyboard, tab bar and toolbar. For best results, print on A4 borderless paper.

Wireframe Resources90

iPhone Wireframe Templates for Sketching91
Two layouts are available, both in PDF and Visio (VSD) formats for quick iPhone mockups.

Wireframe Resources92

Printable Wireframe and Notes Link

The below 8.5 x 11-inch graph paper93 is made for visual designers, interaction designers and information architects. You’ll find styles for wireframing user interfaces, storyboarding interaction and plotting values on a 2×2 grid. Plus, you’ll get a basic grid for drafting site maps or anything else that comes up. Choose from the following:

Wireframe Magnets (DIY Kit) Link

These DIY magnet template are based on the Konigi wireframe stencils and includes three sheets of elements that would be useful for whiteboard prototyping. Simply download and print the PDFs onto magnet sheets, and cut them out.

Form Elements94

Wireframe Resources95

Tabs, Buttons and Bars96

Wireframe Resources97

Windows and Dialogs98

Wireframe Resources99

Further Resources And Some Wireframing Inspiration Link

web.without.words100
A visual playground where designers take popular sites and reconstruct them in a wireframe.

Wireframe Resources101

Graffletopia102
Graffletopia is a huge resource of free stencils for OmniGraffle (Mac-only, sadly). With OmniGraffle, you can quickly create high-quality wireframes, flowcharts and other diagrams.

Wireframe Resources103

Mockups To Go104
Mockups To Go is a user-contributed collection of ready-to-use UI components and design patterns that were built using Balsamiq Mockups. You can download all of the components and design patterns to use in your mockups.

Wireframe Resources105

Wireframes Magazine106
Wireframes Magazine is dedicated to all things wireframing and prototyping. It has a huge library of downloadable templates, samples and UI tools, and even a section for inspiration.

Wireframe Resources107

I {heart} wireframes108
I {heart} wireframes is a great source of wireframing inspiration and resources. And yes, we all love wireframes!

Wireframe Resources109

About the Author Link

Paul Andrew is a freelance Web designer. He is chief admin for Speckyboy – Design Magazine113, a Web design, Web development and graphic-design resource blog. Follow him on Twitter here: twitter.com/speckyboy114.

(al)

Footnotes Link

  1. 1 http://www.graffletopia.com/stencils/320
  2. 2 http://www.graffletopia.com/stencils/320
  3. 3 http://www.graffletopia.com/stencils/410
  4. 4 http://www.graffletopia.com/stencils/410
  5. 5 http://www.graffletopia.com/stencils/431
  6. 6 http://www.graffletopia.com/stencils/431
  7. 7 http://databene.org/eclipse-stencil.html
  8. 8 http://databene.org/eclipse-stencil.html
  9. 9 http://developer.yahoo.com/ypatterns/about/stencils/
  10. 10 http://developer.yahoo.com/ypatterns/about/stencils/
  11. 11 http://www.jankoatwarpspeed.com/post/2009/12/24/sketching-wireframing-kit.aspx
  12. 12 http://www.jankoatwarpspeed.com/post/2009/12/24/sketching-wireframing-kit.aspx
  13. 13 http://unify.eightshapes.com/
  14. 14 http://unify.eightshapes.com/
  15. 15 http://konigi.com/tools/omnigraffle-wireframe-stencils
  16. 16 http://konigi.com/tools/omnigraffle-wireframe-stencils
  17. 17 http://konigi.com/tools/omnigraffle-ux-template
  18. 18 http://konigi.com/tools/omnigraffle-ux-template
  19. 19 http://www.graffletopia.com/stencils/63
  20. 20 http://www.graffletopia.com/stencils/63
  21. 21 http://www.webdesignerstoolkit.com/index.php
  22. 22 http://www.webdesignerstoolkit.com/index.php
  23. 23 http://www.designerstoolbox.com/designresources/safearea/
  24. 24 http://www.designerstoolbox.com/designresources/safearea/vista/ie/?PHPSESSID=85945e90123d8ed1080f4cbe3bd5c7ad
  25. 25 http://www.designerstoolbox.com/designresources/safearea/vista/ie/?PHPSESSID=85945e90123d8ed1080f4cbe3bd5c7ad
  26. 26 http://www.designerstoolbox.com/designresources/safearea/vista/firefox/?PHPSESSID=85945e90123d8ed1080f4cbe3bd5c7ad
  27. 27 http://www.designerstoolbox.com/designresources/safearea/vista/firefox/?PHPSESSID=85945e90123d8ed1080f4cbe3bd5c7ad
  28. 28 http://www.designerstoolbox.com/designresources/safearea/xp/ie/?PHPSESSID=85945e90123d8ed1080f4cbe3bd5c7ad
  29. 29 http://www.designerstoolbox.com/designresources/safearea/xp/ie/?PHPSESSID=85945e90123d8ed1080f4cbe3bd5c7ad
  30. 30 http://www.designerstoolbox.com/designresources/safearea/xp/firefox/?PHPSESSID=85945e90123d8ed1080f4cbe3bd5c7ad
  31. 31 http://www.designerstoolbox.com/designresources/safearea/xp/firefox/?PHPSESSID=85945e90123d8ed1080f4cbe3bd5c7ad
  32. 32 http://www.designerstoolbox.com/designresources/safearea/mac/firefox/?PHPSESSID=85945e90123d8ed1080f4cbe3bd5c7ad
  33. 33 http://www.designerstoolbox.com/designresources/safearea/mac/firefox/?PHPSESSID=85945e90123d8ed1080f4cbe3bd5c7ad
  34. 34 http://www.designerstoolbox.com/designresources/safearea/mac/safari/?PHPSESSID=85945e90123d8ed1080f4cbe3bd5c7ad
  35. 35 http://www.designerstoolbox.com/designresources/safearea/mac/safari/?PHPSESSID=85945e90123d8ed1080f4cbe3bd5c7ad
  36. 36 http://www.graffletopia.com/stencils/566
  37. 37 http://www.graffletopia.com/stencils/566
  38. 38 http://www.webdesignerstoolkit.com/forms.php
  39. 39 http://www.webdesignerstoolkit.com/forms.php
  40. 40 http://sniperyu.deviantart.com/art/Web-Form-Elements-104261528
  41. 41 http://sniperyu.deviantart.com/art/Web-Form-Elements-104261528
  42. 42 http://sniperyu.deviantart.com/art/Web-Form-Elements-Vol-2-146544080
  43. 43 http://sniperyu.deviantart.com/art/Web-Form-Elements-Vol-2-146544080
  44. 44 http://www.webdesignerstoolkit.com/buttons.php
  45. 45 http://www.webdesignerstoolkit.com/buttons.php
  46. 46 http://www.designerstoolbox.com/designresources/elements/
  47. 47 http://www.designerstoolbox.com/designresources/elements/vista/ie/
  48. 48 http://www.designerstoolbox.com/designresources/elements/vista/ie/
  49. 49 http://www.designerstoolbox.com/designresources/elements/vista/firefox/
  50. 50 http://www.designerstoolbox.com/designresources/elements/vista/firefox/
  51. 51 http://www.designerstoolbox.com/designresources/elements/xp/ie/
  52. 52 http://www.designerstoolbox.com/designresources/elements/xp/ie/
  53. 53 http://www.designerstoolbox.com/designresources/elements/xp/firefox/
  54. 54 http://www.designerstoolbox.com/designresources/elements/xp/firefox/
  55. 55 http://www.designerstoolbox.com/designresources/elements/mac/firefox/
  56. 56 http://www.designerstoolbox.com/designresources/elements/mac/firefox/
  57. 57 http://www.designerstoolbox.com/designresources/elements/mac/safari/
  58. 58 http://www.designerstoolbox.com/designresources/elements/mac/safari/
  59. 59 http://graffletopia.com/stencils/413
  60. 60 http://graffletopia.com/stencils/413
  61. 61 http://www.graffletopia.com/stencils/495
  62. 62 http://www.graffletopia.com/stencils/495
  63. 63 https://www.smashingmagazine.com/2008/11/26/iphone-psd-vector-kit/
  64. 64 https://www.smashingmagazine.com/2008/11/26/iphone-psd-vector-kit/
  65. 65 http://www.designerstoolbox.com/designresources/iphone/
  66. 66 http://www.designerstoolbox.com/designresources/iphone/
  67. 67 http://jcorrea.es/2008/08/07/iphone-gui-as-rich-symbols-for-fireworks/
  68. 68 http://jcorrea.es/2008/08/07/iphone-gui-as-rich-symbols-for-fireworks/
  69. 69 http://digitalphenom.deviantart.com/art/RIM-Blackberry-PSD-111857107
  70. 70 http://digitalphenom.deviantart.com/art/RIM-Blackberry-PSD-111857107
  71. 71 http://wireframes.linowski.ca/2009/10/interactive-sketching-notation-v0-1/
  72. 72 http://wireframes.linowski.ca/2009/10/interactive-sketching-notation-v0-1/
  73. 73 http://www.graffletopia.com/stencils/462
  74. 74 http://www.graffletopia.com/stencils/462
  75. 75 http://www.designerstoolbox.com/designresources/proofing/
  76. 76 http://www.designerstoolbox.com/designresources/proofing/
  77. 77 http://www.designerstoolbox.com/designresources/banners/
  78. 78 http://www.designerstoolbox.com/designresources/banners/
  79. 79 http://konigi.com/blog/wireframe-icons-royalty-free-eps-and-png/
  80. 80 http://konigi.com/blog/wireframe-icons-royalty-free-eps-and-png/
  81. 81 http://lazycrazy.deviantart.com/art/WEB-UI-Treasure-Chest-v-1-0-139165343
  82. 82 http://lazycrazy.deviantart.com/art/WEB-UI-Treasure-Chest-v-1-0-139165343
  83. 83 http://lazycrazy.deviantart.com/art/Webdesigner-kit-128351457
  84. 84 http://lazycrazy.deviantart.com/art/Webdesigner-kit-128351457
  85. 85 http://www.henkwijnholds.com/prolonging-the-magic-a4-sketching-paper/
  86. 86 http://www.henkwijnholds.com/prolonging-the-magic-a4-sketching-paper/
  87. 87 http://www.flickr.com/photos/alfonsobozzelli/3949828341/
  88. 88 http://www.flickr.com/photos/alfonsobozzelli/3949828341/
  89. 89 http://www.flickr.com/photos/owaters/3846053408/
  90. 90 http://www.flickr.com/photos/owaters/3846053408/
  91. 91 http://interactivelogic.net/wp/2009/09/iphone-wireframe-templates/
  92. 92 http://interactivelogic.net/wp/2009/09/iphone-wireframe-templates/
  93. 93 http://konigi.com/tools/graph-paper
  94. 94 http://konigi.com/tools/wireframe-magnets-diy-kit
  95. 95 http://konigi.com/tools/wireframe-magnets-diy-kit
  96. 96 http://konigi.com/tools/wireframe-magnets-diy-kit
  97. 97 http://konigi.com/tools/wireframe-magnets-diy-kit
  98. 98 http://konigi.com/tools/wireframe-magnets-diy-kit
  99. 99 http://konigi.com/tools/wireframe-magnets-diy-kit
  100. 100 http://webwithoutwords.com/
  101. 101 http://webwithoutwords.com/
  102. 102 http://www.graffletopia.com/
  103. 103 http://www.graffletopia.com/
  104. 104 http://mockupstogo.net/
  105. 105 http://mockupstogo.net/
  106. 106 http://wireframes.linowski.ca/
  107. 107 http://wireframes.linowski.ca/
  108. 108 http://wireframes.tumblr.com/
  109. 109 http://wireframes.tumblr.com/
  110. 110 https://www.smashingmagazine.com/2009/09/01/35-excellent-wireframing-resources/
  111. 111 http://boxesandarrows.com/view/sketchy-wireframes
  112. 112 http://articles.sitepoint.com/article/tools-prototyping-wireframing
  113. 113 http://speckyboy.com/
  114. 114 http://twitter.com/speckyboy
SmashingConf New York

Hold on, Tiger! Thank you for reading the article. Did you know that we also publish printed books and run friendly conferences – crafted for pros like you? Like SmashingConf Barcelona, on October 25–26, with smart design patterns and front-end techniques.

↑ Back to top Tweet itShare on Facebook

Paul Andrew is a freelance Web designer. He is chief admin for Speckyboy - Design Magazine, a Web design, Web development and graphic design resource blog.

  1. 1

    Michael Fitzpatrick

    February 5, 2010 8:32 am

    I would suggest considering Balsamiq Mockups as a great tool to add to this list. Thanks for this compilation, very useful!

    0
  2. 2

    No mention of Balsamiq Mockups? Best mockup program there is!

    http://balsamiq.com/

    -2
  3. 3

    Very useful, thank you!!

    0
  4. 5

    WOW, this is one super awesome collection, super useful, I DO LOVE IT.

    THANKS A LOT

    0
  5. 6

    Johan Pettersson

    February 5, 2010 6:21 am

    This is exactly what I needed.

    Thanks SM!

    0
  6. 7

    WOW! One of the best posts ever!

    Thanks a lot!

    1
  7. 8

    perfect collection! thank you very much!
    I’d recommend it to every screen designer

    2
  8. 9

    Excellents post, is a great collection of useful resources for the web designer!!

    1
  9. 10

    One of the most useful collection ever.

    0
  10. 11

    Really great stuff Paul! Will definitely use these :)

    0
  11. 12

    Super excellent! Thank you very Much!

    0
  12. 13

    Smashing post! I really liked it :)

    2
  13. 14

    This is the most extensive collection I’ve seen, thank you so much! I love being able to save a page like this and know that I can always come and find what I’m looking for. Good job!

    0
  14. 15

    This is dope, yo! Thank you!

    0
  15. 16

    This is amazing! Thanks guys!

    0
  16. 17

    I just scanned through but did not see these nice (and free) online tools:

    Chart creation
    http://cacoo.com/

    Wireframe creation
    http://hello.hotgloo.com/index.html

    Cheers!

    0
  17. 19

    Really GREAT post!

    0
  18. 20

    For the web safe templates, I might suggest also accounting for at least one tool bar. I think almost everyone has one these days.

    0
  19. 21

    Love *_*

    0
  20. 22

    Very useful collection. Thank you, Paul.

    0

↑ Back to top