Let’s face it. One of the toughest jobs of being a web designer is coming up with the right blend of navigation, content and images to create a look that’s not only attractive, but also easy to navigate. Wireframes are a huge help in making the creative process come alive. Some simple boxes and lines are all you need to sketch out which page elements go where.
The problem is, when you’re staring at a blank screen, it can be hard to find any inspiration at all. That’s why I’ve gathered six of the best free wireframing resources online. Use these websites and tools to help you create a rough draft for your next project and see how much smoother your workflow can be.
Wireframe Resources
Wireframe Showcase
A collection of wireframe mockups from a wide range of websites and industries. Moving your mouse over the wireframe shows the completed site and clicking on details shows both. Currently there are 63 different sites showcased. You can also leave comments and submit your own wireframe design to the gallery.
MockupsToGo
MockupsToGo is a Posterous site sharing user interface sketches, app outlines and other navigation and user interface pieces that you can download and import into the popular wireframe modeling software, Balsamiq. Lots of different and free wireframing ideas here, including dialog boxes, iphone interfaces, and much more.
I Love Wireframes
Two different galleries operating under the same name. Available as both a Flickr gallery and a Tumblelog, you’ll find a smorgasbord of inspiration in page after page of wireframes, as well as user interface graphics, mobile phone interaction patterns and much more. The Flickr group is more of a 2,000+ member photo pool whereas the Tumblelog is at least somewhat more organized.
MockFlow
A wireframing software program, MockFlow lets you collaborate with team members, export your designs to HTML or make them compatible with mobile devices. The site sports a considerable library of wireframing snippets, and the “MockStore” offers extra layouts designed by community members for sale. One of its more interesting features is the built-in Sitemap Visualizer, which lets you drag and drop pages while instantly restructuring your wireframe accordingly.
Creately
Creately is a browser-based wireframing tool that’s built for teams. The basic "Community" version is free and you can create up to five Public diagrams. Creately goes beyond wireframes and can also be used to create diagrams, workflows, sitemaps, Gantt charts and much more. Also available in a Desktop flavor along with plugins that work with other programs including FogBugz, JIRA and Google Apps.
Mockup Builder
A relative newcomer to the wireframing field, this online wireframing and prototying program uses Microsoft Silverlight to make its magic. Currently available in a beta online and desktop version, you can use Mockup Builder to quickly create interfaces, websites and software workflows. While it doesn’t have the variety of MockupsToGo or the polish of Mockflow and some of the other veteran programs in the list, the possibility is floating around of making it available for iPad and Android – so you can wireframe on the go.
What Are Your Favorite Wireframing Resources?
Have you worked with one of these programs? Do you have a favorite wireframing resource? Share with us in the comments!
Hi great list of wireframe tools. I've used Balsamiq (http://www.balsamiq.com/products/mockups) for the last few years and it is a nice product. I like it because it is built on Adobe Air and I can use it on my Windows PC and Linux laptop.
I used the twitter bootstrap right now. very usefull
Another nice tool is Flair Builder, I've used it for some project and with Balsamiq has been a great combination
Check UXPin (http://uxpin.com) - you can start design on paper (UI elements on post-its), take a picture of it and it will be auto-converted into digital wireframe.
UXPin App itself is a complex though simple tool. Highly collaborative. Whole team can edit wireframe in the same time...
...and it's made in HTML, CSS and JS not Flash as most tools on the market.
Hi,
I use Axure - awesome tool for wireframing and prototyping.
Regards
Ditto Justin on Balsamiq - there's a web version now, too: http://mybalsamiq.com/
Very intuitive and easy to use - I've even used it effectively live during brainstorming meetings, and I've found colleagues with no background in web design can pick it up independently to use to play with ideas.
I like to propose https://www.wireframes.org . It is completely html5 and online. You can also host it on your own domain just like wordpress
beautiful and useful tools to get help as website designer. thanks for sharing
beautiful and useful tools. thanks for your post...
Thanks for featuring wireframeshowcase.com! I urge everyone to submit some wireframes from their projects!
Hi, Use long Lumzy.com
@Marcin Treder - UXPin look interesting.
I usually skip wireframes in favour of doodles and go straight to code. This could be an alternative. The quicker the site is built and start testing the better.
Great list of tools! I like to use Keynote - in combination with Keynotopia templates. Great for wireframing, but also great for finished designs! You can turn your wireframes into pixel perfect prototypes (royalty free) with just a few clicks. Also great for collaboration with users/clients (can annotate on the screen) and export to PDF for testing on mobile phones & tablets :) If you use a PC and Mac, you can use them with PowerPoint (I'm a new mac convert and wouldn't go back but my work has PCs so I have both..) They have a demo video on their site: http://keynotopia.com/