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

You know, we use ad-blockers as well. 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. our upcoming SmashingConf New York, 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.

You may also be interested in the following related posts:

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 Kit4
Leopardy interface stencil kit. This one makes extensive use of tables, for maximum flexibility while maintaining pixel precision.

Wireframe Resources5

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

Wireframe Resources7

Flex Stencil Kit8
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 Resources9

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

Wireframe Resources11

Yahoo! Design Stencils – Design Pattern Library12
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 Resources13

Free Sketching & Wireframing Kit14
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 Resources15

EightShapes Unify16
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 Resources17

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

Wireframe Resources19

OmniGraffle UX Template20
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 Resources21

Web Page Elements22
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 Resources23

Web Browser Templates Link

Photoshop Browser Templates – Web Designer Toolkit24
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 Resources25

Web-Safe Area Templates for Photoshop Link

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

Wireframe Resources28

Windows Vista Firefox Web-Safe Area29

Wireframe Resources30

Windows XP IE Web-Safe Area31

Wireframe Resources32

Mac OS X Safari Web-Safe Area33

Wireframe Resources34

Mac OS X Firefox Web-Safe Area35

Wireframe Resources36

Mac OS X Safari Web-Safe Area37

Wireframe Resources38

Web Form Elements Link

Best Practice UX Forms Stencil39
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 Resources40

Photoshop Form Element Templates41
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 Resources42

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

Wireframe Resources44

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

Wireframe Resources46

Photoshop Button Templates47
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 Resources48

Web Browser Elements Link

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

Windows Vista IE Form Elements50

Wireframe Resources51

Windows Vista Firefox Form Elements52

Wireframe Resources53

Windows XP IE Form Elements54

Wireframe Resources55

Windows XP Firefox Form Elements56

Wireframe Resources57

Mac OS X Firefox Form Elements58

Wireframe Resources59

Mac OS X Safari Form Elements60

Wireframe Resources61

Grid Templates Link

Mobile App Development Resources Link

Ultimate iPhone Stencil – Graffletopia62
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 Resources63

iPhone 3G Stencil64
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 Resources65

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

Wireframe Resources67

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

Wireframe Resources69

iPhone GUI as Rich Symbols for Fireworks70
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 Resources71

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

Wireframe Resources73

Optional Wireframe Extras Link

Interactive Sketch Notation74
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 Resources75

Storyboard Characters (via Google Chrome)76

Wireframe Resources77

Proofreading Marks78

Wireframe Resources79

Standard Web Banners80
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 Resources81

Wireframe Icons, Royalty-Free EPS and PNG82
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 Resources83

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

Wireframe Resources85

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

Wireframe Resources87

Printable Sketching Paper Link

A4 and A3 Sketching Grid Paper88
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 Resources89

Print and Sketch Wireframe Template90

Wireframe Resources91

iPhone Application Sketch Template92
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 Resources93

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

Wireframe Resources95

Printable Wireframe and Notes Link

The below 8.5 x 11-inch graph paper96 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 Elements97

Wireframe Resources98

Tabs, Buttons and Bars99

Wireframe Resources100

Windows and Dialogs101

Wireframe Resources102

Further Resources And Some Wireframing Inspiration Link

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

Wireframe Resources104

Graffletopia105
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 Resources106

Mockups To Go107
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 Resources108

Wireframes Magazine109
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 Resources110

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

Wireframe Resources112

(al)

Footnotes Link

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

↑ 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! One of the best posts ever!

    Thanks a lot!

    2
  2. 2

    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!

    1
  3. 3

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

    http://balsamiq.com/

    -1
  4. 4

    Very useful, thank you!!

    0
  5. 6

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

    THANKS A LOT

    0
  6. 7

    Johan Pettersson

    February 5, 2010 6:21 am

    This is exactly what I needed.

    Thanks SM!

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

    This is all very helpful! Thanks!

    BTW, the images are all broken on this page. Opened it in 3 different browsers and they all still show up as broken images. FYI.

    :)

    0
  22. 24

    I didn’t count but are they really 50? must be more than that.
    Looks like a huge list. Isn’t it?
    Amazing share!!!

    0
  23. 25

    The best solution for speed and low cost design…

    0
  24. 26

    What a great roundup!! Probably the best I’ve seen so far and these are tools every designer should have in their bag.

    0
  25. 27

    Fantastic resource! Thank you to those who amassed this very through list!

    0
  26. 28

    this is awesome! really useful

    0
  27. 29

    Just what I needed! :)

    0
  28. 30

    Kartlos Tchavelachvili

    February 5, 2010 9:43 am

    wow, useful huge list :) thanks for sharing.

    0
  29. 31

    unbelievable collection, thanks so much!

    0
  30. 32

    By far the best collection of resources I’ve ever seen on SM. Thanks a ton!

    0
  31. 33

    Evandro Temperin

    February 5, 2010 9:54 am

    Oooooohhh yeah baby…
    Tks a lot.

    0
  32. 34

    Great post! How come Balsamiq Mockups got left out?

    0
  33. 35

    brilliant,
    i was trawling around for iphone kits just this week
    really useful stuff, thanks.

    0
  34. 36

    awesome collection!

    0
  35. 37

    Thank you!!

    0
  36. 38

    Great roundup you guys. Tons of stuff for the developers toolkit. THX!

    0
  37. 39

    nurul amin russel

    February 5, 2010 10:22 am

    very useful collection

    0
  38. 40

    Great set! Thank you.

    PS. I’d add free wireframe icon set in black and white colors from http://www.gentleface.com. And inPreso Screens free wireframing app which includes MacOS X, Win Vsita, Win XP skinned controls.

    0
  39. 41

    Thank you so much!

    0
  40. 42

    I want Chrome browser template, never seen any. Need to make by myself…

    0
  41. 44

    This is just the kind of stuff I’ve been painfully hashing together all the time, awesome collection of resources. Nice job.

    0
  42. 45

    Amazing resources!!

    0
  43. 47

    Dmitriy Podluzny

    February 5, 2010 11:43 am

    nothing new. availability of libraries in itself solves nothing.

    0
  44. 49

    Nothing about online tools, like http://www.iplotz.com ?

    0
  45. 50

    About time! Thanks

    0
  46. 51

    thanks really useful

    0
  47. 52

    Fantastic resources. Thanks

    0
  48. 53

    such a good article!! thanks!

    0
  49. 54

    Madalina Iordache-Levay

    February 5, 2010 1:10 pm

    This is such a timesaver, thank you so much for putting this list together!

    0
  50. 55

    Steve Benjamins

    February 5, 2010 1:21 pm

    I have never left a message on Smashing Magazine. But my god, this is an insanely useful and eye opening post.

    0
  51. 56

    I love the eightshapes unify system. Its not only makes wireframing extremely quick and uniform, but it also speeds up the process of putting together comprehensive UX deliverables.

    0
  52. 57

    Great post! I’d like to recommend Dummy Image Generator for creating image placeholders. Go to r: http://dummyimage.com/ and type in the dimensions you need into the browser address bar, right after the URL, e.g.; r: http://dummyimage.com/728×90 …instantly generates a gif image in that size!

    0
  53. 58

    That Guy John

    February 5, 2010 2:15 pm

    Hey Hey, Love it, Love it.

    Bookmarked :)

    0
  54. 59

    Great for wireframing (on the fly?): http://gomockingbird.com

    0
  55. 60

    I just used Hotgloo (a free web-based wireframe tool that’s still in BETA) for a website redesign project and found it super useful. It user-friendly for newbies and allowed me to visual what I wanted for our site and convey it to our web developer.

    0
  56. 61

    Best post evarrrrr!!!!!1

    0
  57. 62

    Chris Kuhlman

    February 5, 2010 5:00 pm

    I agree with Steve, I’ve never left a comment here (but I’ve been here about every day for the past 4 years) and this might be the most amazing/helpful post I’ve ever read.

    0
  58. 63

    I mainly design in the browser, and have done for a while, but still love to do some wireframing from time to time! I have to say I prefer to do it on paper though, it’s less restrictive than working on screen, and really helps the ideas flow.

    0
  59. 64

    awesome list Smashing..
    Thanks for the post..

    0
  60. 65

    Smashing list! Thaks for the post.

    0
  61. 66

    Shivendra Singh

    February 5, 2010 11:27 pm

    Thanks Paul, Really nice content for UI designers like us, The mobile Wireframes are really nice and i am also using http://www.gomockingbird.com (Free Online Wire framing Tool) & Balsamiq Mockup. Really helpful thanks once again

    0
  62. 67

    Great post! Just what I needed…
    Maybe MockApp could also be of interest:
    http://mockapp.com/

    0
  63. 68

    Super ecxelente y muy util… gran trabajo, me han ahorrado horas con esta magnifica recopilacion. Sigan asi !!! XD

    1
  64. 69

    Great collection, thanks!

    The guys over at iA just released a wireframing kit for the iPad.

    http://informationarchitects.jp/ipad-stencil-for-omnigraffle/

    0
  65. 70

    Hey,

    I’ve got a question concerning the Mac-Interface. I’m planning to create an online service which fit’s perfectly into the mac look-and-feel. Is it okay to use the original graphics on my website? Is there any statement of apple if I can use the graphics? I do not want to claim it as my graphics but enable mac-users a perfect mac-experience…

    Best regards!

    0
  66. 71

    It’s Great!
    thx

    0
  67. 72

    Thank you for that! Just what i was looking for. Very helpful.

    0
  68. 73

    A must to have !! Thxs.

    0
  69. 74

    Joseph Crotty

    February 6, 2010 1:42 pm

    Great stuff guys!

    0
  70. 75

    AWESOME POST! THANK YOU!!!

    0
  71. 76

    Just what I need to get a job done by next week. So precious !

    0
  72. 77

    http://wireframesketcher.com/ is absolutely worthwhile mentioning.

    0
  73. 78

    OK- Now, THAT’S Smashing Magazine I like and want to come back for. This kind of article truly HELPS graphic designers. Forget the boring “inspirational” articles. Give me more time saver articles like this!
    In one word: BRAVO.

    1
  74. 79

    Hey!! Thanks for that… That’s Preety Awesome :)

    0
  75. 80

    Fantastic roundup!

    0
  76. 81

    “Wireframe Icons, Royalty-Free EPS and PNG”
    is not free! *dummy*

    Free License – $29.99
    LOL)))

    0
  77. 82

    Great work!

    0
  78. 83

    Alastair Driver

    February 7, 2010 1:59 am

    Android Templates for Sketching

    Have some Android paper 3-up handsets to scale for printing here

    http://glidergun.futureplatforms.com/2010/01/12/android-wireframe-templates

    0
  79. 84

    very precious!

    0
  80. 85

    Wonderfull resource! Bookmarkable as of old.

    0
  81. 86

    Nice!!!

    0
  82. 87

    very useful article for designers.
    Great collection and useful resource.. Thanks Paul.

    0
  83. 88

    Very nice :) I though think there is a mistake with the Safe Area part, as one of the captions write “Mac OS X” but the image shows a Windows screen.

    0
  84. 89

    Gustavo Rocha

    February 7, 2010 6:49 pm

    This is amazing! ;]

    Great article.

    0
  85. 90

    thank you thank you thank you!!! Excellent post!

    0
  86. 91

    Incredible collection! Thank you!

    0
  87. 92

    this is awesome!!! Thanks!

    0
  88. 93

    This is really helpful and brilliant stuff. Very well organized.
    Thank you for sharing!

    0
  89. 94

    great… useful info!!!

    0
  90. 95

    its totaly awesomeeeeeee………. this will really going to help me….. thanks man :)

    0
  91. 96

    I will not use it. But nice post. Good job:)

    0
  92. 97

    WOOT!!!!!! THANKS YOU VERY MUCH!!

    0
  93. 98

    Awesome !! Great compilation

    0
  94. 99

    Great collection. This really helps me a lot :)
    Thanks a lot :)

    0
  95. 100

    wow. I mean WOW!
    Brilliant collection :-)

    0
  96. 101

    Really nice – thank you very much!!!

    0
  97. 102

    Unfortunately the Wireframe Icons, Royalty-Free EPS and PNG are not available. The page and site is offline from the included link: http://konigi.com/store/product/wireframe-icons-royalty-free-eps-and-png

    Are they available somewhere else?

    1
  98. 103

    Yes, Matt! I also wrote in the comments above!
    I want this useful icons!

    0
  99. 104

    brilliant list, thanks so much!

    0
  100. 105

    Extremely useful! Thanks so much.

    1
    • 106

      Hi folks, like this list but realize it might need updating? If you’re looking for something a little bit newer and more flexible, there’s a smarter, faster way to create hi and low fidelity mobile prototyping apps using just a drag and drop tool. You can share with your team and clients for fast feedback, and then try it on your own phone – check out the browser based prototype tool https://www.fluidui.com/editor/live/

      Also, see the new easy to follow ‘how to get started’ video clips on YouTube
      http://www.youtube.com/watch?v=uodln1GmrFM Hope this helps! :)

      Cheers,
      Ronan (Fluid UI)

      2
  101. 107

    Malaysia Crunch

    February 9, 2010 3:52 pm

    Great list!

    I use Axure and MS Excel for my wireframing work. :)

    0
  102. 108

    Great collection Paul Andrew, well done… thanks for sharing :)

    6
  103. 109

    Timothy Scahill

    February 10, 2010 1:53 am

    Awesome! Thanks!

    1
  104. 110

    Fantastic collection – my eyes are swirling! Thanks!!

    1
  105. 111

    Beautiful list. Thanks guys

    0
  106. 112

    Great post. This goes high in the bookmarks menu.
    Here’s one more resource — blackberry wireframe templates for visio and omnigraffle:
    http://smackerel.net/smackerels/2009/12/blackberry-wireframe-stencils.html

    1
  107. 113

    *Golf clap* Well played Smashing, well played.

    0
  108. 114

    Great resource. Will come in very handy!! :)
    Thanks!

    0
  109. 115

    Ivan Lazarevic

    February 10, 2010 5:09 pm

    I really like Web Form Elements Volume 1 and 2

    1
  110. 116

    epic!

    0
  111. 117

    Thank you so much…
    A lot of VERY useful resources…

    0
  112. 118

    Very useful post, thanks a million.

    0
  113. 119

    Very useful! Thanks very much.

    -1
  114. 120

    David PHILIPPE

    February 13, 2010 8:19 am

    Very useful post indeed! I usually start my wireframe with one of the grids from 960 Grid System (http://960.gs/) but this article has to be the icing on the cake with so many graphic resources.

    0
  115. 121

    awesome article. thanks

    0
  116. 122

    very very useful thanks a ton
    rajan

    0
  117. 123

    Another epic post from SM – great work guys, some really useful kit in here. Thanks.

    0
  118. 124

    Marvelous and useful post. Thanks a lot!!!

    0
  119. 125

    Rodrigo Acevedo

    February 19, 2010 5:01 am

    Thank u guys!
    I love when you publish very useful post!
    Marvelous!

    Regards form Chile

    0
  120. 126

    Matthew Stibbe

    February 22, 2010 2:16 am

    Amazing list. Very useful. I think you may have missed a few useful tools, however. I use Balsamiq almost daily and I think a few other commenters have mentioned it. Also, Templatr, Caretta, Serena, Pencil, Protoshare and Denim.

    Full reviews on my site: http://www.badlanguage.net/seven-website-mockup-tools

    1
  121. 127

    Plamen Dragozov

    February 23, 2010 2:29 am

    Last week we released StencilsApp (http://www.stencilsapp.com) – an iPhone app for visual design and wireframing directly on the device.
    It could be of interest for readers working on mobile UI designs.

    0
  122. 128

    What a great compilation. You guys are awesome. Love Matthew Stibe’s post as well.

    1
  123. 129

    Thank youuuu!

    0
  124. 130

    Appreciate the time it takes you guys to put these resources together… fantastic work!

    0
  125. 131

    Very good collection! Thank you!

    0
  126. 132

    Fernando Pace

    March 9, 2010 11:00 am

    Amazing, great tools to my works. Tks!

    0
  127. 133

    your posting just rocking dude

    0
  128. 134

    One of the most useful collection………………

    thanks……………………………………………………..

    0
  129. 135

    Need more articles like this – make life for a designer a lot easier

    0
  130. 136

    Good clean article – it’ll save our time in future! Thanks!

    0
  131. 137

    maher jilani

    March 26, 2010 3:12 pm

    OH MY GOD! this is REALLLLY good!!!!!!

    0
  132. 138

    great article!!!!

    0
  133. 139

    Fantastic – It will save me so much time googling resources in future :) 5/5

    0
  134. 140

    OMG! It’s awesome! 10/5!!! )))

    0
  135. 141

    Jonathan Lax

    April 11, 2010 3:41 am

    wow. what a great great article!

    0
  136. 142

    Michael Hughes

    April 17, 2010 8:15 am

    Great article with some awesome tools. Thank you!

    1
  137. 143

    very instructive article

    0
  138. 144

    Renato Carvalho

    April 27, 2010 7:50 pm

    Thanks for all the resources, very useful :)

    This week we released the Facebook GUI free PSD resource.

    http://surgeworks.com/blog/design/facebook-gui-free-psd-resource

    It will be very useful for designers to prepare Facebook apps with agility.

    I hope you guys like!

    0
  139. 145

    Sahus Pilwal

    April 28, 2010 2:28 am

    Thanks for all the links & resources. They are coming really handy with a redesign I’m working on. ;)

    0
  140. 146
  141. 147

    PSD download at Quommunnication Stencil Kit gives a broken psd file. Since Quommunnication Stencil Kit is the #1 solution that you discuss in this post and that it does NOT work makes this post less useful in reality.

    0
  142. 148

    I throw in one more tool here, available for Windows and for Firefox Browsers on any System:
    http://www.pidoco.com – a nice alternative to the existing tools around, plus: a collaboration feature that’s quite handy in daily use.

    0
  143. 149

    Leydi Marí

    May 24, 2010 12:38 pm

    I´m really glad that i found this post!!..i´s very useful! Thank you for all the information! Does anybody knows about the iplotz app? I´m thinking in getting my account , but i have no recommendations for it, i´d really appreciate any comment!

    0
  144. 150

    Nice list,
    I just released my own vector icon library for creating wireframes and designing online applications. 290 vectors icons for free :-)
    http://www.webalys.com/design-interface-application-framework.php
    I plan to extend it to a full Interface design framework in the next weeks.
    Thanks,

    0
  145. 151

    Andy Phillips

    June 11, 2010 10:32 am

    Great resource!

    0
  146. 152

    This post was very useful. Thanks a lot.

    0
  147. 153

    Found this whilst looking for Blueprint CSS tips. Awesome collection definitely bookmarking for future reference.

    0
  148. 154

    A nice alternative : http://www.mockflow.com/
    Design, collaborate (in real-time) user interface mockups for your software and websites.

    0
  149. 155

    Animation Institute

    August 21, 2010 12:02 am

    Very useful post, thanks. send more..

    0
  150. 156

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

    0
  151. 157

    Very Useful. Thanks!

    0
  152. 158

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

    0
  153. 159

    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.

    0
  154. 160

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

    0
  155. 161

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

    0
  156. 162

    Excellent Stuff. Thanks

    0
  157. 163

    Big thanx !

    0
  158. 164

    Jonathan Holmes

    October 12, 2010 9:01 am

    Awesome post, thanks for the tools

    1
  159. 165

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

    1
  160. 166

    Great.
    Very very very good job!

    0
  161. 167

    Brett Widmann

    October 28, 2010 2:56 pm

    Great collection of resources! Thanks for sharing.

    0
  162. 168

    Greate work thanks

    0
  163. 169

    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…

    0
  164. 170

    Brett Anderson

    November 20, 2010 8:05 pm

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

    1
  165. 171

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

    0
  166. 172

    Brett Widmann

    December 9, 2010 8:03 am

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

    0
  167. 173

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

    0
  168. 174

    i found gr8 things

    -thanks
    atul bhaelrao

    0
  169. 175

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

    0
  170. 176

    Wow thats awesome!!! thanks!

    0
  171. 177

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

    0
  172. 178

    I love smashing magazine ;-)

    0
  173. 179

    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.

    0
  174. 180

    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
    unitid.nl

    0
    • 181

      DesignMyTemplate

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

      0
  175. 182

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

    0
  176. 183

    DesignMyTemplate

    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

    0
  177. 184

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

    0
  178. 185

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

    0
  179. 186

    great thanks awesome work

    0
  180. 187

    Lukasz Bachur

    June 5, 2011 4:05 am

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

    0
  181. 188

    Umer Farooq

    June 12, 2011 1:03 pm

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

    0
  182. 189

    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

    1
  183. 190

    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!

    0
  184. 191

    Mostafa Hoseinimehr

    July 6, 2011 4:24 am

    thank a lot for this useful post.

    0
  185. 192

    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)

    0
  186. 193
  187. 194

    GREAT RESOURCE! Very extensive.
    Thanks!

    0
  188. 195

    Prismic Reflections

    August 17, 2011 5:00 am

    Thanks for sharing useful post……

    0
  189. 196

    this is the motherlode!

    0
  190. 197

    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.

    1
  191. 198

    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.

    0
  192. 199

    This is awesome! Absolutely useful to me!

    0
  193. 200

    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.

    0
  194. 201

    You should consider FlairBuilder too flairbuilder.com/

    1
  195. 202

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

    0

↑ Back to top