This article focuses on actual wireframing tools and standalone appliions, as well as resources that you’ll need to build your own wireframe: wireframing kits, browser , form elements, grids, Mac OS X elements, mobile elements, which you’ll use in any typical graphics editor such as or Illustrator. …Or you could use pen and paper.
Complete Wireframing ToolkitsMac OS X Interface Stencil Kit
Leopardy interface stencil kit. This one makes extensive use of tables, for maximum flexibility while maintaining pixel precision.
Facebook Appliions Stencil Kit
A pretty sizable collection of Facebook related elements to use in crting wireframes for Facebook appliions.
Flex Stencil Kit
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.
Eclipse Stencil Kit
This stencil enables you to sily prototype Eclipse (wizard) dialogs with OmniGraffle(TM).
Massive Web UI & Button Set
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, brdcrubs, buttons, and other navigation elements, drop-down and collapsible box styles, speech bubbles, srch forms and loading elements.
Yahoo! Design Stencils – Design Pattern Library
You would be hard pressed to find a better wireframing resource than this one. The Yahoo! Design Stencil Kit is available for almost every appliion: OmniGraffle, Visio (XML), Illustrator (PDF and SVG) and . 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 (eral), mobile (iPhone), navigation and pagination, OS elements, placeholder text, screen resolutions, tabs, and containers.
Free Sketching & Wireframing Kit
The Sketching & Wireframing Kit is a free set of elements for sketching and wireframing. It consists of form elements, icons, indiors, feedback messages, tool tips, navigation elements, placeholders, embedded s, sliders and common ad banners. The Kit comes in two vector formats, one for Illustrator and the other in SVG, which can be sily modified. It can also be downloaded in PDF and EPS formats.
EightShapes Unify
EightShapes Unify is a collection of templates, libraries and other assets that enable user experience designers to crte more consistent and effective deliverables faster. The system uses the Crtive Suite of products; InDesign is the primary authoring tool.
OmniGraffle Wireframe Stencils
This is a set of shapes for making wireframes in OmniGraffle version 5.x (Mac OS X).
OmniGraffle UX Template
This is an OmniGraffle Pro template for interface design that includes shared layers for basic UX document needs; e.g. title page, wireframes, storyboards.
Web Page Elements
Using the open-source “Bitstrm Vera” font set and free icons from FamFamFam, you should have most of your common web page elements covered, including hdings, form elements, content management function, placeholders, etc.
Web Browser Templates Browser Templates – Web Designer Toolkit
These browser templates come in 1024×768 and 800×600 pixel sizes and cover nrly all browsers (Firefox, IE, Safari, Camino, even Netscape). For both sizes, the safe viewing ar is clrly marked in a separate layer.
Browser Templates
This layered PSD file contains three different browser resolutions; all with sily 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!
Browser Screens and Website Elements
A useful set of vector website assets.
Web-Safe Ar Templates for All of the Web-safe ar browser PSD templates listed below can be individually downloaded by choosing from the following resolutions: 640×480, 800×600, 1024×768, 1280×960 and 1600×1200 pixels.
Vista IE Web-Safe Ar
Vista Firefox Web-Safe Ar
XP IE Web-Safe Ar
Mac OS X Safari Web-Safe Ar
Mac OS X Firefox Web-Safe Ar
Mac OS X Safari Web-Safe Ar
Web Form ElementsBest Practice UX Forms Stencil
This is a comprehensive relse of the stencil kit which follows best practices in UX form design. It provides three different ways of laying forms out, ch with their own benefits. This version also provides different button layouts, a progress indior, captcha input field, labels and more.
Form Element Templates
These 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 sily select, adjust or switch them as you plse.
Web Form Elements Volume 1
Volume 1 contains a selection of Web user interace elements for forms in format.
Web Form Elements Vol.2
This is Volume 2 of the Web Form UI Elements mentioned above and has been designed in a different style.
Button Templates
These button templates have been separated into individual layers to be sily selectable. You can choose from the following colors: dark blue, light blue, dark green, light green, yellow, orange, red and purple.
Web Browser ElementsYou can select the element you need from whichever operating system and browser you use, and download them individually.
Vista IE Form Elements
Vista Firefox Form Elements
XP IE Form Elements
XP Firefox Form Elements
Mac OS X Firefox Form Elements
Mac OS X Safari Form Elements
Grid Templates960px Grid Template
This template has a guide for a three-column 20-pixel gutter design, with layers of washed-out colors to visualize both columns for the purpose of the rule of thirds. Additionally, it is down into six columns of 20-pixel gutters.
960 Grid Template for OmniGraffle
Illustrator Template for Blueprint CSS Comps
This Illustrator document ftures a 24-column grid for CSS frameworks such as Blueprint. It consists of guides that comply with Blueprint’s grid of 24 columns of 30 pixels, 10-pixel-wide gutters and a horizontal width of 950 pixels. Horizontal guides are provided at 18 pixels or a 1.5 em line-height for a 12-pixel base font.
Template for Blueprint CSS Comps
This document ftures a 24-column grid for CSS frameworks such as Blueprint. It consists of guides that comply with Blueprint’s grid of 24 columns of 30 pixels, 10-pixel-wide gutters and a horizontal width of 950 pixels. Horizontal guides are provided at 18 pixels or a 1.5 em line-height for a 12-pixel base font.
Mobile App Development ResourcesUltimate iPhone Stencil – Graffletopia
This Omnigraffe iPhone stencil kit contains backgrounds, title bars, buttons, selectors and all other iPhone UI elements. It can be sily resized horizontally by ungrouping, resizing the middle element and then regrouping the elements back into a single button.
iPhone 3G Stencil
Includes standard interface components for the iPhone 3G: buttons, fields, map elements, boards, icons. All components are on a transparent background and should re-size nicely.
iPhone PSD Vector Kit
This iPhone starter kit comes with several button elements as well as six different iPhone interface options.
iPhone GUI Elements
Free iPhone elements available as layered (PSD) files.
iPhone GUI as Rich Symbols for Fireworks
This iPhone kit has been designed using Fireworks. It has several combinations, buttons, backgrounds, etc. It also has some lines of to transform the simple vector symbols into rich symbols, with some variables.
RIM PSD
This download package contains 135 detailed layers for app development.
Optional Wireframe ExtrasInteractive Sketch Notation
The eral id behind this notation is the desire to visualize user interface states as well as user actions in a clr and rapid manner.
Storyboard Characters (via Google Chrome)
Proofrding Marks
Standard Web Banners
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 PNG
The icon set includes EPS and PNG versions of the original Konigi Wireframe Icon Set and are suitable for use in vector drawing appliions such as Illustrator as well as in Visio.
WEB UI Trsure Chest
This PSD layered file, most of whose files are fully editable, contains more than 100 elements for website design.
Webdesigner kit
This download contains fields, menus, checkboxes, radio buttons and cursors.
Printable Sketching PaperA4 and A3 Sketching Grid Paper
This downloadable and printable 960-pixel-wide grid makes it sy to crte 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.
Print and Sketch Wireframe Template
iPhone Appliion Sketch Template
The grid squares for this sketching paper are equal to 10 pixels. The tick marks indie the height of the status bar, nav bar, board, tab bar and toolbar. For best results, print on A4 borderless paper.
iPhone Wireframe Templates for Sketching
Two layouts are available, both in PDF and Visio (VSD) formats for quick iPhone mockups.
iPhone App Wireframe Template
Two versions are available, one in landscape and the other in portrait. ch version includes three pages: page 1 has a vertical screen and notes column; page 2 has a horizontal screen and notes column; page 3 has a three-screen layout that is grt for drafting designs.
Printable Wireframe and NotesThe below 8.5 x 11-inch graph paper 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)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.
Form Elements
Tabs, Buttons and Bars
and Dialogs
Further Resources And Some Wireframing Inspirationweb.without.words
A visual playground where designers take popular sites and reconstruct them in a wireframe.
Graffletopia
Graffletopia is a huge resource of free stencils for OmniGraffle (Mac-only, sadly). With OmniGraffle, you can quickly crte high-quality wireframes, flowcharts and other diagrams.
Mockups To Go
Mockups To Go is a user-contributed collection of rdy-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
Wireframes Magazine is dedied to all things wireframing and prototyping. It has a huge library of downloadable templates, samples and UI tools, and even a section for inspiration.
I {hrt} wireframes
I {hrt} wireframes is a grt source of wireframing inspiration and resources. And yes, we all love wireframes!
Subscribe to:
Post Comments (Atom)
No comments:
Post a Comment