Menu Search
Jump to the content X X
Smashing Conf Barcelona 2016

We use ad-blockers as well, you know. We gotta keep those servers running though. Did you know that we publish useful books and run friendly conferences — crafted for pros like yourself? E.g. upcoming SmashingConf Barcelona, dedicated to smart front-end techniques and design patterns.

Free Wireframing Kits, UI Design Kits, PDFs and Resources

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 Link

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.


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


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.


iPhone 4 GUI PSD (Retina Display)
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.


iPad GUI Kit in PSD
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.


Android 1.6 Wireframe stencil for Omnigraffle9
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 Omnigraffle10

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


iPad GUI PSD Kit13
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.


Google Android PSD15
A stencil set for Google Android prototyping.


Fireworks template for Android17
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.


Sexy Vector Cell Phone
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.


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


iPhone App Wireframe Template


Mobile – iPhone19


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


iPad and iPhone Design23
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.


Design Stencil for iPhone and iPad
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 iPad

Apple iPad fully editable PSD
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 PSD

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


iPhone UI Vector Elements25
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 Elements26

iPad Vector GUI Elements: tabs buttons menus icons27
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 icons28

Free Social Networking GUI PSD Kits Link

Free Full-Layered Facebook GUI PSD Kit29
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.


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


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


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


Wireframing Kits Link

Best Practice UX Forms Stencil v1.135
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.


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

Form Elements UI Kit38

Wireframe Shapes39
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 Shapes40

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

Wireframe kit - Google Text & Tabellen42

MBTI sketching paper for ideation43
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 ideation44

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

A4 sketching paper46

Wireframe Magnets (DIY Kit)47
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)48

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

Paper wireframe templates50

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

Wireframe template52

iPad Idea Sheet53
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 Sheet54

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

Scenario, Taskflow and Grid Sketchsheets56

Free Photoshop browser template57
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 template58

Interactive Sketching Notation 0.159
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.160

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

MobileMe Full iPhone GUI62

Android Wireframe Templates (PDF)63

Android Wireframe Templates (PDF)64

Free Keynote UX Stencils65

Free Keynote UX Stencils66

Advertising Stencil Kit67
A set of very useful advertising stencils.

Advertising Stencil Kit68

Dragnet website wireframes kit v 0.9
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 Omnigraffle

User Interface Design Framework69
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.


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


Sketching and Wireframing Kit71
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.


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


Web Browser Elements75
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.


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


Wireframe Symbols
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 file into your Illustrator Symbols directory. Once you are in Illustrator, go to your Symbols palette, and load the library.


Web UI Element Pack79
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.


Wireframe Kit for Google Drawings81


OmniGraffle Stencil for Ext JS v3.083
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.


Flex 3 Stencil85
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.


Aqua GUI87
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.


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


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


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


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


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


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


Template for Blueprint CSS Comps
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.


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


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


Browser Screens and Website Elements105
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.


960 Grid Template for OmniGraffle


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


Useful Articles Link

  • The Importance of Wireframing109
    A comprehensive article on how wireframing plays an important role in information architecture
  • The Future of Wireframes
    As we move into the next decade of Web design, it’s time to re-evaluate our understanding of wireframes, a tried and tested user experience staple.


  • Wireframing Is Not a Religion110
    Wireframes are an indispensable tool for design thinking, a digital sketch pad ready to be drawn and erased, scrapped or resurrected at any moment.
  • Five Commandments for Wireframing111
    Paul Boag is a wireframes fanatic and believes they are an indispensable part of the development process. He espouses five unbreakable rules.
  • 20 Steps to Better Wireframing112
    Possibly the biggest mistake made in any development project is failing to plan. This article goes over why.

Resources and Round-Ups Link

  • I Love Wireframes113
    A tumblog dedicated to wireframes, prototypes and mock-ups.
  • Wireframe Showcase114
    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.


  • Standard Screen Patterns for Web Interface Design115
    Here are some principles and patterns for rich interactions.
  • 50 Free UI and Web Design Wireframing Kits and Resources116
    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 Wireframing117
    Here are 20 resources that you can use in the sketching phase of application development.
  • A Collection of Printable Web Browser Sketching and Wireframe Templates118
    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 Designers119
    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.

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

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


Footnotes Link

  1. 1
  2. 2
  3. 3
  4. 4
  5. 5
  6. 6
  7. 7
  8. 8
  9. 9
  10. 10
  11. 11
  12. 12
  13. 13
  14. 14
  15. 15
  16. 16
  17. 17
  18. 18
  19. 19
  20. 20
  21. 21
  22. 22
  23. 23
  24. 24
  25. 25
  26. 26
  27. 27
  28. 28
  29. 29
  30. 30
  31. 31
  32. 32
  33. 33
  34. 34
  35. 35
  36. 36
  37. 37
  38. 38
  39. 39
  40. 40
  41. 41
  42. 42
  43. 43
  44. 44
  45. 45
  46. 46
  47. 47
  48. 48
  49. 49
  50. 50
  51. 51
  52. 52
  53. 53
  54. 54
  55. 55
  56. 56
  57. 57
  58. 58
  59. 59
  60. 60
  61. 61
  62. 62
  63. 63
  64. 64
  65. 65
  66. 66
  67. 67
  68. 68
  69. 69
  70. 70
  71. 71
  72. 72
  73. 73
  74. 74
  75. 75
  76. 76
  77. 77
  78. 78
  79. 79
  80. 80
  81. 81
  82. 82
  83. 83
  84. 84
  85. 85
  86. 86
  87. 87
  88. 88
  89. 89
  90. 90
  91. 91
  92. 92
  93. 93
  94. 94
  95. 95
  96. 96
  97. 97
  98. 98
  99. 99
  100. 100
  101. 101
  102. 102
  103. 103
  104. 104
  105. 105
  106. 106
  107. 107
  108. 108
  109. 109
  110. 110
  111. 111
  112. 112
  113. 113
  114. 114
  115. 115
  116. 116
  117. 117
  118. 118
  119. 119
  120. 120
  121. 121
  122. 122
  123. 123
SmashingConf Barcelona 2016

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

↑ Back to top Tweet itShare on Facebook


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

  1. 1

    John Flickinger

    August 27, 2010 5:27 am

    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:

  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


  17. 20

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

  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!


↑ Back to top