Entries RSSico-rssico-rss

10 great wireframe and mockup tools to plan your new project

July 6th, 2010 - Posted in Entrepreneurs | 7 Comments »

Wireframes are essential for any kind of application or website mockup development. It makes you think before actually creating and helps you discuss the usability of your new project with your peers (clients or partners).

Wireframes also avoid misunderstandings with clients when creating web projects and help them having an idea of what the project is all about, before even touching code.

With that niche in mind, a lot of companies are creating wonderful wireframe and UI applications, many of them free or at a very low monthly cost, and they will help you sketch your new online project or software in a few hours.

Check them out below and, as usual, comment if you have another great tool to share. Ah, and if you like this post, please retweet and share it with your followers.

1. MockingBird

This great software is still in its beta stage and therefore is free to use. Built with the Cappuccino framework, it doesn’t need flash to run and looks like a real desktop application, but is web based.

From the site: “Mockingbird is an online tool that makes it easy for you to create, link together, preview, and share mockups of your website or application.”

This wireframing app offers great features such as “internal links”, “smart text resizing”, “a wide array of UI elements” among many others!

Definitely a great option for your next wireframe (and FREE for now).

Watch review from geekreviews.com here:

2. Balsamiq

Despite their minimalistic (not to say amateur) looking website, Balsamiq is one of the most well known user interface (UI) applications (or wireframe development software) around. They are still working on a web-based app and currently offer their desktop application for only USD 79.00.

It’s a great piece of software with many interesting features and it doesn’t look like a regular wireframing app. The user interface looks like it has been hand drawn, keeping everything minimalistic so that you can focus on what’s important: the functionalities of your future project.

From the website: “We know it: most people prefer to use pen and paper or a whiteboard to make software mockups because “it’s the fastest way. Well, if you count the time it takes to transfer the mockup from paper to a digital image, we think Balsamiq Mockups is faster, not to mention much easier and, dare we say it, more fun! We optimized the user interface for speed: fewer buttons, more keyboard commands, full undo/redo, object snapping…you name it.? “

Watch demo here:

3. JumpChart

JumpChart is a little different from any other wireframing app. With this web-based software you almost build a whole website without touching html code and after it is finished, you can just export your work into HTML/CSS or even WordPress.

The usability and way of creating mockups is not as easy as in other softwares, but the ability to export your work into working code makes it stand out.

From the website: “How do you know what you’re going to build before you plan it? Jumpchart helps you get all your content in one spot where you, your team, and your clients can see it. Better still, Jumpchart helps you quickly and easily drag the content around until you have a perfect blueprint to start building your website with. But Jumpchart has one more trick up its sleeve… When you’re done planning, you can export straight to clean CSS/XHTML, or WordPress®.”

Small Demo (but you might get the idea) – Tour Here:

4. MockFlow

MockFlow is a web-based wireframing tool that also has a Desktop version (syncs with online version) and a library with many UI items to create great website or software mockups. MockFlow comes with a FREE version (1 project with for pages) and a very affordable Premium package for only USD 59.00/year.

From the website: “Super-easy Wireframing – Design, collaborate (in real-time) user interface mockups for your software and websites.”

Watch the Demo here:

5. HotGloo

HotGloo is a nice, hosted and complete wireframing solution for your projects. It is hosted, so you don’t need to worry about backups or upgrades. It also offers a huge collection of UI elements to include in your pre-design. They offer a free account and a paid account starting at USD 7/mo.

From the website: “HotGloo is a rich internet application designed to build functional online wireframes for a website or web projects. Create and share fully interactive online prototypes. Collaborate with colleagues and share the output with clients. HotGloo is the perfect match for anyone working on web projects.”

Watch the demo (and publicity video here):

6. iPlotz

iPlotz is one of the most complete wireframing apps around. With iPlotz you can create clickable and navigable mockups of your new project, insert many UI elements and share . It comes in many paid plans (including a desktop software option) and 1 free (1 project) plan.

From the website: “iPlotz allows you to rapidly create clickable, navigable mockups and wireframes for prototyping websites and software applications.”

Watch the Introduction to iPlotz below:

7. Pencil Project

This is a Mozilla Foundation project, is FREE and runs as a add-on to Firefox but can also be installed as a standalone application for Windows and Linux (not MacOS yet).

Go check it out, it only needs 600kb to be installed on your browser!

8. Pidoco

Pidoco is a german web-based prototype/wireframe development app that offers features such as: “Linkable Prototypes”, “Remote Usability Testing”, “Collaboration” among many others. Its price ranges from USD 9.00/mo (for up to 25 projects) to 99.00/mo (unlimited projects and remote usability testing).

They offer an interesting 31-day free trial with full functionality, including reviews, real-time collaboration and remote usability tests for all who want to try the application.

From the website: “Fast and easy like Rapid Paper Prototyping, but completely web-based and with many more features!”

Watch Pidocco’s Tour:

9. iPhoneMockup

iphoneMockup is a great app created by LKM targeted to – as the name says – creating iPhone wireframes! It doesn’t require registrations and generates a link that you can share on the fly. The Pencil version of the mockup also makes it hand drawn looking and fun.

10. Cacoo

Cacoo is a great online drawing tool that can also be used to create wireframes and diagrams and has a big focus on collaboration.

From the website: “Cacoo is a user friendly online drawing tool that allows you to create a variety of diagrams such as site maps, wire frames, UML and network charts. Cacoo can be used free of charge.”

Watch a diagram Demo:

Some other links around:

A little more about jwaldeck

Jan (which is more like "yawn" than "Jenn") has German citizenship (American too), was born in Colombia and raised in São Paulo, Brazil - where he spent most of his life. Jan has been a nerd forever. He strives for pixel perfect designs, great user interfaces & clean code, loves tennis and is currently exploring new pursuits such as blogging, photography and skiing.

7 Responses to “10 great wireframe and mockup tools to plan your new project”

  1. Thanks for mentioning HotGloo. Just a small typo here: Paid plans are starting at $7 not at 14.

    Regards,
    Wolf

    1. jwaldeck says:

      Hi Wolf, sorry.. this has been updated already!

  2. Thanks for posting this list of resources for your readers!

    I’d also like to add ProtoShare to your list. It’s a web-based tool for building wireframes and prototypes. Our strength is bringing in others to comment and collaborate on the wireframes, as well as adding robust functionality to them to simulate a real website experience.

    We offer a free 30-day trial. Feel free to contact me with questions.

    Cheers,
    Andrea

    1. jwaldeck says:

      Tks Andrea! ProtoShare is quite impressive, tks for sharing! I might even update this list soon! :)

  3. Philipp says:

    Thanks for including Pidoco in your list – a great overview of tools! I’d like to add that we offer a 31-day free trial with full functionality, including reviews, real-time collaboration and remote usability tests for all who want to try the “many more features”. ;)

    Best regards,
    Philipp

    1. jwaldeck says:

      Hi there Phillip, we’ve added this additional info.

  4. David says:

    This is a great collection of available tools which I found really helpful. Many thanks!

Leave a Reply