MockFlow: Online Wireframing

Wireframing is an important part of the design process. It doesn’t necessarily require software. Many designers find it quicker and easier to use a pen and paper to get the structure of their designs out of their heads and into a solid form.

However, there are a growing number of online and desktop applications available which offer you tools for wireframing your designs. Some of the better known tools are Visio, Omnigraffle and Balsamiq.  Check out Gary Barber’s SitePoint article on 16 Tools For Wireframing & Prototyping, or Matt’s recent review of Mockingbird.

MockFlowLogoToday, I’m looking at an application that’s been around for a short while but looks very promising. MockFlow is an online flash-based wireframing application and it’s also available to download as a desktop editor. (Note: This is not a paid review, nor have I been asked to write a review – it’s something I’m interested in myself as a designer and think you might be, too.)

There are two services available: Basic, which is free and Premium which costs $4.91 per month ($59 per year).

Inside the App

The interface is very clean and as it’s online you can use it anywhere. Below you can see the layout as viewed in the Chrome browser. The menu system appears along the top of the window with the components and pages appearing in a sidebar. All of the components are drag and drop and mockups can be created surprisingly quickly. You can import images to add to your mockup and you can define links within each page to create a fully clickable prototype.

Browser

If you’re part of a team, or if you want to show a client a mockup, you can share it in private or public mode. Annotations allow you to received feedback on each mockup and comments can be added to the pages. You can also invite others to collaborate and chat in real time with them.

YouTubeMockUp

When you’re creating wireframes with MockFlow, you can start from scratch or use one of the large number of wireframe templates from the design library (called MockStore). The templates cover everything from sample web pages to upload windows for software to design documents for Adobe Acrobat.

PhoneMockup

When you’ve completed your wireframe masterpiece you can save it online or export it as a PDF, PowerPoint or as an image.

Prices:

Here’s what you get with a Basic account:

  • Free, no cost
  • 1 Mockup with 4 pages
  • 2 Collaborators / mockup
  • 10 MB Storage
  • Export with Watermark
  • 5 Revisions / mockup
  • Limited MockStore access
  • Real-Time Editing

And here’s what you get with a premium account $59/year ($ 4.91/month):

  • Unlimited Mockups
  • Unlimited Collaborators
  • 500 MB Storage
  • To PDF/PPT/Expose/Image
  • 30 Revisions / mockup
  • Full MockStore access
  • Real-Time Editing
  • Team Chat
  • Sitemap Visualization

Overall, I found MockFlow to be an excellent tool. It’s easy to use, it produces clear wireframes and there are a wide range of templates to get you started. Realistically, the basic account is only there for you to try out the tool and get a feel for it as there is a limit of one mockup. For less than $5 per month, the premium account offers a lot of worthwhile features and unlimited mockups.

Have you tried MockFlow? What did you think of it? Have you used any other wireframe apps that you would recommend?

Free book: Jump Start HTML5 Basics

Grab a free copy of one our latest ebooks! Packed with hints and tips on HTML5's most powerful new features.

  • http://www.weboffspring.com nliokal

    I have already used the app and it is very useful indeed. I used the free edition which is limited to 4 pages as stated in the article but is enough to get a grasp of the app and maybe it is adequate for small websites. It is really easy to use and really intuitive. The collaboration features works quite well, too. I used it with a colleague and I could see his changes in real time.

  • ariel

    the best online mockup tool ever!
    I’ve been looking for many tools like that… but since 1 year, we are using this for all our mockups… very useful!
    It’s free… but its payed version is just only $4/mo