Planning and communication are two key elements in the development of any successful website or application. And that is exactly what the wireframing process offers: a quick and simple method to plan the layout and a cost-effective, time-saving tool to easily communicate your ideas to others. A wireframe typically has the basic elements of a Web page: header, footer, sidebar, maybe even some generated content, which gives you, your clients and colleagues a simple visually oriented layout that illustrates what the structure of the website will be by the end of the project and that serves as the foundation for any future alterations.
This article focuses on actual wireframing tools and standalone applications, as well as resources that you’ll need to build your own wireframe: wireframing kits, browser windows, form elements, grids, Mac OS X elements, mobile elements, which you’ll use in any typical graphics editor such as Photoshop or Illustrator. …Or you could use pen and paper.
Complete Wireframing Toolkits Link
Yahoo! Design Stencils – Design Pattern Library9
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.
Free Sketching & Wireframing Kit11
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.
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.
Web Page Elements19
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.
Web Browser Templates Link
Photoshop Browser Templates – Web Designer Toolkit21
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.
Web-Safe Area Templates for Photoshop Link
Web Form Elements Link
Best Practice UX Forms Stencil36
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.
Photoshop Form Element Templates38
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.
Photoshop Button Templates44
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.
Web Browser Elements Link
Grid Templates Link
Mobile App Development Resources Link
Ultimate iPhone Stencil – Graffletopia59
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.
iPhone GUI as Rich Symbols for Fireworks67
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.
Optional Wireframe Extras Link
Standard Web Banners77
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 Icons, Royalty-Free EPS and PNG79
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.
Printable Sketching Paper Link
A4 and A3 Sketching Grid Paper85
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.
iPhone Application Sketch Template89
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.
Printable Wireframe and Notes Link
The below 8.5 x 11-inch graph paper93 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.
Further Resources And Some Wireframing Inspiration Link
Mockups To Go104
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.
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.
Further Related Articles Link
- 35 Excellent Wireframing Resources110
More than 35 resources for creating better wireframes, including tutorials on different methods and a variety of tools available.
- Sketchy Wireframes: When you can’t (or shouldn’t) draw a straight line111
A nice article about computer-based sketchy wireframes that allow wireframes to look more like quick, hand-drawn sketches while retaining the reusability and polish that we expect from digital artitfacts.
- 16 Design Tools for Prototyping and Wireframing112
About the Author Link
Paul Andrew is a freelance Web designer. He is chief admin for Speckyboy – Design Magazine113, a Web design, Web development and graphic-design resource blog. Follow him on Twitter here: twitter.com/speckyboy114.
- 1 http://www.graffletopia.com/stencils/320
- 2 http://www.graffletopia.com/stencils/320
- 3 http://www.graffletopia.com/stencils/410
- 4 http://www.graffletopia.com/stencils/410
- 5 http://www.graffletopia.com/stencils/431
- 6 http://www.graffletopia.com/stencils/431
- 7 http://databene.org/eclipse-stencil.html
- 8 http://databene.org/eclipse-stencil.html
- 9 http://developer.yahoo.com/ypatterns/about/stencils/
- 10 http://developer.yahoo.com/ypatterns/about/stencils/
- 11 http://www.jankoatwarpspeed.com/post/2009/12/24/sketching-wireframing-kit.aspx
- 12 http://www.jankoatwarpspeed.com/post/2009/12/24/sketching-wireframing-kit.aspx
- 13 http://unify.eightshapes.com/
- 14 http://unify.eightshapes.com/
- 15 http://konigi.com/tools/omnigraffle-wireframe-stencils
- 16 http://konigi.com/tools/omnigraffle-wireframe-stencils
- 17 http://konigi.com/tools/omnigraffle-ux-template
- 18 http://konigi.com/tools/omnigraffle-ux-template
- 19 http://www.graffletopia.com/stencils/63
- 20 http://www.graffletopia.com/stencils/63
- 21 http://www.webdesignerstoolkit.com/index.php
- 22 http://www.webdesignerstoolkit.com/index.php
- 23 http://www.designerstoolbox.com/designresources/safearea/
- 24 http://www.designerstoolbox.com/designresources/safearea/vista/ie/?PHPSESSID=85945e90123d8ed1080f4cbe3bd5c7ad
- 25 http://www.designerstoolbox.com/designresources/safearea/vista/ie/?PHPSESSID=85945e90123d8ed1080f4cbe3bd5c7ad
- 26 http://www.designerstoolbox.com/designresources/safearea/vista/firefox/?PHPSESSID=85945e90123d8ed1080f4cbe3bd5c7ad
- 27 http://www.designerstoolbox.com/designresources/safearea/vista/firefox/?PHPSESSID=85945e90123d8ed1080f4cbe3bd5c7ad
- 28 http://www.designerstoolbox.com/designresources/safearea/xp/ie/?PHPSESSID=85945e90123d8ed1080f4cbe3bd5c7ad
- 29 http://www.designerstoolbox.com/designresources/safearea/xp/ie/?PHPSESSID=85945e90123d8ed1080f4cbe3bd5c7ad
- 30 http://www.designerstoolbox.com/designresources/safearea/xp/firefox/?PHPSESSID=85945e90123d8ed1080f4cbe3bd5c7ad
- 31 http://www.designerstoolbox.com/designresources/safearea/xp/firefox/?PHPSESSID=85945e90123d8ed1080f4cbe3bd5c7ad
- 32 http://www.designerstoolbox.com/designresources/safearea/mac/firefox/?PHPSESSID=85945e90123d8ed1080f4cbe3bd5c7ad
- 33 http://www.designerstoolbox.com/designresources/safearea/mac/firefox/?PHPSESSID=85945e90123d8ed1080f4cbe3bd5c7ad
- 34 http://www.designerstoolbox.com/designresources/safearea/mac/safari/?PHPSESSID=85945e90123d8ed1080f4cbe3bd5c7ad
- 35 http://www.designerstoolbox.com/designresources/safearea/mac/safari/?PHPSESSID=85945e90123d8ed1080f4cbe3bd5c7ad
- 36 http://www.graffletopia.com/stencils/566
- 37 http://www.graffletopia.com/stencils/566
- 38 http://www.webdesignerstoolkit.com/forms.php
- 39 http://www.webdesignerstoolkit.com/forms.php
- 40 http://sniperyu.deviantart.com/art/Web-Form-Elements-104261528
- 41 http://sniperyu.deviantart.com/art/Web-Form-Elements-104261528
- 42 http://sniperyu.deviantart.com/art/Web-Form-Elements-Vol-2-146544080
- 43 http://sniperyu.deviantart.com/art/Web-Form-Elements-Vol-2-146544080
- 44 http://www.webdesignerstoolkit.com/buttons.php
- 45 http://www.webdesignerstoolkit.com/buttons.php
- 46 http://www.designerstoolbox.com/designresources/elements/
- 47 http://www.designerstoolbox.com/designresources/elements/vista/ie/
- 48 http://www.designerstoolbox.com/designresources/elements/vista/ie/
- 49 http://www.designerstoolbox.com/designresources/elements/vista/firefox/
- 50 http://www.designerstoolbox.com/designresources/elements/vista/firefox/
- 51 http://www.designerstoolbox.com/designresources/elements/xp/ie/
- 52 http://www.designerstoolbox.com/designresources/elements/xp/ie/
- 53 http://www.designerstoolbox.com/designresources/elements/xp/firefox/
- 54 http://www.designerstoolbox.com/designresources/elements/xp/firefox/
- 55 http://www.designerstoolbox.com/designresources/elements/mac/firefox/
- 56 http://www.designerstoolbox.com/designresources/elements/mac/firefox/
- 57 http://www.designerstoolbox.com/designresources/elements/mac/safari/
- 58 http://www.designerstoolbox.com/designresources/elements/mac/safari/
- 59 http://graffletopia.com/stencils/413
- 60 http://graffletopia.com/stencils/413
- 61 http://www.graffletopia.com/stencils/495
- 62 http://www.graffletopia.com/stencils/495
- 63 https://www.smashingmagazine.com/2008/11/26/iphone-psd-vector-kit/
- 64 https://www.smashingmagazine.com/2008/11/26/iphone-psd-vector-kit/
- 65 http://www.designerstoolbox.com/designresources/iphone/
- 66 http://www.designerstoolbox.com/designresources/iphone/
- 67 http://jcorrea.es/2008/08/07/iphone-gui-as-rich-symbols-for-fireworks/
- 68 http://jcorrea.es/2008/08/07/iphone-gui-as-rich-symbols-for-fireworks/
- 69 http://digitalphenom.deviantart.com/art/RIM-Blackberry-PSD-111857107
- 70 http://digitalphenom.deviantart.com/art/RIM-Blackberry-PSD-111857107
- 71 http://wireframes.linowski.ca/2009/10/interactive-sketching-notation-v0-1/
- 72 http://wireframes.linowski.ca/2009/10/interactive-sketching-notation-v0-1/
- 73 http://www.graffletopia.com/stencils/462
- 74 http://www.graffletopia.com/stencils/462
- 75 http://www.designerstoolbox.com/designresources/proofing/
- 76 http://www.designerstoolbox.com/designresources/proofing/
- 77 http://www.designerstoolbox.com/designresources/banners/
- 78 http://www.designerstoolbox.com/designresources/banners/
- 79 http://konigi.com/blog/wireframe-icons-royalty-free-eps-and-png/
- 80 http://konigi.com/blog/wireframe-icons-royalty-free-eps-and-png/
- 81 http://lazycrazy.deviantart.com/art/WEB-UI-Treasure-Chest-v-1-0-139165343
- 82 http://lazycrazy.deviantart.com/art/WEB-UI-Treasure-Chest-v-1-0-139165343
- 83 http://lazycrazy.deviantart.com/art/Webdesigner-kit-128351457
- 84 http://lazycrazy.deviantart.com/art/Webdesigner-kit-128351457
- 85 http://www.henkwijnholds.com/prolonging-the-magic-a4-sketching-paper/
- 86 http://www.henkwijnholds.com/prolonging-the-magic-a4-sketching-paper/
- 87 http://www.flickr.com/photos/alfonsobozzelli/3949828341/
- 88 http://www.flickr.com/photos/alfonsobozzelli/3949828341/
- 89 http://www.flickr.com/photos/owaters/3846053408/
- 90 http://www.flickr.com/photos/owaters/3846053408/
- 91 http://interactivelogic.net/wp/2009/09/iphone-wireframe-templates/
- 92 http://interactivelogic.net/wp/2009/09/iphone-wireframe-templates/
- 93 http://konigi.com/tools/graph-paper
- 94 http://konigi.com/tools/wireframe-magnets-diy-kit
- 95 http://konigi.com/tools/wireframe-magnets-diy-kit
- 96 http://konigi.com/tools/wireframe-magnets-diy-kit
- 97 http://konigi.com/tools/wireframe-magnets-diy-kit
- 98 http://konigi.com/tools/wireframe-magnets-diy-kit
- 99 http://konigi.com/tools/wireframe-magnets-diy-kit
- 100 http://webwithoutwords.com/
- 101 http://webwithoutwords.com/
- 102 http://www.graffletopia.com/
- 103 http://www.graffletopia.com/
- 104 http://mockupstogo.net/
- 105 http://mockupstogo.net/
- 106 http://wireframes.linowski.ca/
- 107 http://wireframes.linowski.ca/
- 108 http://wireframes.tumblr.com/
- 109 http://wireframes.tumblr.com/
- 110 https://www.smashingmagazine.com/2009/09/01/35-excellent-wireframing-resources/
- 111 http://boxesandarrows.com/view/sketchy-wireframes
- 112 http://articles.sitepoint.com/article/tools-prototyping-wireframing
- 113 http://speckyboy.com/
- 114 http://twitter.com/speckyboy
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.