50 Free UI and Web Design Wireframing Kits, Resources and Source Files


Planning and communication are two key elements in the development of any successful website or application. And that is exactly what the wireframing process offers: a quick and simple method to plan the layout and a cost-effective, time-saving tool to easily communicate your ideas to others. A wireframe typically has the basic elements of a Web page: header, footer, sidebar, maybe even some generated content, which gives you, your clients and colleagues a simple visually oriented layout that illustrates what the structure of the website will be by the end of the project and that serves as the foundation for any future alterations.




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


Quommunnication Stencil Kit1

A PSD file with common design elements for sketching and wireframing: form elements, RSS feed icons, colors, Advertising units, browser windows and grids.



1



Mac OS X Interface Stencil Kit2

Leopardy interface stencil kit. This one makes extensive use of tables, for maximum flexibility while maintaining pixel precision.



2



Facebook Applications Stencil Kit3

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



3



Flex Stencil Kit4

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



4



Eclipse Stencil Kit5

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



5



Massive Web UI & Button Set6

This set contains UI elements in three distinct styles: glossy, satin/light gradient, and one-color. The satin/light gradient set is available in 7 different colors (which you’ll find all of in the PSD file). Available are control buttons including arrows and basic symbols, info and text boxes, breadcrubs, buttons, and other navigation elements, drop-down and collapsible box styles, speech bubbles, search forms and loading elements.



6



Yahoo! Design Stencils – Design Pattern Library7

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.



7



Free Sketching & Wireframing Kit8

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.



8



EightShapes Unify9

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.



9



Wireframe Symbols10

This download contains a wireframe symbol library and a full Adobe Illustrator file with all of the elements spread out on a board. To install the library just drag and drop the file named Wireframe Symbols.ai into your Adobe Illustrator “Symbols” directory. Once you open Illustrator, go to your Symbols Palette and load the library.



10



OmniGraffle Wireframe Stencils11

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



11



OmniGraffle UX Template12

This is an OmniGraffle Pro template for interface design that includes shared layers for basic UX document needs; e.g. title page, wireframes, storyboards.



12



Web Page Elements13

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.



13



Web Browser Templates

Photoshop Browser Templates – Web Designer Toolkit14

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.



14



Browser Templates for the Website15

These Photoshop browser templates for Internet Explorer, Firefox for Mac and Firefox for Windows have been mocked up in the following sizes: 800×600, 1024×768 and 1280×1024 pixels.



15



Photoshop Browser Templates16

This layered PSD file contains three different browser resolutions; all with easily editable titles, address bars, scroll bars and favicons. Just open the PSD and place the layers on top of the design that you are working on, and voila!



16



Browser Screens and Website Elements17

A useful set of vector website assets.



17



Web-Safe Area Templates for Photoshop

All of the Web-safe area browser PSD templates18 listed below can be individually downloaded by choosing from the following resolutions: 640×480, 800×600, 1024×768, 1280×960 and 1600×1200 pixels.



Windows Vista IE Web-Safe Area19



19



Windows Vista Firefox Web-Safe Area20



20



Windows XP IE Web-Safe Area21



21



Mac OS X Safari Web-Safe Area22



22



Mac OS X Firefox Web-Safe Area23



23



Mac OS X Safari Web-Safe Area24



24



Web Form Elements

Best Practice UX Forms Stencil25

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.



25



Photoshop Form Element Templates26

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.



26



Browser Form Elements PSD27

Included in this PSD file are form elements for Mac Firefox 3 and another for Vista IE7.



27



Web Form Elements Volume 128

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



28



Web Form Elements Vol.229

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



29



Photoshop Button Templates30

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.



30



Web Browser Elements

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



Windows Vista IE Form Elements32



32



Windows Vista Firefox Form Elements33



33



Windows XP IE Form Elements34



34