6 Outstanding Wireframe Resources to Inspire Your Next Design

6 Outstanding Wireframe Resources to Inspire Your Next Design

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.

6 Outstanding Wireframe Resources to Inspire Your Next Design

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.

Wireframe Showcase

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.

MockupsToGo

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.

I Love Wireframes

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.

MockFlow

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.

Creately

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.

Mockup Builder

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!

Sherice Jacob is a blog and website designer, author, cat person, copywriter, flavored coffee addict. Her interests include writing, travel, art and world domination.

Comments

  1. / Reply

    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.

  2. / Reply

    I used the twitter bootstrap right now. very usefull

  3. / Reply

    Another nice tool is Flair Builder, I’ve used it for some project and with Balsamiq has been a great combination

  4. / Reply

    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.

  5. / Reply

    Hi,

    I use Axure – awesome tool for wireframing and prototyping.

    Regards

    • Zoe,
    • January 1, 2012
    / Reply

    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.

    • NJ,
    • January 2, 2012
    / Reply

    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

  6. / Reply

    beautiful and useful tools to get help as website designer. thanks for sharing

  7. / Reply

    beautiful and useful tools. thanks for your post…

    • Mike,
    • January 6, 2012
    / Reply

    Thanks for featuring wireframeshowcase.com! I urge everyone to submit some wireframes from their projects!

  8. / Reply

    Hi, Use long Lumzy.com

  9. / Reply

    @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.

    • Cynthia,
    • February 10, 2012
    / Reply

    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/

    • Emil,
    • July 19, 2012
    / Reply

    Have you seen Moqups https://moqups.com ?
    It’s a very fast and nice HTML5/SVG based app that runs in the browser!

  10. / Reply

    It’s great to see so many resources out there to inspire wireframing! At Pidoco, we believe your team can be the best source of inspiration, which is why we have some of the best collaboration features and we enable people to edit their projects at the same time. We offer a free trial at http://www.pidoco.com/free Happy wireframing!

  11. / Reply

    Hey, you missed WireframeSketcher, a desktop wireframing tool: http://wireframesketcher.com

    It lets you create wireframes using clean or sketchy styles; comes with lots of builtin controls and icons but can also be extended with custom controls; comes with stencils for mobile apps; screens can be linked to create interactive prototypes; results can be exported to PNG or clickable PDF and HTML. All graphics are vector based so that your results are always crisp and good looking.

  12. / Reply

    Maybe this overview of wireframe tools might be interesting for one or two:
    http://ux4dotcom.blogspot.com/2010/12/prototyping-and-wireframing-its-your.html

Leave a Reply

Your email address will not be published. Required fields are marked *

Deals

Iconfinder Coupon Code and Review

Iconfinder offers over 1.5 million beautiful icons for creative professionals to use in websites, apps, and printed publications. Whatever your project, you’re sure to find an icon or icon…

WP Engine Coupon

Considered by many to be the best managed hosting for WordPress out there, WP Engine offers superior technology and customer support in order to keep your WordPress sites secure…

InMotion Hosting Coupon Code

InMotion Hosting has been a top rated CNET hosting company for over 14 years so you know you’ll be getting good service and won’t be risking your hosting company…

SiteGround Coupon: 60% OFF

SiteGround offers a number of hosting solutions and services for including shared hosting, cloud hosting, dedicated servers, reseller hosting, enterprise hosting, and WordPress and Joomla specific hosting.