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