Curated by: Luigi Canali De Rossi

Monday, June 21, 2010

Wireframing And Website Prototyping: Best Tools Under $150 To Design Your Website

Sponsored Links

Wireframing and website prototyping tools allow you to take full control of your website architecture without hiring a web designer. You can build a faithful draft of what your website layout will look like without detailing color, graphics and specific design elements. In this MasterNewMedia guide you will find the best wireframing and website prototyping tools under $150 to start sketching out your site right away.

Photo credit: Yasuhisa Hasegawa

A website wireframe is defined by Wikipedia as such:

A website wireframe is a basic visual guide used in interface design to suggest the structure of a website and relationships between its pages. A webpage wireframe is a similar illustration of the layout of fundamental elements in the interface.

Wireframes are a significant step in simplifying the design of your site, because a wirerame mockup allows you to reduce design rendering and production time while also freeing you time to focus on what is really important to have on your site.

Another remarkable advantage of wireframing and website prototyping tools is also that they are available in different price tags and flavors to fully adapt to your budget.

You can already find a guide published on MasterNewMedia on free wireframing tools and another one will be published in the next few weeks on professional wireframing tools.

Instead, this very guide is devoted to all those publishers who want to get their hands dirty with wireframes for a reasonable price. In fact, here you will find a selection of website prototyping tools that cost under $150 per month (well below in most cases).

To help you select and identify the best wireframing solution for your specific needs, I have then compared and selected a number of tools (both web--based and software applications).

Here below, you will find an interactive mindmap and a set of comparative tables and mini-reviews to make your evaluation as simple 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.
  • Starting price: First price level available.

N.B.: The present roundup of wireframing tools under $150 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:



Wireframing and Website Prototyping Tools Under $150 - Comparison Tables


Wireframing and Website Prototyping Tools Under $150

  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 Premium account of Gliffy costs $5/mo and lets you draw unlimited wireframes.

  2. Creately

    Creately is a browser-based wireframing tool. Creately is specifically designed for online collaboration purposes, so that you can sketch out a mockup of a website to show your clients collecting immediate feedback without using e-mail attachments. Website mockups are also interactive, so that you can simulate navigation between different web pages of your mockup site. In addition, you have a large GUI symbol library with readily-available objects to build your wireframes. To export your mockups you can choose among PDF, JPG or PNG file formats. Starting price for Creately is set at $4.95/mo.

  3. ProtoShare

    ProtoShare is a collaborative, web-based website prototyping tool. You can draw interactive website mockups that simulate navigation between web pages, share them with your clients and collaborators to gather feedback and also export your mockups to HTML, CSS, JavaScript and MS Word formats. An extensive GUI library of symbols, web elements and drawing objects is also available to help you draw your website wireframes. ProtoShare pricing plans start at $29/mo for a single user.

  4. HotGloo

    HotGloo is a web-based wireframing application. With HotGloo you can draw interactive prototypes of your website, taking advantage of a list of readily-available GUI objects, shapes and web elements. The built-in chat function allows you to receive immediate feedback on your work from clients and collaborators. To export your finished website mockups you can choose between PDF and PNG file formats. HotGloo pricing line starts from $7/mo, but with such starting plan you are limited to build one project only.

  5. Pidoco°

    Pidoco° is an online GUI design tool that allows you to create interactive, clickable wireframes to prototype websites and user interfaces. The wireframes you create can be exported either to HTML or to a MS Word-compatible format. A comprehensive GUI system library is also available to provide you with readily-available web elements like menu bars, scrollbars and other objects to draw rich user interfaces. Pidoco° pricing tags starts at $9/mo, but to take advantage of real-time collaboration features, you must go for the $29/mo plan or superior. No collaboration features are available.

  6. Mockup Screens

    Mockup Screens is a software tool for Windows computers that lets you prototype and build mockups of your website. Wireframes are only static, therefore you cannot hyperlink different pages of your wireframe to simulate user navigation. A GUI symbol library is available to utilize pre-made objects and drawing elements inside your mockups and the exporting feature allows you to convert your wireframes to XML, HTML or PDF files for offline reading. MockupScreens is priced at $99.95 for a single-user license.

  7. WireframeSketcher

    WireframeSketcher is a software tool that lets you draw mockups of your website. WireframeSketcher is based on the Eclipse IDE and it is available for Windows, Mac and Linux machines. All mockups you can build are static, with no interaction between different web pages. A GUI symbol library is available to utilize readily-available design objects and other website elements inside your mockups. You can also export your website wireframes to PDF and PNG files. WireframeSketcher costs $75 for a single-user license.

  8. FlairBuilder

    FlairBuilder is a web-based tool that allows you to prototype websites and iPhone apps. Your mockups are interactive, which means you can simulate user navigation experience between different web pages of your site or app. You can also use the large GUI system library to find pre-made web elements that you can add to your wireframes. To purchase FlairBuilder you can either pay $24/mo or $99/year. No collaboration, nor exporting features are available.

  9. OmniGraffle

    OmniGraffle is a wireframing tool available for Mac and the iPad that you can use to sketch out interactive website wireframes. A GUI system library is at your disposal to grab pre-made web elements to add and style your wireframes. Exporting possibilities span from PICT, PDF, EPS files to MS Word- and MS PowerPoint-compatible formats. OmniGraffle is priced at $99.95 for a single-user license. No collaboration features are supported.

  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. Balsamiq Mockups Desktop App is priced at $79 for a single-user license.

  11. 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. iPlotz starting price is set at $15/mo for the web-based service and $99/year for both web-based service and desktop app (single-user license).

Originally prepared by and Daniele Bazzano for MasterNewMedia, and first published on Jun 21st, 2010 as "Wireframing And Website Prototyping: Best Tools Under $150 To Design Your Website".

Robin Good and Daniele Bazzano -
Readers' Comments    
blog comments powered by Disqus
posted by Daniele Bazzano on Monday, June 21 2010, updated on Tuesday, May 5 2015

Search this site for more with 








    Curated by

    New media explorer
    Communication designer


    POP Newsletter

    Robin Good's Newsletter for Professional Online Publishers  



    Real Time Web Analytics