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

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

Massive Web UI & Button Set9
This set contains UI elements in three distinct styles: glossy, satin/light gradient, and one-color. The satin/light gradient set is available in 7 different colors (which you’ll find all of in the PSD file). Available are control buttons including arrows and basic symbols, info and text boxes, breadcrubs, buttons, and other navigation elements, drop-down and collapsible box styles, speech bubbles, search forms and loading elements.

Wireframe Resources10

Yahoo! Design Stencils – Design Pattern Library11
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 Resources12

Free Sketching & Wireframing Kit13
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 Resources14

EightShapes Unify15
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 Resources16

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

Wireframe Resources18

OmniGraffle UX Template19
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 Resources20

Web Page Elements21
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 Resources22

Web Browser Templates

Photoshop Browser Templates – Web Designer Toolkit23
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 Resources24

Photoshop Browser Templates25
This layered PSD file contains three different browser resolutions; all with easily editable titles, address bars, scroll bars and favicons. Just open the PSD and place the layers on top of the design that you are working on, and voila!

Wireframe Resources26

Browser Screens and Website Elements27
A useful set of vector website assets.

Wireframe Resources28

Web-Safe Area Templates for Photoshop

All of the Web-safe area browser PSD templates29 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 Area30

Wireframe Resources31

Windows Vista Firefox Web-Safe Area32

Wireframe Resources33

Windows XP IE Web-Safe Area34

Wireframe Resources35

Mac OS X Safari Web-Safe Area36

Wireframe Resources37

Mac OS X Firefox Web-Safe Area38

Wireframe Resources39

Mac OS X Safari Web-Safe Area40

Wireframe Resources41

Web Form Elements

Best Practice UX Forms Stencil42
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 Resources43

Photoshop Form Element Templates44
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 Resources45

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

Wireframe Resources47

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

Wireframe Resources49

Photoshop Button Templates50
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 Resources51

Web Browser Elements

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

Windows Vista IE Form Elements53

Wireframe Resources54

Windows Vista Firefox Form Elements55

Wireframe Resources56

Windows XP IE Form Elements57

Wireframe Resources58

Windows XP Firefox Form Elements59

Wireframe Resources60

Mac OS X Firefox Form Elements61

Wireframe Resources62

Mac OS X Safari Form Elements63

Wireframe Resources64

Grid Templates

960px Photoshop Grid Template65
This template has a guide for a three-column 20-pixel gutter design, with layers of washed-out colors to visualize both columns for the purpose of the rule of thirds. Additionally, it is broken down into six columns of 20-pixel gutters.

Wireframe Resources66

960 Grid Template for OmniGraffle67

Wireframe Resources68

Illustrator Template for Blueprint CSS Comps69
This Adobe Illustrator document features a 24-column grid for CSS frameworks such as Blueprint. It consists of guides that comply with Blueprint’s grid of 24 columns of 30 pixels, 10-pixel-wide gutters and a horizontal width of 950 pixels. Horizontal guides are provided at 18 pixels or a 1.5 em line-height for a 12-pixel base font.

Wireframe Resources70

Photoshop Template for Blueprint CSS Comps71
This Photoshop document features a 24-column grid for CSS frameworks such as Blueprint. It consists of guides that comply with Blueprint’s grid of 24 columns of 30 pixels, 10-pixel-wide gutters and a horizontal width of 950 pixels. Horizontal guides are provided at 18 pixels or a 1.5 em line-height for a 12-pixel base font.

Wireframe Resources72

Mobile App Development Resources

Ultimate iPhone Stencil – Graffletopia73
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 Resources74

iPhone 3G Stencil75
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 Resources76

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

Wireframe Resources78

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

Wireframe Resources80

iPhone GUI as Rich Symbols for Fireworks81
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 Resources82

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

Wireframe Resources84

Optional Wireframe Extras

Interactive Sketch Notation85
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 Resources86

Storyboard Characters (via Google Chrome)87

Wireframe Resources88

Proofreading Marks89

Wireframe Resources90

Standard Web Banners91
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 Resources92

Wireframe Icons, Royalty-Free EPS and PNG93
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 Resources94

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

Wireframe Resources96

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

Wireframe Resources98

Printable Sketching Paper

A4 and A3 Sketching Grid Paper99
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 Resources100

Print and Sketch Wireframe Template101

Wireframe Resources102

iPhone Application Sketch Template103
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 Resources104

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

Wireframe Resources106

iPhone App Wireframe Template107
Two versions are available, one in landscape and the other in portrait. Each version includes three pages: page 1 has a vertical screen and notes column; page 2 has a horizontal screen and notes column; page 3 has a three-screen layout that is great for drafting designs.

Wireframe Resources108

Printable Wireframe and Notes

The below 8.5 x 11-inch graph paper109 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)

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 Elements110

Wireframe Resources111

Tabs, Buttons and Bars112

Wireframe Resources113

Windows and Dialogs114

Wireframe Resources115

Further Resources And Some Wireframing Inspiration

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

Wireframe Resources117

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 Resources119

Mockups To Go120
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 Resources121

Wireframes Magazine122
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 Resources123

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

Wireframe Resources125

About the Author

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



  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://medialoot.com/blog/freebie-massive-web-ui-button-set/
  10. 10 http://medialoot.com/blog/freebie-massive-web-ui-button-set/
  11. 11 http://developer.yahoo.com/ypatterns/about/stencils/
  12. 12 http://developer.yahoo.com/ypatterns/about/stencils/
  13. 13 http://www.jankoatwarpspeed.com/post/2009/12/24/sketching-wireframing-kit.aspx
  14. 14 http://www.jankoatwarpspeed.com/post/2009/12/24/sketching-wireframing-kit.aspx
  15. 15 http://unify.eightshapes.com/
  16. 16 http://unify.eightshapes.com/
  17. 17 http://konigi.com/tools/omnigraffle-wireframe-stencils
  18. 18 http://konigi.com/tools/omnigraffle-wireframe-stencils
  19. 19 http://konigi.com/tools/omnigraffle-ux-template
  20. 20 http://konigi.com/tools/omnigraffle-ux-template
  21. 21 http://www.graffletopia.com/stencils/63
  22. 22 http://www.graffletopia.com/stencils/63
  23. 23 http://www.webdesignerstoolkit.com/index.php
  24. 24 http://www.webdesignerstoolkit.com/index.php
  25. 25 http://piksels.com/photoshop-browser-templates/
  26. 26 http://piksels.com/photoshop-browser-templates/
  27. 27 http://vector.tutsplus.com/articles/news/vectortuts-freebie-vector-pack-browser-screens-and-website-elements/
  28. 28 http://vector.tutsplus.com/articles/news/vectortuts-freebie-vector-pack-browser-screens-and-website-elements/
  29. 29 http://www.designerstoolbox.com/designresources/safearea/
  30. 30 http://www.designerstoolbox.com/designresources/safearea/vista/ie/?PHPSESSID=85945e90123d8ed1080f4cbe3bd5c7ad
  31. 31 http://www.designerstoolbox.com/designresources/safearea/vista/ie/?PHPSESSID=85945e90123d8ed1080f4cbe3bd5c7ad
  32. 32 http://www.designerstoolbox.com/designresources/safearea/vista/firefox/?PHPSESSID=85945e90123d8ed1080f4cbe3bd5c7ad
  33. 33 http://www.designerstoolbox.com/designresources/safearea/vista/firefox/?PHPSESSID=85945e90123d8ed1080f4cbe3bd5c7ad
  34. 34 http://www.designerstoolbox.com/designresources/safearea/xp/ie/?PHPSESSID=85945e90123d8ed1080f4cbe3bd5c7ad
  35. 35 http://www.designerstoolbox.com/designresources/safearea/xp/ie/?PHPSESSID=85945e90123d8ed1080f4cbe3bd5c7ad
  36. 36 http://www.designerstoolbox.com/designresources/safearea/xp/firefox/?PHPSESSID=85945e90123d8ed1080f4cbe3bd5c7ad
  37. 37 http://www.designerstoolbox.com/designresources/safearea/xp/firefox/?PHPSESSID=85945e90123d8ed1080f4cbe3bd5c7ad
  38. 38 http://www.designerstoolbox.com/designresources/safearea/mac/firefox/?PHPSESSID=85945e90123d8ed1080f4cbe3bd5c7ad
  39. 39 http://www.designerstoolbox.com/designresources/safearea/mac/firefox/?PHPSESSID=85945e90123d8ed1080f4cbe3bd5c7ad
  40. 40 http://www.designerstoolbox.com/designresources/safearea/mac/safari/?PHPSESSID=85945e90123d8ed1080f4cbe3bd5c7ad
  41. 41 http://www.designerstoolbox.com/designresources/safearea/mac/safari/?PHPSESSID=85945e90123d8ed1080f4cbe3bd5c7ad
  42. 42 http://www.graffletopia.com/stencils/566
  43. 43 http://www.graffletopia.com/stencils/566
  44. 44 http://www.webdesignerstoolkit.com/forms.php
  45. 45 http://www.webdesignerstoolkit.com/forms.php
  46. 46 http://sniperyu.deviantart.com/art/Web-Form-Elements-104261528
  47. 47 http://sniperyu.deviantart.com/art/Web-Form-Elements-104261528
  48. 48 http://sniperyu.deviantart.com/art/Web-Form-Elements-Vol-2-146544080
  49. 49 http://sniperyu.deviantart.com/art/Web-Form-Elements-Vol-2-146544080
  50. 50 http://www.webdesignerstoolkit.com/buttons.php
  51. 51 http://www.webdesignerstoolkit.com/buttons.php
  52. 52 http://www.designerstoolbox.com/designresources/elements/
  53. 53 http://www.designerstoolbox.com/designresources/elements/vista/ie/
  54. 54 http://www.designerstoolbox.com/designresources/elements/vista/ie/
  55. 55 http://www.designerstoolbox.com/designresources/elements/vista/firefox/
  56. 56 http://www.designerstoolbox.com/designresources/elements/vista/firefox/
  57. 57 http://www.designerstoolbox.com/designresources/elements/xp/ie/
  58. 58 http://www.designerstoolbox.com/designresources/elements/xp/ie/
  59. 59 http://www.designerstoolbox.com/designresources/elements/xp/firefox/
  60. 60 http://www.designerstoolbox.com/designresources/elements/xp/firefox/
  61. 61 http://www.designerstoolbox.com/designresources/elements/mac/firefox/
  62. 62 http://www.designerstoolbox.com/designresources/elements/mac/firefox/
  63. 63 http://www.designerstoolbox.com/designresources/elements/mac/safari/
  64. 64 http://www.designerstoolbox.com/designresources/elements/mac/safari/
  65. 65 http://www.3point7designs.com/blog/2007/11/960px-photoshop-grid-template/
  66. 66 http://www.3point7designs.com/blog/2007/11/960px-photoshop-grid-template/
  67. 67 http://briancray.com/2009/11/30/omnigraffle-wireframing-960-grid-template/
  68. 68 http://briancray.com/2009/11/30/omnigraffle-wireframing-960-grid-template/
  69. 69 http://konigi.com/tools/illustrator-template-blueprint-css-comps
  70. 70 http://konigi.com/tools/illustrator-template-blueprint-css-comps
  71. 71 http://konigi.com/tools/photoshop-template-blueprint-css-comps
  72. 72 http://konigi.com/tools/photoshop-template-blueprint-css-comps
  73. 73 http://graffletopia.com/stencils/413
  74. 74 http://graffletopia.com/stencils/413
  75. 75 http://www.graffletopia.com/stencils/495
  76. 76 http://www.graffletopia.com/stencils/495
  77. 77 http://www.smashingmagazine.com/2008/11/26/iphone-psd-vector-kit/
  78. 78 http://www.smashingmagazine.com/2008/11/26/iphone-psd-vector-kit/
  79. 79 http://www.designerstoolbox.com/designresources/iphone/
  80. 80 http://www.designerstoolbox.com/designresources/iphone/
  81. 81 http://jcorrea.es/2008/08/07/iphone-gui-as-rich-symbols-for-fireworks/
  82. 82 http://jcorrea.es/2008/08/07/iphone-gui-as-rich-symbols-for-fireworks/
  83. 83 http://digitalphenom.deviantart.com/art/RIM-Blackberry-PSD-111857107
  84. 84 http://digitalphenom.deviantart.com/art/RIM-Blackberry-PSD-111857107
  85. 85 http://wireframes.linowski.ca/2009/10/interactive-sketching-notation-v0-1/
  86. 86 http://wireframes.linowski.ca/2009/10/interactive-sketching-notation-v0-1/
  87. 87 http://www.graffletopia.com/stencils/462
  88. 88 http://www.graffletopia.com/stencils/462
  89. 89 http://www.designerstoolbox.com/designresources/proofing/
  90. 90 http://www.designerstoolbox.com/designresources/proofing/
  91. 91 http://www.designerstoolbox.com/designresources/banners/
  92. 92 http://www.designerstoolbox.com/designresources/banners/
  93. 93 http://konigi.com/store/product/wireframe-icons-royalty-free-eps-and-png
  94. 94 http://konigi.com/store/product/wireframe-icons-royalty-free-eps-and-png
  95. 95 http://lazycrazy.deviantart.com/art/WEB-UI-Treasure-Chest-v-1-0-139165343
  96. 96 http://lazycrazy.deviantart.com/art/WEB-UI-Treasure-Chest-v-1-0-139165343
  97. 97 http://lazycrazy.deviantart.com/art/Webdesigner-kit-128351457
  98. 98 http://lazycrazy.deviantart.com/art/Webdesigner-kit-128351457
  99. 99 http://www.henkwijnholds.com/prolonging-the-magic-a4-sketching-paper/
  100. 100 http://www.henkwijnholds.com/prolonging-the-magic-a4-sketching-paper/
  101. 101 http://www.flickr.com/photos/alfonsobozzelli/3949828341/
  102. 102 http://www.flickr.com/photos/alfonsobozzelli/3949828341/
  103. 103 http://www.flickr.com/photos/owaters/3846053408/
  104. 104 http://www.flickr.com/photos/owaters/3846053408/
  105. 105 http://interactivelogic.net/wp/2009/09/iphone-wireframe-templates/
  106. 106 http://interactivelogic.net/wp/2009/09/iphone-wireframe-templates/
  107. 107 http://fullofdesign.com/posts/iphone-app-wireframe-template/
  108. 108 http://fullofdesign.com/posts/iphone-app-wireframe-template/
  109. 109 http://konigi.com/tools/graph-paper
  110. 110 http://konigi.com/tools/wireframe-magnets-diy-kit
  111. 111 http://konigi.com/tools/wireframe-magnets-diy-kit
  112. 112 http://konigi.com/tools/wireframe-magnets-diy-kit
  113. 113 http://konigi.com/tools/wireframe-magnets-diy-kit
  114. 114 http://konigi.com/tools/wireframe-magnets-diy-kit
  115. 115 http://konigi.com/tools/wireframe-magnets-diy-kit
  116. 116 http://webwithoutwords.com/
  117. 117 http://webwithoutwords.com/
  118. 118 http://www.graffletopia.com/
  119. 119 http://www.graffletopia.com/
  120. 120 http://mockupstogo.net/
  121. 121 http://mockupstogo.net/
  122. 122 http://wireframes.linowski.ca/
  123. 123 http://wireframes.linowski.ca/
  124. 124 http://wireframes.tumblr.com/
  125. 125 http://wireframes.tumblr.com/
  126. 126 http://www.smashingmagazine.com/2009/09/01/35-excellent-wireframing-resources/
  127. 127 http://boxesandarrows.com/view/sketchy-wireframes
  128. 128 http://articles.sitepoint.com/article/tools-prototyping-wireframing
  129. 129 http://speckyboy.com/
  130. 130 http://twitter.com/speckyboy

↑ 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

    wow.. really for me! i;m a newbie for web design. hehehehe…

  2. 152

    Great post!

    Here´s a wireframes kit for Adobe Fireworks:

  3. 303

    Very Useful. Thanks!

  4. 454

    Nice collection! Here is also a list of inspiring and creative web design interfaces, check this out: funspill.com/30-inspiring-web-design-interfaces/

  5. 605

    Smashing collection! ;-) Thanks!

    Web Form Elements Volume 1 and 2 is no longer free. The designer is charging a small fee for it now, so it should be removed from this list or a comment added to it to say so.

  6. 756

    I just found this wonderful resource. Thank you so much for pulling this all together in one place!

  7. 907

    Thanks a lot. A great article that I’ve enjoyed reading it. Very nice job! Concise and very useful

  8. 1058

    Excellent Stuff. Thanks

  9. 1209

    Big thanx !

  10. 1360

    Awesome post, thanks for the tools

  11. 1511

    Thanks a lot. A great article that I’ve enjoyed reading it. Very nice job!

  12. 1662

    Very very very good job!

  13. 1813

    Great collection of resources! Thanks for sharing.

  14. 1964

    Greate work thanks

  15. 2115

    Hello all, I’m quite new to extension writing, have been through multiple tutorials, and am now attempting to create an extension that exposes a class Graph and a class Category. Graph needs to have a graph->getCategory() method which returns at software reviews…

  16. 2266

    great article. killerbeeprinting.com is the site i am working on and i’m learning a lot about wireframing.

  17. 2417

    Excellent resource. Thanks for pulling all of this together. Great, well-presented time-savers.

  18. 2568

    This is an amazing set of resources! Thanks for sharing such a great collection.

  19. 2719

    Thank you for sharing this!!!! I love you guys!!!

  20. 2870

    i found gr8 things

    atul bhaelrao

  21. 3021

    Many thanks for shearing all these tamplates, wireframess, etc. and pulling all them together. You Rock, guys!!

  22. 3172

    Wow thats awesome!!! thanks!

  23. 3323

    Amazingly beautiful page….one of the best collection of Wireframe resource I have seen in a long time…Great work and thanks!

  24. 3474

    I love smashing magazine ;-)

  25. 3625

    Hi, this is very useful.
    The links to download the wireframes and story boards under this section
    Printable Wireframe and Notes
    are not working.
    Kindly check them.

  26. 3776

    Great collection!

    For those doing interaction design for BlackBerry: we have a BlackBerry mockup template for Fireworks available on our blog: http://unitid.nl/2011/02/blackberry-mockup-template-for-fireworks

    Inge Kuijper
    Interaction Designer

    • 3927


      March 25, 2011 1:11 pm

      thank for sharing it this is really nice and helpful for my next project , i will share the what i did with this :)

  27. 4078

    exactly what I’ve been looking for~ thanks alot ^^

  28. 4229


    March 25, 2011 1:09 pm

    this resource is one of my favorite and most useful for creating the UI Design, i would be more thankful if i can get some more resource for iPad UI Design

  29. 4380

    Thanks for compiling this awesome list of resources. I keep coming back. Uber-useful.

  30. 4531

    Excellent post, its the great resources for web designers!
    Thanks for sharing!!!

  31. 4682

    great thanks awesome work

  32. 4833

    Absolutely excellent set, thank you! I’ve returned to this because of my freelance work for iphone.

  33. 4984

    Excellent resource. A question can we use Janko kit with Axure? Any idea guys?

  34. 5135

    This is absolutely wonderful and very useful. This actually cuts down on the design time when you want to show your client the important steps of how their project will come to be. Im never disappointed with the stuff i read from you guys. :-D

  35. 5286

    We just launched http://decalcms.com/mockups which is a “content focused” live wireframe tool which allows you (or your clients!) to put together high quality structural markup (using http://stacklayout.com/ CSS) but with very little “design” being done.

    The focus is on “content preceding design”. I’d love to hear everyone’s thoughts on it!

  36. 5437

    Mostafa Hoseinimehr

    July 6, 2011 4:24 am

    thank a lot for this useful post.

  37. 5588

    How these PSD UI Elements can be converted to real HTML Markup, ie, functional UI Elements with same Look and feel(combined with CSS & JavaScript)

  38. 5739
  39. 5890

    GREAT RESOURCE! Very extensive.

  40. 6041

    Prismic Reflections

    August 17, 2011 5:00 am

    Thanks for sharing useful post……

  41. 6192

    this is the motherlode!

  42. 6343

    Paul, I love you for this amazing brilliant collection. I’m going to save the whole lot before this link mysteriously disappears. You truly saved me hours with all these goodies. Thank you.

  43. 6494

    Wow! Nice list :) I don’t use Illustrator or Photoshop yet (been sticking to my comfort zone with PowerPoint and now Keynote – yes I finally got a mac! Love using the Keynotopia templates as a complement to those programs (Keynote especially -I’m surprised you didn’t include it above as a tool for wireframing/prototyping). It’s just a simple tool to learn and I love its usability (and price point…). Someday I’ll have to try out the Adobe suite.

  44. 6645

    This is awesome! Absolutely useful to me!

  45. 6796

    I got tired of trying to find the widgets I needed to do a professional Android wireframe. So I created them.

    Visio stencil wireframing kit for Android Holo.

  46. 6947

    You should consider FlairBuilder too flairbuilder.com/

  47. 7098

    So much effort put in this! Oh my gosh, thanks!


↑ Back to top