23 Tools and Resources for Great Wireframes

Wireframing is a very useful tool when creating web pages, and when done correctly, it can save a web designer so much time and energy! Below are more than 20 tool and resources for creating better wireframes, to help fellow web designers in the wireframing process. I hope you find the list useful, and please feel free to add your own if you know of any. Enjoy!

960.gs Templates for Inkscape

A collection of 960 templates for Inkscape.

Android Patterns

A set of interaction patterns that can help you design Android apps. An interaction pattern is a short hand summary of a design solution that has proven to work more than once. Please be inspired: use them as a guide, not as a law.

Free Photoshop browser templates

You need a clean browser screenshot for a design presentation? Look no further: our free photoshop browser templates for your professional screendesign come in 1024×768 pixels and 800×600 pixels size , all kinds of different browser flavours and with a few extras on top.

Wireframe Symbols

A Collection of Wireframe elements created by Johnny Bilotta.

iPad Sketch Elements AI

Collection of common iPad elements in a sketch – like style allows us to easily and quickly mock up flows of custom wireframe screens.

Illustrator template for iPhone design

A template with UI elements for the Iphone.

Dragnet website wireframews kit for Adobe Fireworks

Dragnet website wireframes kit v0.91 is a common library for Adobe Fireworks and contains over 25 objects that are useful for rapid prototyping of websites. It is completly free to download and use. The kit contains common web design elements such as scrollbars, buttons, menus, alerts etc. Most of them supports the 9-slice scaling feature that is build into Fireworks for a better resizing of the objects.

Sqetch, an Illustrator Wireframe Toolkit

Sqetch is a little Illustrator-toolkit consisting of several templates and elements: Browser, iPad upright, iPad landscape, Smartphone, GUI-Elements, and Form-Elements.

Sketching the iPhone

A pretty comprehensive set of iPhone assets that you may need. This includes several different keyboards, buttons, toolbars, dock icons, and so much more. It’s enough to get you started, but not so much that you feel limited in what you can do.

Sketchy Illustrator wireframes

Collection of wireframes for Adobe Illustrator designed by Matthew Rea.

Free Sketching & Wireframing Kit

Sketching & Wireframing kit is a free set of elements for sketching and wireframing. It consist of form elements, icons, indicators, feedback messages, tooltips, navigation elements, image placeholders, embedded videos, sliders and common ad banners.

Android GUI PSD

This Photoshop template makes it easy to mockup pixel-accurate Android app designs.

Best Practice UX Forms

UX form design practices, providing 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.

Free Wireframe Toolbar Icons for GUI designers.

These icons can be used for wireframes and software mockups creation, websites and software applications toolbars and menus including Android, Windows Mobile, Palm, iPhone and iPad apps. You’ll find a set of 8 cursors and 296 icons in black and white color versions. The icons include pagination arrows, ratings and voting controls, social interaction symbols file system and text editor actions.

Sketching the iPad

Using an Omnigraffle iPad stencil to develop mock-ups faster.

Yahoo Stencil Kit

Yahoo! Design Stencil Kit version 1.0 is available for OmniGraffle, Visio (XML), Adobe Illustrator (PDF and SVG), and Adobe Photoshop (PNG), and covers the following topics: 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.

Web Wireframe Kit

A simple way to plan the layout and a cost-effective, time-saving tool for web designers.

Wireframe Shapes

This is a set of shapes for making wireframes (low-fidelity web page schematics) in OmniGraffle version 5.x (Mac OS X). It consists of most of the basic elements you’ll need to create user interface specifications.

Simple UI Elements

Simple UI Elements is a clean, well organized PSD file containing common user interface elements for web and app designs.

Keynote Wireframe Templates V1.2

Wireframe quickly and cheaply using Apple Keynote, then add hyperlinks to make the interface clickable. These vector user interface elements are designed in Apple Keynote, and are fully editable and customizable without needing additional tools.

Wireframe Magnets (DIY Kit)

DIY magnet template is based on the Konigi wireframe stencils and includes 3 sheets of elements that might be useful in whiteboard prototyping.

Massive Web UI & Button Set

Massive Web UI and button set that was designed by our very own Jon Phillips. From text boxes, to buttons, to drop-down menus, this set should have something useful for everyone.

User Interface Design Framework

GUI library – Hundreds vector elements for interface design

FUEL Free Web UI Wireframe Kit

This web UI template kit is made completley with shape objects and in some cases converted into SmartObjects. So they’re totally scalable.

Teylor Feliz
Teylor Feliz

Teylor is a seasoned generalist that enjoys learning new things. He has over 20 years of experience wearing different hats that include software engineer, UX designer, full-stack developer, web designer, data analyst, database administrator, and others. He is the founder of Haketi, a small firm that provides services in design, development, and consulting.

Over the last ten years, he has taught hundreds of students at an undergraduate and graduate levels. He loves teaching and mentoring new designers and developers to navigate the rapid changing field of UX design and engineering.

Articles: 182