Free Wireframing Kits, UI Design Kits, PDFs and Resources

Advertisement

To mock-up the user interface of a website, software or any other product, you’ll need some basic UI elements. And this is where wireframing kits and UI design kits come in handy. When you want to create a low-fidelity prototype for your projects, you can use these kits to give your idea a certain shape, keeping it abstract and not losing yourself in details.

In this post, we’ve prepared an overview of useful web and mobile user interface kits, handy PDFs and resources that you can use in your projects. We’ve carefully selected the most useful kits and resources to get you going in the early stages of a project.

Free Mobile GUI PSD

Android GUI PSD1
This Android GUI PSD is based on elements of the Android 1.5 GUI and was made to help the open-source community with its Android application mock-ups. Most of the elements and phone illustrations are done in vector paths and so are easily resizable. Android Sans was used for the text.

Screenshot2

RIM Blackberry PSD3
A complete PSD file with layer styles, this has 135 layers of Photoshop goodness.

Screenshot4

Android Sketch Stencil Version 1.05
A Sketch-style Android OmniGraffle template. The purpose of the sketch style wireframe is to prevent the audience from thinking about visual design and encourage them to focus instead on functionality and behavior.

Android Sketch Stencil Version 1.06

All elements of Maemo 5 GUI in PSD7
This downloadable PSD file contains GUI template elements for the Maemo platform. These are indispensable for prototyping GUI applications running on Maemo devices.

Screenshot8

iPhone 4 GUI PSD (Retina Display)9
GUI PSD kit for creatives who design for the retina display (640×960). The file is huge, both in file size (62.7MB) and dimension (4074×2986). You’ll need to work at 25% – 50% even on the largest screens to roughly grab elements before zooming into 100% for the actual work.

Screenshot10

iPad GUI Kit in PSD 11
This version offers a canvas size true to the iPad at 768×1024. In addition, most of the graphical elements are provided in vector format, allowing you a lot of room to scale up for high-resolution presentations. This version is layered in Photoshop, making it easy for you to go nuts with your mock-ups and client presentations.

Screenshot12

Android 1.6 Wireframe stencil for Omnigraffle13
Download this beautiful wireframe stencil add-on for OmniGraffle 5.x. Use this toolkit to wireframe Android-based apps and websites on the 1.6 Donut SDK.

Android 1.6 Wireframe stencil for Omnigraffle14

Google Android GUI PSD15
Here are the GUI elements of Android, built using vectors to scale.

Screenshot16

iPad GUI PSD Kit17
This pack includes full size graphics, as well as 256, 128 and 64 pixel icon sizes. The pack includes four sizes of the iPad graphic in PSD, PNG and Mac ICNS formats.

Screenshot18

Google Android PSD19
A stencil set for Google Android prototyping.

Screenshot20

Fireworks template for Android21
In this Fireworks template, Android UI elements have been redrawn as vector images. In the folders, the elements have been mostly labeled according to the Android vocabulary.

Screenshot22

Sexy Vector Cell Phone23
This phone can be scaled to any size. Easily add your own image to the screen with the included object mask. All objects are layered, grouped and labeled for easy customization.

Screenshot24

iPad Stencil for Omnigraffle25
Contains backgrounds, title bars, buttons, selectors and other iPhone UI elements. The text is fully editable in lists, title bars, buttons and scroll wheels.

Screenshot26

iPhone App Wireframe Template27

Screenshot28

Mobile – iPhone29

Screenshot30

iPhone GUI Elements31
Some beautiful iPhone elements. All graphics are layered Photoshop files.

Screenshot32

iPad and iPhone Design33
Design your application for the iPhone, iPod Touch and iPad with this exhaustive set of stencils. All stencils were created by hand with native OmniGraffle shapes, and groups and can be scaled, resized and exported to other vector formats in Graffle.

Screenshot34

Design Stencil for iPhone and iPad35
A stencil for designing OS applications for the iPhone, iPod Touch and iPad. The stencil for now is targeted at developers familiar with the default characteristics of the views and controls provided by UIKit.

Design Stencil for iPhone and iPad36

Apple iPad fully editable PSD37
A fully editable Apple iPad in PSD format. Every element you see is editable via vector masks, and everything is scaleable.

Icon designer Kevin Andersson » Apple iPad fully editable PSD38

Palm Pre GUI PSD39
This set contains a PSD to help designers pitch and develop polished concepts using Photoshop.

Screenshot40

iPhone UI Vector Elements41
Most visuals for applications start out as vector mock-ups in Adobe Illustrator. So, here are some cool iPhone UI vector elements. And there are even a few good Photoshop resources and even a nice OmniGraffle iPhone UI file or two in there.

iPhone UI Vector Elements42

iPad Vector GUI Elements: tabs buttons menus icons43
This set contains almost all of the iPad UI elements, including buttons, tabs, menus, keyboard and balloons. Useful for designers and developers, it includes scalable and totally editable vector versions (AI).

ipad vector GUI elements: tabs buttons menus icons44

Free Social Networking GUI PSD Kits

Free Full-Layered Facebook GUI PSD Kit45
The idea behind this kit is to speed up the prototyping of Facebook application UIs and Facebook fan pages, sparing you from drawing all the comps and letting you customize all the text, buttons and data as you need. The kit is free to use in all projects, without any restrictions.

Screenshot46

Facebook GUI Free PSD Resource47
A Facebook graphic user interface (FBGUI) resource kit for Photoshop to make your work easier.

Screenshot48

Facebook Applications49
A sizable collection of elements for creating wireframes for Facebook applications.

Screenshot50

Omnigraffle Twitter Widget Stencil51
This set includes a selection of useful Twitter widgets and badges.

Screenshot52

Wireframing Kits

Best Practice UX Forms Stencil v1.153
A comprehensive release of stencil that follows best practices for UX form design, providing three different ways to lay out forms, each with its own benefits. This version also provides different button layouts, a progress indicator, a Captcha code input field, labels and more.

Screenshot54

Form Elements UI Kit55
Form elements stencil from the Design Stencil kit in the Yahoo! Design Pattern Library.

Form Elements UI Kit56

Wireframe Shapes57
Here is a set of shapes for making wireframes in OmniGraffle version 5.x ( forMac OS X). It consists of most of the basic elements you’ll need to create user interface specifications.

Wireframe Shapes58

Wireframe kit for UI Designers59
A set of various wireframes, such as product details, list of items, front page, mobile phone.

Wireframe kit - Google Text & Tabellen60

MBTI sketching paper for ideation61
MBTI sketching paper for ideation sessions. It helps you think inside the box of four personality traits. Describe a design challenge and the problem to solve on every piece of paper. There’s also space for annotations.

MBTI sketching paper for ideation62

A4 sketching paper63
This sketching paper can be used after generating ideas for functionality. Design preliminary screens based on the ideas you come up with.

A4 sketching paper64

Wireframe Magnets (DIY Kit)65
This DIY magnet template is based on the Konigi wireframe stencils, and it includes three sheets of elements that might be useful for whiteboard prototyping. Simply download and print the PDFs onto magnet sheets, optionally laminate them if you intend to use with dry-erase markers, and then cut them out.

Wireframe Magnets (DIY Kit)66

Paper wireframe templates67
The finished product include seven variations, as well as PSDs.

Paper wireframe templates68

Wireframe template69
A useful print-and-sketch template available for downloading.

Wireframe template70

iPad Idea Sheet71
A total of three sheets: one full size (landscape), one at 70% reduction (vertical) and one at 50% reduction (landscape). The 80 tiny dots make it easy to split the screen horizontally and vertically.

iPad Idea Sheet72

Scenario, Taskflow and Grid Sketch Sheets73
A set of beautiful printable sheets for ideas and sketching

Scenario, Taskflow and Grid Sketchsheets74

Free Photoshop browser template75
Need a clean browser screenshot for a design presentation? Look no further. These free professional Photoshop browser templates come in 1024×768 and 800×600 pixel sizes and all kinds of flavors.

Free Photoshop browser template76

Interactive Sketching Notation 0.177
The idea behind this notation is to visualize user interface states as well as user actions in a clear and rapid manner.

Interactive Sketching Notation 0.178

MobileMe Full iPhone GUI79
For use with WinterBoard, this is a beta release, so there may be unthemed elements.

MobileMe Full iPhone GUI80

Android Wireframe Templates (PDF)81

Android Wireframe Templates (PDF)82

Free Keynote UX Stencils83

Free Keynote UX Stencils84

Advertising Stencil Kit85
A set of very useful advertising stencils.

Advertising Stencil Kit86

Dragnet website wireframes kit v 0.987
Dragnet website wireframes kit v0.9 is a common library for Adobe Fireworks and contains over 25 objects that are useful for rapid prototyping of websites. It is completely free to download and use. The kit contains common Web design elements, such as scrollbars, buttons, menus and alerts.

Android 1.6 Wireframe stencil for Omnigraffle88

User Interface Design Framework89
This pretty and comprehensive design framework contains a GUI library of hundreds of vector elements for interface design. This minimal UI icon set has 260 vector icons and a library of 200 styles for Illustrator.

Screenshot90

Browser Form Elements PSD91
Included here is a set for Firefox 3 for Mac and another for IE7 on Vista.

Screenshot92

Sketching and Wireframing Kit93
Here is a free set of elements for sketching and wireframing. It consists of form elements, icons, indicators, feedback messages, tooltips, navigation elements, image placeholders, embedded videos, sliders and common ad banners.

Screenshot94

Photoshop Form Element Templates95
This set includes all common form fields and mouse and link pointers, optimized for ease of use.

Screenshot96

Web Browser Elements97
This excellent and useful kit contains pull-down menus, input fields, radio buttons, check boxes, buttons, text fields and scroll bars, all in an easily editable PSD file.

Screenshot98

UI Design Kit99
This Web UI template kit is made completely with shape objects, which in some cases convert to SmartObjects, so they’re totally scalable.

Screenshot100

Wireframe Symbols101
This download contains a symbols library and a full Adobe Illustrator file, with all of the elements spread out on the art board. To install this library, just drag and drop the Wireframe Symbols.ai file into your Illustrator Symbols directory. Once you are in Illustrator, go to your Symbols palette, and load the library.

Screenshot102

Web UI Element Pack103
This pack, in PSD format, contains 19 elements including loading bar, default and clicked-state buttons, button toggle, icons for “Close,” “Next” and “Previous,” paging icon and slider.

Screenshot104

Wireframe Kit for Google Drawings105

Screenshot106

OmniGraffle Stencil for Ext JS v3.0107
This updated version of Ext JS Omnigraffle stencil contains many improvements and additions, namely the recreation of most Ext JS elements as Graffletopia shapes or groups, especially helpful for resizing titles, tables cells and so on.

Screenshot108

Flex 3 Stencil109
Includes all Flex components from the Flex 3 Style Guide: panels, data grid, buttons, fields, links, toggle, menu, scrolls, accordion, tabs, list, data picker, tooltips and errors.

Screenshot110

Aqua GUI111
A series of elements inspired by the GUI Design Palette 1.2 and the Mac OS X interface stencils, based on Aqua, and mainly intended to make simple window designs.

Screenshot112

Flex Darkskin PSD UI113
A beautiful set of 16 PSD files.

Screenshot114

Web Wireframe Kit115
Here is a simple way to plan a layout and a cost-effective, time-saving wireframe kit for Web designers.

Screenshot116

UI Buttons and Icons117
This set contains 165 high-quality UI icons and buttons in five different colors. Available in AI, JPEG and SVG formats.

Screenshot118

Quommunication Stencil Kit119
This beautiful set contains design elements for wireframing, RSS feeds, colors, advertising units, browser windows and grids.

Screenshot120

Mac OS X Interface 2121
A Leopard-y interface stencil kit that makes extensive use of tables for maximum flexibility while maintaining pixel precision.

Screenshot122

OmniGraffle UX Template123
The OmniGraffle Pro (v. 5) template for interface design. Includes shared layers for basic UX document needs (e.g. title page, wireframes, storyboards).

Screenshot124

Template for Blueprint CSS Comps125
This template allows you to create visual design comps to be implemented using a CSS layout framework. The Adobe Illustrator document features a 24-column grid for CSS frameworks such as Blueprint.

Screenshot126

Apple Elements for OmniGraffle127
Stencils of Apple hardware and miscellaneous networking components. Excellent for creating physical diagrams.

Screenshot128

DeviantART ID PSD Kit129
These 15 professionally designed, fully customizable templates include MINI and Original ID templates.

Screenshot130

Browser Screens and Website Elements131
Here is a useful set of vector assets you can use to mock up client projects, present your work or get a quick visual while laying out a website.

Screenshot132

960 Grid Template for OmniGraffle133

Screenshot134

Control of different browsers for designers135 (download link136)
A PSD library of controls in browser interfaces of Mozilla Firefox, Opera, Internet Explorer and Safari.

Screenshot137

Useful Articles

Resources and Round-Ups

  • I Love Wireframes144
    A tumblog dedicated to wireframes, prototypes and mock-ups.
  • Wireframe Showcase145
    This site is a place to look at websites based on wireframes and analyze how the designers transformed mock-ups into working designs. Because the wireframes and designs were submitted by their creators, Wireframe Showcase includes a short explanation of each piece. Most of the websites grew out of digital mock-ups, which have the advantage of being easy to tweak and rearrange. The result is a pleasing and informative collection of wireframes.

    Screenshot</a

  • Standard Screen Patterns for Web Interface Design146
    Here are some principles and patterns for rich interactions.
  • 50 Free UI and Web Design Wireframing Kits and Resources147
    This post focuses on wireframing tools and standalone applications, as well as resources you need to build your own wireframe: wireframing kits, browser windows, form elements, grids, Mac OS X elements and mobile elements, which you can use in any graphics editor such as Photoshop or Illustrator, or with pen and paper.
  • A Collection of Printable Sketch Templates and Sketch Books for Wireframing148
    Here are 20 resources that you can use in the sketching phase of application development.
  • A Collection of Printable Web Browser Sketching and Wireframe Templates149
    All of these printable sketching templates have all been designed especially for Web designers. Each has an imprint of a Web browser (either Safari, Chrome or Firefox).
  • Useful (Offline) Utensils and Toolkits for Designers150
    Why start completely from scratch when you can use one of these pre-made guides to save time and better direct your creative energies? In this article, you will find a great list of free downloadable tools, as well as a collection of notepads and other products to purchase for offline planning and design.

Related Posts

Would you like to see more similar posts on Smashing Magazine?

Would you like to see more similar posts on Smashing Magazine?153online survey154

(al)

Footnotes

  1. 1 http://www.matcheck.cz/androidguipsd/
  2. 2 http://www.matcheck.cz/androidguipsd/
  3. 3 http://digitalphenom.deviantart.com/art/RIM-Blackberry-PSD-111857107
  4. 4 http://digitalphenom.deviantart.com/art/RIM-Blackberry-PSD-111857107
  5. 5 http://graffletopia.com/stencils/578
  6. 6 http://graffletopia.com/stencils/578
  7. 7 http://mobile-developer.ru/maemo/vse-elementy-maemo-5-gui-v-psd/
  8. 8 http://mobile-developer.ru/maemo/vse-elementy-maemo-5-gui-v-psd/
  9. 9 http://www.teehanlax.com/blog/2010/08/12/iphone-4-gui-psd-retina-display/
  10. 10 http://www.teehanlax.com/blog/2010/08/12/iphone-4-gui-psd-retina-display/
  11. 11 http://www.rawapps.com/849/ipad-gui-kit-in-psd-format-is-here/
  12. 12 http://www.rawapps.com/849/ipad-gui-kit-in-psd-format-is-here/
  13. 13 http://graffletopia.com/stencils/630
  14. 14 http://graffletopia.com/stencils/630
  15. 15 http://chrisbrummel.com/google-android-gui-psd
  16. 16 http://chrisbrummel.com/google-android-gui-psd
  17. 17 http://line25.com/articles/free-apple-ipad-icon-set-for-your-website-designs
  18. 18 http://line25.com/articles/free-apple-ipad-icon-set-for-your-website-designs
  19. 19 http://graffletopia.com/stencils/498
  20. 20 http://graffletopia.com/stencils/498
  21. 21 http://unitid.nl/2009/11/fireworks-template-for-android/
  22. 22 http://unitid.nl/2009/11/fireworks-template-for-android/
  23. 23 http://vector.tutsplus.com/freebies/vectors/sexy-vector-cell-phone/
  24. 24 http://vector.tutsplus.com/freebies/vectors/sexy-vector-cell-phone/
  25. 25 http://informationarchitects.jp/ipad-stencil-for-omnigraffle/
  26. 26 http://informationarchitects.jp/ipad-stencil-for-omnigraffle/
  27. 27 http://fullofdesign.com/posts/iphone-app-wireframe-template/
  28. 28 http://fullofdesign.com/posts/iphone-app-wireframe-template/
  29. 29 http://graffletopia.com/stencils/392
  30. 30 http://graffletopia.com/stencils/392
  31. 31 http://www.designerstoolbox.com/designresources/iphone/
  32. 32 http://www.designerstoolbox.com/designresources/iphone/
  33. 33 http://graffletopia.com/stencils/570
  34. 34 http://graffletopia.com/stencils/570
  35. 35 http://www.morford.org/iphoneosdesignstencil/
  36. 36 http://www.morford.org/iphoneosdesignstencil/
  37. 37 http://blog.kevinandersson.dk/2010/01/29/apple-ipad-fully-editable-psd/
  38. 38 http://blog.kevinandersson.dk/2010/01/29/apple-ipad-fully-editable-psd/
  39. 39 http://www.teehanlax.com/blog/2009/07/08/palm-pre-gui-psd/
  40. 40 http://www.teehanlax.com/blog/2009/07/08/palm-pre-gui-psd/
  41. 41 http://www.mercuryintermedia.com/blog/index.php/2009/03/iphone-ui-vector-elements
  42. 42 http://www.mercuryintermedia.com/blog/index.php/2009/03/iphone-ui-vector-elements
  43. 43 http://iconlibrary.iconshock.com/icons/ipad-vector-gui-elements-tabs-buttons-menus-icons/
  44. 44 http://iconlibrary.iconshock.com/icons/ipad-vector-gui-elements-tabs-buttons-menus-icons/
  45. 45 http://www.smashingmagazine.com/2010/07/23/free-facebook-gui-psd-kit/
  46. 46 http://www.smashingmagazine.com/2010/07/23/free-facebook-gui-psd-kit/
  47. 47 http://surgeworks.com/blog/design/facebook-gui-free-psd-resource
  48. 48 http://surgeworks.com/blog/design/facebook-gui-free-psd-resource
  49. 49 http://www.graffletopia.com/stencils/410
  50. 50 http://www.graffletopia.com/stencils/410
  51. 51 http://www.patsheridan.com/content/omnigraffle-twitter-widget-stencil
  52. 52 http://www.patsheridan.com/content/omnigraffle-twitter-widget-stencil
  53. 53 http://graffletopia.com/stencils/566
  54. 54 http://www.graffletopia.com/stencils/566
  55. 55 http://graffletopia.com/stencils/382
  56. 56 http://graffletopia.com/stencils/382
  57. 57 http://konigi.com/tools/omnigraffle-wireframe-stencils
  58. 58 http://konigi.com/tools/omnigraffle-wireframe-stencils
  59. 59 https://docs.google.com/leaf?id=0B6D4v-c42Zy5NjdkMDAwMzMtMTQ0MC00ODBkLWIyYWEtZTM5OGEzNzYxNmVm&hl&pli=1
  60. 60 https://docs.google.com/leaf?id=0B6D4v-c42Zy5NjdkMDAwMzMtMTQ0MC00ODBkLWIyYWEtZTM5OGEzNzYxNmVm&hl&pli=1
  61. 61 http://www.henkwijnholds.com/mbti-sketching-paper-ideation/sketching/
  62. 62 http://www.henkwijnholds.com/mbti-sketching-paper-ideation/sketching/
  63. 63 http://www.henkwijnholds.com/prolonging-the-magic-a4-sketching-paper/
  64. 64 http://www.henkwijnholds.com/prolonging-the-magic-a4-sketching-paper/
  65. 65 http://konigi.com/tools/wireframe-magnets-diy-kit
  66. 66 http://konigi.com/tools/wireframe-magnets-diy-kit
  67. 67 http://www.flickr.com/photos/jasonrobb/3958121336/
  68. 68 http://www.flickr.com/photos/jasonrobb/3958121336/
  69. 69 http://www.flickr.com/photos/alfonsobozzelli/3949828341/
  70. 70 http://www.flickr.com/photos/alfonsobozzelli/3949828341/
  71. 71 http://lab.3fl.jp/ipad-idea-sheet-v01/
  72. 72 http://lab.3fl.jp/ipad-idea-sheet-v01/
  73. 73 http://www.uxarray.com/2009/03/06/scenario-taskflow-and-grid-sketchsheets/
  74. 74 http://www.uxarray.com/2009/03/06/scenario-taskflow-and-grid-sketchsheets/
  75. 75 http://www.webdesignerstoolkit.com/
  76. 76 http://www.webdesignerstoolkit.com/
  77. 77 http://wireframes.linowski.ca/2009/10/interactive-sketching-notation-v0-1/
  78. 78 http://wireframes.linowski.ca/2009/10/interactive-sketching-notation-v0-1/
  79. 79 http://kediashubham.deviantart.com/art/MobileMe-Full-iPhone-GUI-97267445
  80. 80 http://kediashubham.deviantart.com/art/MobileMe-Full-iPhone-GUI-97267445
  81. 81 http://gliderguns.files.wordpress.com/2010/01/android_wireframe_templates3.pdf
  82. 82 http://gliderguns.files.wordpress.com/2010/01/android_wireframe_templates3.pdf
  83. 83 http://wireframes.linowski.ca/2010/08/free-keynote-ux-stencils/
  84. 84 http://wireframes.linowski.ca/2010/08/free-keynote-ux-stencils/
  85. 85 http://graffletopia.com/stencils/377
  86. 86 http://graffletopia.com/stencils/377
  87. 87 http://www.dragnet.se/webbdesign/websitewireframes.html
  88. 88 http://www.dragnet.se/webbdesign/websitewireframes.html
  89. 89 http://www.webalys.com/design-interface-application-framework.php
  90. 90 http://www.webalys.com/design-interface-application-framework.php
  91. 91 http://www.teehanlax.com/blog/2008/12/16/browser-form-elements-psd/
  92. 92 http://www.teehanlax.com/blog/2008/12/16/browser-form-elements-psd/
  93. 93 http://www.jankoatwarpspeed.com/post/2009/12/24/sketching-wireframing-kit.aspx
  94. 94 http://www.jankoatwarpspeed.com/post/2009/12/24/sketching-wireframing-kit.aspx
  95. 95 http://www.webdesignerstoolkit.com/forms.php
  96. 96 http://www.webdesignerstoolkit.com/forms.php
  97. 97 http://www.designerstoolbox.com/designresources/elements/
  98. 98 http://www.designerstoolbox.com/designresources/elements/
  99. 99 http://www.fuelyourinterface.com/free-web-ui-wireframe-kit/
  100. 100 http://www.fuelyourinterface.com/free-web-ui-wireframe-kit/
  101. 101 http://www.johnnynines.com/2009/03/wireframe-symbols/
  102. 102 http://www.johnnynines.com/2009/03/wireframe-symbols/
  103. 103 http://www.webstuffshare.com/2010/04/free-web-ui-element-pack/
  104. 104 http://www.webstuffshare.com/2010/04/free-web-ui-element-pack/
  105. 105 http://mortenjust.com/2010/04/19/a-wireframe-kit-for-google-drawings/
  106. 106 http://mortenjust.com/2010/04/19/a-wireframe-kit-for-google-drawings/
  107. 107 http://graffletopia.com/stencils/351
  108. 108 http://graffletopia.com/stencils/351
  109. 109 http://www.graffletopia.com/stencils/431
  110. 110 http://www.graffletopia.com/stencils/431
  111. 111 http://www.graffletopia.com/stencils/135
  112. 112 http://www.graffletopia.com/stencils/135
  113. 113 http://psdthemes.com/theme-406-marvelous-flex-darkskin-psd-ui.html
  114. 114 http://psdthemes.com/theme-406-marvelous-flex-darkskin-psd-ui.html
  115. 115 http://www.emazekraker.biz/projects/webWireframeKit/
  116. 116 http://www.emazekraker.biz/projects/webWireframeKit/
  117. 117 http://www.gosquared.com/liquidicity/archives/122
  118. 118 http://www.gosquared.com/liquidicity/archives/122
  119. 119 http://quommunication.com/
  120. 120 http://quommunication.com/
  121. 121 http://www.graffletopia.com/stencils/320
  122. 122 http://www.graffletopia.com/stencils/320
  123. 123 http://konigi.com/tools/omnigraffle-ux-template
  124. 124 http://konigi.com/tools/omnigraffle-ux-template
  125. 125 http://konigi.com/tools/illustrator-template-blueprint-css-comps
  126. 126 http://konigi.com/tools/illustrator-template-blueprint-css-comps
  127. 127 http://www.graffletopia.com/stencils/46
  128. 128 http://www.graffletopia.com/stencils/46
  129. 129 http://petercui.deviantart.com/art/Peter-s-DeivantART-ID-Ver1-3-70932592
  130. 130 http://petercui.deviantart.com/art/Peter-s-DeivantART-ID-Ver1-3-70932592
  131. 131 http://vector.tutsplus.com/articles/news/vectortuts-freebie-vector-pack-browser-screens-and-website-elements/
  132. 132 http://vector.tutsplus.com/articles/news/vectortuts-freebie-vector-pack-browser-screens-and-website-elements/
  133. 133 http://briancray.com/2009/11/30/omnigraffle-wireframing-960-grid-template/
  134. 134 http://briancray.com/2009/11/30/omnigraffle-wireframing-960-grid-template/
  135. 135 http://seleckis.lv/archive/web-dizayn/kontrolyi-iz-raznyih-brauzerov-dlya-dizaynerov
  136. 136 http://seleckis.lv/wp-content/uploads/2007/11/html_controls.zip
  137. 137 http://seleckis.lv/archive/web-dizayn/kontrolyi-iz-raznyih-brauzerov-dlya-dizaynerov
  138. 138 http://www.45royale.com/blog/articles/the-importance-of-wireframing/
  139. 139 http://www.visitmix.com/Articles/The-Future-of-Wireframes
  140. 140 http://www.smashingmagazine.com/?p=59177
  141. 141 http://52weeksofux.com/post/866406780/wireframing-is-not-a-religion
  142. 142 http://boagworld.com/design/wireframing-rules
  143. 143 http://thinkvitamin.com/category/web-apps/wireframing/
  144. 144 http://wireframes.tumblr.com/
  145. 145 http://www.wireframeshowcase.com/
  146. 146 http://www.wireframeshowcase.com
  147. 147 http://www.smashingmagazine.com/2010/02/05/50-free-ui-and-web-design-wireframing-kits-resources-and-source-files/
  148. 148 http://www.geekchix.org/blog/2010/01/03/a-collection-of-printable-sketch-templates-and-sketch-books-for-wireframing/
  149. 149 http://speckyboy.com/2010/07/14/a-collection-of-printable-web-browser-sketching-and-wireframe-templates/
  150. 150 http://www.hongkiat.com/blog/useful-offline-utensils-and-toolkits-for-designers/
  151. 151 http://www.smashingmagazine.com/2009/09/01/35-excellent-wireframing-resources/
  152. 152 http://www.smashingmagazine.com/2010/03/29/free-printable-sketching-wireframing-and-note-taking-pdf-templates/
  153. 153 http://polldaddy.com/poll/3681126/
  154. 154 http://polldaddy.com/features-surveys/

↑ Back to topShare on Twitter

Aquil Akhter is a web graphic designer and has been working in this field for 8 years. He also runs the blog webdesigncore.com, which focuses on free web resources and inspiration for designers and developers.

Advertising

Note: Our rating-system has caused errors, so it's disabled at the moment. It will be back the moment the problem has been resolved. We're very sorry. Happy Holidays!

  1. 1

    This is an incredible collection, great roundup! Thanks for so much UI goodness all at once.

    • 2

      Wow! I’m loving this. Download ALL! hehe. :-]

      • 3

        Yes, these OWN. These will appear on a local San Diego news channel in the graphics (HD), and I donated to the sites from which I downloaded. Good times.

  2. 4

    I was going to say the exact thing as John. Seriously, thanks. This will save me a lot of time.

    • 5

      Fully agree! All I can say is Oh My God!
      I just entered Mobile Apps Development and this just falls into my lap!

      One question though, where is Bada? ;)

  3. 6

    AMAZING resources. THANK YOU!!

  4. 7

    It felt like this list was never going to end and I mean that in a good way! I know how I will be spending tomorrow morning. Incredible post and thanks for sharing all these brilliant resources. Big double thumbs up!

  5. 8

    Aqull… This post is EPIC. Nuf said.

  6. 9

    Awesome Collections! Sure it will save me a lot of time too..

  7. 10

    Fantastic set.

    Thank you.

  8. 11

    Great! Thanks.

  9. 12

    WOW! Where do I start? Great collection

  10. 13

    Very thorough…I was a little surprised that you omitted the psd files for Windows Phone 7 however. It will be here in a couple months.

  11. 14

    Crazy collection! You’re so great! :)

  12. 15

    I want to add this minimalistic collection of printable pdf templates: http://www.generatedpaper.com/en

  13. 16

    FANTASTIC!! Thanks!

  14. 17

    Got to say this is one of the best collections yet seen on smashing magazine. Truely awesome.

    Big thanks for the effort from me and i’m guessing many others.

    Almost too much choice… almost. :)

  15. 18

    Thanks for featuring our icons! Really appreciate it :D It’s great to be featured alongside so much great content.

  16. 19

    Yahir Vite Lugardo

    August 27, 2010 7:23 am

    THAT’s THE BEST ARTICLE OF THE MONTH!!!

  17. 20

    wWooOooWw
    :: u guys found the Aladdin’s treasure or what ::
    THANX

  18. 21

    This post was just INSANE, guys :D

  19. 22

    Dwayne Paisley-Marshall

    August 27, 2010 8:20 am

    This is such an extensive list, good work!

  20. 23

    This is an excellent collection! Will save me a lot of time explaining my design. Thanks a ton!

  21. 24

    Where’s Windows Phone 7???

  22. 25

    Too much!! And thank you so much!!

    Thanks for sharing.

  23. 26

    Kick Azz post! Was looking for some ui assets and knew you’d have something good! Sure enough it was today’s post!

  24. 27

    I think this is probably the best post ever. Just kicked off a really big mobile app project and this is gonna come in really handy. Thanks guys!

  25. 28

    Greatness!!

  26. 29

    Superb collection

  27. 30

    I,I,…
    I don’t now what I want to say……
    best collection, thanks!!

  28. 31

    Awesome list,, thank you..

    this add on for Firefox is great for protyping http://pencil.evolus.vn/en-US/Home.aspx

  29. 32

    Aquil, you are awesome!
    I think this is the best collection of resources in one article.
    Big Goofy Thumbs up to you man.

  30. 33

    Too much!! And thank you so much!!

    Thanks for sharing.

  31. 34

    EXCELLENT COLLECTION!!!!

  32. 35

    Fantastic collection :-)

  33. 36

    Another good mockup tool is Balsamiq Mockups.
    There is also an online version for testing but it is fully functional: http://www.balsamiq.com/products/mockups/download#

  34. 37

    woow these are really helpful. awesome compilation. thanks a bunch!

  35. 38

    Great resource! Some lists are useful :o)

    So cool to be in here twice, once for the Omni Stencil and again on the Standard Screen Patterns.

    We updated the screen patterns for 2010 with 80 new examples, they are at: http://www.slideshare.net/theresaneil/ria-screen-layouts

  36. 39

    This is simply an AWESOME resource!

  37. 40

    Awesome!! Very nice collection!! Thanks for sharing!

  38. 41

    Holy cow! This is the best collection of UI resources yet! Thanks for the great post!

  39. 42

    ardhitya wiedha irawan

    August 27, 2010 9:12 pm

    Fantastic collection!! its cool….!!! ^_^

  40. 43

    WOW! This is great collection…

  41. 44

    AWSME! THNX!

  42. 45

    Great Round-Up.
    Thanks!

  43. 46

    Whaaaaa…. awesome post … Thanks a gazillion

    now… where do I start… ?

  44. 47

    Hi, i’m Beto Leal, from Brazil, and accompany you some time ago.
    Great collection, great initiative.

    You are very cool!

  45. 48

    Not only awesome… highly useful too!
    Thanks a lot, buddy
    Alejandra (@_aleare)

  46. 49

    Wooooo! great post.

  47. 51

    Wow. Excellent article. Superb collection. Thanks very much for sharing. Its extremely handy.

  48. 52

    Check out http://pencil.evolus.vn/ it’s just great. Our company (9 developers) use it to create wireframes and even final screens since about 2 months and it’s just great. Open Source, available as Firefox Plugin, easy to modify and extend, and of course running on OSX, Linux and Windows.

    • 53

      Jonas, I love Pencil however, the export to pdf feature is broken in the latest version. Do you know when this is going to be fixed?

  49. 54

    Best post ever!! It’s so comprehensive and is exactly what I was looking for!!

  50. 55

    Great! Best post. Its great collection.

  51. 56

    I was looking for similar resource. Incredible Collection. Thanks a Ton.

  52. 57

    Most comprehensive and useful post I’ve seen to date. Thx Aquil!

  53. 58

    very useful stuff! i downloaded most of them. Thank you Aquil.

  54. 59

    Awesome!

  55. 60

    Epic post guys. All of it useful. Seriously.

  56. 61

    A great set of Wireframing Kits, UI Design Kits, and Resources this will come in very useful. Thanks very much!

    Jerky Oats

  57. 62

    incredible that you did such valuable job.

  58. 63

    Is this real? yeh, This is SM.

  59. 64

    That Android template is old and has desperately needed to be updated for well over a year now. I don’t understand why it’s still posted.

    April ’09 – v1.5 — The template
    Sep ’09 – v1.6
    Oct ’09 – v2.0
    Nov ’09 – v2.1
    May ’10 v2.2 — still being rolled out to some devices
    End of 2010 v2.6 (not far away)

    Ultimately, you’re better off using the VDM to export the current versions images for popular resolutions, rather than trying to build themes and apps based on the very obsolete 1.5.

  60. 65

    This is really an amazing collection. thank you. thank you very much for this great job.

  61. 66

    Happy you find the template usefull :)

  62. 67

    Great stuff, this will definitely save me some development time on my end. Keep them coming!

  63. 68

    OMG this list is f#cking awesome.

  64. 69

    Great list. This post is a work of dedication.

  65. 70

    Great Collection. Thx

  66. 71

    Really amazing collection of resources, thanks again!

  67. 72

    You guys are unbelievable. Thanks.

  68. 73

    Great resources, big THX.

  69. 74

    Is there a “Download All” button somewhere?

  70. 75

    Thanks for including my Android Sketch Stencil for OmniGraffle – I hope some your readers to get some use out of it.

  71. 76

    No love for Visio, huh? I know there are many graffleheads out there, but I can make Visio sing so well OG isn’t needed or any better for me.

    Also, what about the UNIFY framework for wireframes AND deliverables from EightShapes? *like*

  72. 78

    Wow, you guys rock! Talk about a perfect collection of wireframes, psd’s and templates. Thank you vey much for your hard work, this’ll definitely keep me from having to work late everynight now…

    DougB

    Rank: 9 (on a scale of 1 – 10)

  73. 79

    This is the best compliation of prototyping resources

  74. 80

    Very nice kit.

  75. 81

    I thought wireframes were just a quick sketch, mostly black and white and possibly hand drawn. I don’t think this pixel-perfect stuff helps in UI design.

  76. 82

    Great collection…Thanks

  77. 83

    this is an EXCELLENT resource! great job!

  78. 84

    Alexander Debkalyuk

    September 2, 2010 3:37 am

    Thank you!

  79. 85

    I cannot thank you enough for this great compilation. Thumbs up!

  80. 86

    Have my babies.

  81. 87

    Just lovely! Thanks!!

  82. 88

    Jarosław Królewski

    September 10, 2010 4:16 am

    Just amazing!!!

  83. 89

    I love the multitude of resources y’all came up with!

    I just wish this post had a table of contents at the top, to make this LONG page a bit easier to navigate.

  84. 90

    I hope they realise the results for the poll will be severely skewed by placing the poll at the end of this long post. It’s no surprise that readers who have made it that far would like to see more of that type of content!

  85. 91
  86. 92

    Adam Fuller Design

    September 15, 2010 2:34 am

    WOW! I have never been a huge fan of Wireframing but with all these kits, I probably will start wireframing designs more often! Thanks a lot.

  87. 93

    zoinks!…add all these up and it’s probably a 5gb download… nice collection

  88. 94

    Wow! Seems I don’t need to look any further for wireframe kits and I only wanted a few.

    Thanks very much.

  89. 95

    fantastic! i wnted hav this kindav thing! thnks!

  90. 96

    Thank you. This post makes me want to dance in a glade like a Spring fairy.

  91. 97

    Awesome article :)

  92. 98

    Great job Akhter. Your blog rocks as well. I found a great resource.

  93. 99

    Awesome…..

  94. 100

    Thank you and thank you.
    This is awesome!

  95. 101

    For Windows Phone 7 you can use this link

    http://msdn.microsoft.com/en-us/library/ff637515(VS.92).aspx

  96. 102

    this is like a dream! love love love it!

  97. 103

    Sivaprasath Selvaraj

    March 30, 2011 9:27 pm

    Thank you… Thank you very much…
    This is really awesome!

  98. 104

    Actually seriously useful post and list of resources, going to step up my game with the new frameworks I have in my arsenal now

  99. 105

    My wife and i got delighted Raymond managed to complete his basic research through your precious recommendations he grabbed using your web page. It’s not at all simplistic to simply possibly be giving for free guidelines which often other people have been trying to sell. And we also fully grasp we need you to thank for that. All the explanations you made, the easy web site menu, the relationships you will give support to engender – it’s many terrific, and it’s letting our son and our family do think the topic is cool, and that is quite fundamental. Thank you for everything!

  100. 106

    Hello, I enjoy your weblog. Is there something I can do to receive updates like a subscription or something? I’m sorry I am not acquainted with RSS?

  101. 107

    oh man, These are great. We started using these more and more and ends up saving us tons of time. Its almost to much to download.ha

    Thanks

  102. 108

    THANK YOU SO MUCH
    HAPPY NEW YEARRR

↑ Back to top