Blogs

MockFlow: Online Wireframing

    Jennifer Farley
    Share

    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?