Website prototyping and wireframing tools can help you sketch out and draft your overall website architecture without the need to hire a web designer to do it. For this reason, wireframing is the first step one should consider when designing a new website. In this MasterNewMedia guide you will find the best free tools available out there for wireframing and website prototyping design work. Photo credit: WebDesigner Depot In general, a wireframe is intended to be a draft visual prototype used in interface design to sketch out the architecture of a website and the relationships between its pages, all without needing to worry about the specific of its graphic design. This is why it is called a "wireframe": because it outlines only the key areas and components of the future site, without detailing color, graphics and specific detail elements. Historically though, wireframing comes from the world of computer graphics, where the term describes a mode of representing 3D objects by displaying only their wireframe, in order to have a rapid rendering and display of even complex images without a long wait. But wireframes are not just tremendous design-complexity simplifiers and time-savers, as their benefits goes well beyond reducing your design rendering and production time. Here are some other practical advantages of utilizing wireframes and web prototyping tools to pre-design your website:

• Consistency: Wireframing tools make it easy to test and try out several variations of a design solution without requiring extensive time and resources. It is easy to experiment with very different different design and layout approaches without going broke.
• Planning: Web site design wireframes are also tremendously helpful when needing to communicate initial design ideas with team-mates, clients and developers. A website prototype can act as a solid design base on which to consider improvements and refinements, as well as content structure, overall layout, positioning of key elements, and other types of design requirements.
• Navigation Ease: A wireframe helps designers to plan, develop and position web navigation elements to provide a better experience for website visitors. By developing printable wireframes and site prototyped pages one can easily pre-test and analyze ahead of time which types of solutions would be most appropriate to adopt.
• Infinite undo: Prototyping tools allow you to revert and track back the full history of your previous design changes and revert back to any of them.
• Realism: Website mockups can be created that can be used in early user tests and that look like a normal web site.
• Collaboration and Sharing: Everyone can get involved. Reach out for other designers or colleagues to get feedback. You can share your wireframe design easily with clients and customers to illustrate the progress of your design work.
• Free: Save money. Yes: you do not need to pay anything to use one of the free prototyping tools listed in this guide.

To help you select and identify your ideal free wireframing or website prototyping tool, I have done my best to collect and organize all the relevant data that can help you compare and select which online service is the most appropriate for your needs. Here below, you will find an interactive mindmap, a comparative table and a set of mini-reviews to make your evaluation as effective as possible. Here the criteria I have used for this comparison:

• Software type: Downloadable / web-based tool (if downloadable, the operating system supported is specified).
• GUI symbol library: Free, readily-available buttons, scroll bars, menus and other objects to draw wireframes.
• Interactive wireframes: Clickable mockups that simulate the navigation between web pages.
• Real-time collaboration: Interaction with customers and collaborators and receive live feedback.
• Export formats: Supported formats to export wireframes projects.
• Account limitations: Restraints inside free account (if any) like usage time, number of wireframes you can create, etc.

N.B.: The present roundup of free wireframing tools is still incomplete. You may want to bookmark this page (simply hit CTRL+D on your Windows keyboard or CMD+D on your Mac keyboard) as I will be adding more services in the coming weeks. Here is the full guide in detail:

Free Wireframing and Website Prototyping Tools - Comparison Tables

Free Wireframing and Website Prototyping Tools

1. Gliffy

   Gliffy is a web-based wireframing tool that allows you to sketch out a prototype of your website, You can create both static and interactive wireframes to simulate navigation between web pages and take advantage of an extensive GUI symbol library. You can also collaborate with other people to receive real-time feedback and comments on your work. When done, you can export your wireframes to SVG, Gliffy XML files, JPG or PNG image formats. The free account of Gliffy lets you draw up to five wireframes without encryption, but it is ad-supported.
   http://www.gliffy.com/
   
   
   
   
   

2. Jumpchart

   Jumpchart is a browser-based website planning application that allows you to draw a content wireframe of your website. You can create both static and interactive wireframes to simulate navigation between the web pages of your mockup. Jumpchart also lets you share your wireframing projects with customers and clients to receive feedback and comments on your work without using email attachments. If you need to, you can export your wireframes to CSS / XHTML files or to a WordPress-compatible format. Jumpchart is free for up to two wireframes with a maximum of two shared collaborators. No GUI symbol library is available.
   http://jumpchart.com/
   
   
   
   
   

3. MockFlow

   MockFlow is a service to prototype websites, available both as a web-based application and as a software tool for Windows and Mac. Wireframes created with MockFlow are interactive and simulate user navigation across web pages. To draw your wireframes, you can use the large GUI symbol library available. Collaboration on shared wireframes is also fully supported. When done, you can export your projects to PPT, PDF or PNG files. Please note that with the free account all your exported files will be watermarked. Free MockFlow accounts let you build one wireframe with up to four pages and up to two shared collaborators.
   http://www.mockflow.com/
   
   
   
   
   

4. iPlotz

   iPlotz is a wireframing tool that allows you to create navigable mockups of websites and software applications. iPlotz is available both as a web-based service and as a downloadable software for Windows and Mac machines. The service has a large GUI symbol library that provides ready-to-use buttons, scrollbars, menu bars and other objects that you can use to draw your mockups. You can also share your project in real-time and receive live feedback and comments. When done, you can export your wireframe to PDF, PNG, JPG or HTML files. The free account of iPlotz lets you create one wireframe with up to five navigable pages.
   http://www.iplotz.com/
   
   
   
   
   

5. Mocklinkr

   Mocklinkr is a web-based service to create prototypes of your website by drawing interactive wireframes that you can navigate just like a real site. You can also share your wireframing project with other collaborators who can provide feedback directly using Mocklinkr. The free account lets you draw up to ten wireframes with no page limit. No export feature, nor GUI symbol library are available.
   http://www.mocklinkr.com/
   
   
   
   
   

6. Pencil Project

   The Pencil Project is a free open-source Firefox add-on that allows you to create wireframes and prototypes within Firefox. You may create an interactive wireframe that simulate web navigation and also use the GUI symbol library to add objects, buttons, scrollbars and other goodies to make your wireframe more realistic. All wireframes that you create can be exported to HTML, PDF, PNG or to MS Word and OpenOffice.org compatible file formats. No collaboration features are available.
   http://www.evolus.vn/Pencil/Home.html
   
   
   
   
   

7. Lumzy

   Lumzy is a free browser-based mockup creation tool that allows you to prototype your website. An extensive GUI symbol library is available to add graphic elements to your mockup in order to add more realism to your project. Also, you can invite other people to collaborate on your mockup project and receive feedback. Exporting formats available are: PDF, PNG, JPG. Interactive mockups are not supported.
   http://www.lumzy.com/
   
   
   
   
   

8. Mockingbird

   Mockingbird is a free web-based wireframing tool that allows you to create interactive prototypes of your website. You can design your website right inside your web browser, taking advantage of a large GUI system library with several website objects to personalize your mockup. Once you are done with your work, you can share your project with other collaborators or export your wireframe to PDF and JPG file formats.
   http://gomockingbird.com/
   
   
   
   
   

9. FluidIA

   FluidIA is a web-based wireframing tool for prototyping websites and user interfaces. Still at an early development stage, FluidIA works properly only using Firefox 2.5. Collaboration features are available with FluidIA, so you can share and interact with other people on your website mockup. No GUI system library, exporting feature, nor interactive wireframes are supported.
   http://www.fluidia.org/
   
   
   
   
   

10. Balsamiq Mockups

    Balsamiq Mockups is a wireframing tool that allows you to prototype interactive website wireframes. Balsamiq Mockups is available both as a web-based application and as a downloadable software for Windows, Mac and Linux. The service has a large GUI symbol library with ready-to-use buttons, scrollbars and other objects you can use to draw your mockups. Collaboration features also let you share your project to receive real-time feedback and comments. When done, you can export your wireframe to XML, PDF, and PNG files. The free account lets you create unlimited wireframes for seven days.
    http://www.balsamiq.com/products/mockups

Originally prepared by Robin Good and Daniele Bazzano for MasterNewMedia, and first published on Jun 7th, 2010 as "Wireframing And Website Prototyping: Best Free Tools To Design Your Website".