30 Helpful Wireframe Tools
The wireframe tools help us to show how the page layout or arrangement of the website’s content will look like before actually designing it, including interface elements and navigational systems, and how they work together.
It may not depicts the typographic style, color, or graphics, since the main focus lies in functionality, behavior, and priority of content. Aside from websites, wireframes are utilized for the prototyping of mobile sites, computer applications, or other screen-based products that involve human-computer interaction
Today we have collected both free and paid Wireframe Tools, some of which are for online use and others are for desktop use. You can check the features available in each of them and choose the one that boosts up your creativity and makes your work easier.
If you like this article, you might be interested in some of our older articles on Website Analytics Tools, Project Management Tools, Server Monitoring Tools, and Twitter Tools to Increase Your Productivity.
This article is divided in 2 Sections:
Free Wireframe Tools
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.
More Information on Free Sketching & Wireframing Kit
Cacoo
Cacoo is a user friendly online drawing tool that allows you to create a variety of diagrams such as site maps, wire frames, UML and network charts. Cacoo can be used free of charge.
Lumzy
Lumzy is a quick mockup and prototype creation tool for websites and applications.
Draw
DRAW – from a quick sketch to a complex plan, DRAW gives you the tools to communicate with graphics and diagrams. With a maximum page size of 300cm by 300cm, DRAW is powerful tool for technical or general posters, etc.
EightShapes Unify
A documentation system to produce wireframes, maps, flows, storyboards, plans, style guides, specs, usability testing reports, and prototypes too
More Information on EightShapes Unify
Web Site Wireframe Tool
This is a web based tool for building web site wireframes. A wireframe is simply a visual arrangement of site content, which allows developer and client to plan a web site’s content layout without a great investment of time. This particular tool allows the wireframe to be built in minutes, and if desired, a link to view the wireframe can be sent through email, instant message, or even the phone.
More Information on Web Site Wireframe Tool
Gliffy
Gliffy is a web-based application which allows you to create process flow diagrams, org charts, floor plans, business processes, network diagrams, technical drawings, website wireframes, and more.
MockFlow
Super-easy Wireframing. Design, collaborate user interface mockups for your software and websites.
Pencil Project
The Pencil Project’s unique mission is to build a free and opensource tool for making diagrams and GUI prototyping that everyone can use.
More Information on Pencil Project
Wireframe Magnets (DIY Kit)
This DIY magnet template is based on the Konigi wireframe stencils and includes 3 sheets of elements that might be useful in whiteboard prototyping.
More Information on Wireframe Magnets (DIY Kit)
iPhone Mockup
More Information on iPhone Mockup
MockupTiger
MockupTiger is a rapid wireframe and mockup application. You can quickly build sketches of how your future web application, desktop application or Dashboard will look like
More Information on MockupTiger
DENIM
DENIM is a system that helps web site designers in the early stages of design. DENIM supports sketching input, allows design at different refinement levels, and unifies the levels through zooming.
Paid Wireframe Tools
Mockingbird
Mockingbird is an online tool that makes it easy for you to create, link together, preview, and share mockups of your website or application.
More Information on Mockingbird
HotGloo
HotGloo is a rich internet application designed to build functional online wireframes for a website or web projects. Create and share fully interactive online prototypes. Collaborate with colleagues and share the output with clients. HotGloo is the perfect match for anyone working on web project. FREE Plan including 1 project with 5 pages and 1 co-workers.
iPlotz
iPlotz allows you to rapidly create clickable, navigable mockups and wireframes for prototyping websites and software applications.
Lovely Charts
Lovely Charts is a diagramming application that allows you to create professional looking diagrams of all kinds, such as flowcharts, sitemaps, business processes, organisation charts, wireframes and many more
More Information on Lovely Charts
Creately
A website wireframe is a visual guide that represents the skeletal framework of a website. The wireframe depicts the page layout or arrangement of the website’s content, including interface elements and navigational systems, and how they work together.
10screens
Illustrate your business requirements as interactive screen prototypes and business process flows using 10screens.
Jumpchart
Make planning architecture easier with Jumpchart. By creating pages, and subpages you can quickly sketch out the hierarchy of your site.
WireframeSketcher
WireframeSketcher is a software tool that helps product managers, developers and designers quickly create wireframes, mockups and prototypes for desktop, web and mobile applications. It’s a standalone application and a plug-in for any Eclipse IDE.
More Information on WireframeSketcher
SimpleDiagrams
SimpleDiagrams is a small desktop application that helps you express your ideas quickly and simply. There’s just enough functionality to describe a thought or capture a process.
More Information on SimpleDiagrams
MockupScreens
Experiment interactively with your clients, and quickly visualize scenarios of your application, even before the coding has started.
More Information on MockupScreens
ProtoShare
ProtoShare is an online, collaborative, website wireframing/website prototyping tool that reduces interactive project rework while increasing profits.
More Information on ProtoShare
Justinmind
Define web and mobile apps with Rich Interactive Prototypes. Get feedback from your users and test your user interface design.
More Information on Justinmind
Balsamiq Mockups
Iterate SUPER-fast and get honest feedback, The perfect in-between tool for PMs, Devs and UX
More Information on Balsamiq Mockups
Pidoco
Fast and easy like Rapid Paper Prototyping, but completely web-based and with many more features
OmniGraffle
OmniGraffle can help you make eye-popping graphic documents quickly by keeping lines connected to shapes even when they’re moved, providing powerful styling tools, importing and exporting Microsoft Visio files, and magically organizing diagrams with just one click.
More Information on OmniGraffle
Axure
Axure RP gives you the wireframing, prototyping and specification tools needed to make informed design choices, persuade any skeptics, get your design built to spec
Subscribe to SloDive (it's free)
Nothing on FlairBuilder? Lame.
Shocked that LucidChart is not included here.
Thanks for mentioning mockuptiger. you can check the live demo. I won’t post the link as it may get blocked but send me email at support”AT”mockuptiger.com
Anyway the details of the demo will be on the website very soon.
Thanks for including ProtoShare in your list of prototyping tools!
We really try to support needs for your entire team. From creating basic, gray box wireframes to building complex prototypes and uploading design comps and pulling in live websites, ProtoShare helps uncover and clearly define your website or web app requirements before you code.
You can even export a local HTML copy of the prototype or send it to a web-hosted URL for user testing.
Sharing and getting feedback on ideas and prototypes is an important practice in digital development and a process we advocate. We’re always open to feedback on how to improve that process, as well.
Cheers,
Andrea
@ProtoShare
If you’re a designer you’ll want to check out InVision. It allows you to create interactive wireframes and high-fidelity prototypes of your apps in minutes.
Then you can share your experiences with your design team, developers, and clients instantly and gather feedback right on-screen.
@InVisionApp
it’s a ling list but If you really wanna make it complete you should include all the things mentioned above and JustProto as well :)
webbased, easy to use, collaborative.
Let me add our very own PowerMockup to the list, a wireframing plug-in for PowerPoint (Windows only, sorry).
We just released version 2.0 with some amazing new features like Instant Search and the ability to create your own stencil library.
MockupTiger is also available free online.
Just register and start using. You don’t have to pay anything
It does seem like a lot of tools in this space:-)
App Sketcher takes a different approach for rapidly building prototype for your application or website: it allows you to use real web controls (html, jQuery UI components etc.) in addition to graphical images to layout your designs (no coding is involved though). You will be ready to test drive your ideas in any browsers within minutes.
Which tool is easiest to use by a person who wants to sketch out a design for the web developer?
It’s a great list but those apps are very different between each other. Ones just let you draw and others let you to make highly interactive prototypes (such as http://www.justinmind.com). I think is time to group these apps in different categories depending on the level of detail you want to have in your prototype.
I might add Keynotopia (http://keynotopia.com/) with that one :) LOVE using Keynote for prototyping and the templates make it that much faster. Definitely agree with Victor – it would be great to see the tools grouped in different categories. That said, thanks for sharing the list with us!
I hadn’t heard of Wireframe until recently so I thought I’d have a look to see what was available in on the market. Found this excellent resource so I need look no further…thanks again greatly appreciated. Will tweet this article too as I’m sure plenty of my followers would find this useful.
This is an awesome collection of wireframe tools you have here. A very nice post indeed!