Pinterest Stumbleupon Whatsapp
Ads by Google

There are a number of steps you have to go through when designing a piece of software or even a website. After that moment of insight, the designer on duty needs to create an actual design and “˜sketch’ the look and feel of the application, essentially defining the graphical user interface. For this purpose, they usually use mock-up conceptual drawings and wireframes.

Proprietary software, although very capable, is often incredibly expensive and needlessly complicated. For something as simple as creating wireframes, this borders on ridiculous.

With web 2.0 (and more recently, with HTML5), the software battle is taken to the cloud. And best of all, most of it is comes entirely free of charge! In this article, we’ll show you some online alternatives to create conceptual software and website designs.

MockFlow

This is an incredibly extensive wire-frame editor. The basics are simple. In the right-hand side toolbar, you browse for objects that resemble the object you’re looking for, and you drag them on the screen. There, you can edit and adjust those objects until they fit your needs.

MockFlow has an enormous amount of objects, and some of them incredibly specific. When you create a new design, you can start from one of the design templates, with choices including the iPhone, Android, and iPad interfaces.

Ads by Google

These wire-frames can be shared and co-edited with other users – limited to two in the free version. Other limits imposed on free users are a maximum of 10 MB of storage and one mock-up with four pages and up to five remembered revisions.

However, registered free users can download your projects in a number of file formats, including PNG and PDF, or use MockFlow’s desktop application with online sync for more reliable editing.

MockingBird

MockingBird is similar to MockFlow on a number of levels. The interface is comprised of the same drag-and-drop principle, although better executed and easier to handle. In most cases, MockingBird can help you create your wire-frames in a fraction of the time it’d usually cost you.

A lot of said “˜free limits’ are also absent. There is no apparent limit on the amount of storage or the amount of pages you’re able to create.

Then again, MockingBird lacks some of those more extensive features. Although you can similarly export and share your mock-ups with other people, there doesn’t seem to be an option for real-time team collaboration, tracking changes, or a built-in chat. Made with HTML5, MockingBird also doesn’t work on Internet Explorer.

Concluding, MockingBird is unrestricted in its free version, and offers a slightly simpler user experience. In exchange, you’re giving up on extensive collaboration and other advanced features.

The Commentor

With the wire-frame aspect covered, it’s time to move on to the next step in the design process: mock-up, rinse, and repeat. We’re talking about putting the proverbial flesh on your wireframes, probably using Photoshop or another image editor. This next tool focuses on the latter part of business.

The Commentor, although not particularly useful while designing, helps you with comments and revisions. Instead of creating a bulk of disorganized email traffic, it takes your designs into the cloud. You can invite up to three free users to comment on your mock-ups, with sticky threads and support for revisions – up to 100 images. Mock-up, rinse, and repeat. I think you get the drill.

Do you know any other tools that might be useful to create a software or website design? Let us know in the comments section below!

  1. Eileen Coyle
    March 4, 2015 at 12:21 pm

    Hi,

    Here's a really useful and comprehensive list of wireframing and prototyping tools that are out there. The main features and advantages of each tool is also outlined in the article

    Eileen (from fluidui.com)

  2. perKypot
    April 7, 2010 at 2:33 am

    A very useful page i found a while back... I particularly like "Balsamiq"

    http://webdesignledger.com/too...

  3. perKypot
    April 6, 2010 at 4:33 pm

    A very useful page i found a while back... I particularly like "Balsamiq"

    http://webdesignledger.com/tools/10-excellent-tools-for-creating-web-design-wireframes

  4. Simon Slangen
    April 5, 2010 at 6:46 am

    Both of these look incredible as well. Thanks for the tips! :-)

  5. nerotic
    April 5, 2010 at 8:41 am

    Just two weeks ago I was researching this very topic and I signed up for and tested all 3 of the options on this page, they're all great in their own way.

    The best that I found however wasn't mentioned.

    InPreso: http://www.inpreso.com/inpreso...

    Not only is completely full featured but they've developed a partner desktop app that's built out in Adobe Air meaning you can not only work offline, but do so in a very lightweight and powerful application.

    The whole package is truly fantastic and I strongly recommend that anyone looking for a mockup tool give InPreso a chance.

  6. nero
    April 4, 2010 at 10:41 pm

    Just two weeks ago I was researching this very topic and I signed up for and tested all 3 of the options on this page, they're all great in their own way.

    The best that I found however wasn't mentioned.

    InPreso: http://www.inpreso.com/inpresoscreens/

    Not only is completely full featured but they've developed a partner desktop app that's built out in Adobe Air meaning you can not only work offline, but do so in a very lightweight and powerful application.

    The whole package is truly fantastic and I strongly recommend that anyone looking for a mockup tool give InPreso a chance.

  7. Brian
    April 5, 2010 at 12:51 am

    I was surprised to see that balsamiq was absent from your list - it is a powerful, widely used tool. We use it locally and on our wiki (online) for collaboration. The link is http://www.balsamiq.com/produc...

  8. Brian
    April 4, 2010 at 2:51 pm

    I was surprised to see that balsamiq was absent from your list - it is a powerful, widely used tool. We use it locally and on our wiki (online) for collaboration. The link is http://www.balsamiq.com/products/mockups.

Leave a Reply

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