Mockflow – Wireframing App Review & Giveaway

Mockflow Review

Hello my name is Grace and I’m a Wireframing evangelist.

Why? For the simple reason that I truly appreciate how they ease the transition from pure specs to UI hierarchy, architecture and content representation. As a designer I believe wireframing is perhaps one of the most important stages in the design process.

In my efforts to find ‘wireframing nirvana’ I’ve tried many of the applications available and have been frustrated time and again at the lack of a ‘complete’ solution. So much so, that for years I’ve stuck to my tried and tested Grey Box Method adapted from Jason Santa Maria, using Photoshop as my weapon of choice.

However a few weeks ago something changed. I discovered Mockflow. Billed as Super-easy Wireframing, my expectations were high, and though there were a few bumps along the way, I haven’t been disappointed.

Public Service Announcement: This is NOT a paid review.

Overview

Mockflow is a web app based on the Adobe Flash Platform. It has a clean, minimalistic, organised interface and the editing feature-set set is extensive.

First let’s look at the main features that Mockflow offers:

  • Accessibility – It’s an online app so it can an be used from anywhere.
  • Sharing – Ability to easily share with clients or team members in private or public mode.
  • Collaboration – You can invite co-editors and reviewers to collaborate.
  • Annotations – You can receive feedback directly on the Mockup and comments below each page.
  • Export Options – Easily export to image or PDF including comments.
  • Design – Over 70 components and 200 Icons available.
  • Links – Define links within each page to create a fully clickable prototype.

One of the most important considerations when using applications and services is price, because as Freelancers we often need to bootstrap our business. Thankfully Mockflow has both a free and well priced premium version available.

Price

There are two types of accounts offered:

Mockflow Pricing

Methodology

You drag and drop components into a mockup to create the wireframe. You have the ability to add pages and map out an entire site and it’s structure.

The built-in components are extensive, from charts and ads to menus and dropdowns. The ability to upload your own images to use as well as choosing from a set of stickers of common site elements, such as social networking and e-commerce images make the process of ‘building’ the mockup pretty efficient.

Hands-On

I’ve been using Mockflow for about 1 month now and within about 20 minutes I had created my first two wireframes. In order to get to know my way around the interface I decided to mock-up one of the best known design blogs – Smashing Magazine (before the redesign). I created two wireframes – the Home and Graphics pages.

Home Wireframe

Mockflow Wireframe Home

Graphics Wireframe

Mockflow Wireframe Graphics

Presentation Mode

By clicking on Presentation you can see both wireframes in action here. Both pages are also linked to each other via the menu.

Collaboration

The ability to share the wireframes with colleagues and collaborators is a huge plus.

You can invite others as editors, who can make changes to the wireframes or simply as viewers who are limited to reviewing and commenting. Mockflow also recently implemented real-time chat, making it super easy to discuss and change a wireframe without the usual email backlog of changes.

MockStore

Mockflow have recently added MockStore which is a wonderful addon service that provides 3rd party components and templates shared by the user community.

With browser, site, contact and slideshow templates (to name a few) already available, I think this is going to be a very valuable on-going resource for mockflow users.

Negatives

While there aren’t any real drawbacks to the app, there are several annoyances:

  • It’s not entirely clear how to use the template system at first and it took a few support requests for me to completely understand it.
  • The keyboard shortcuts use CTRL not CMD, which is annoying for any Mac users.
  • The way in which pages are linked is clunky and needs to be addressed.

Verdict – 8.5/10

An excellent online app, with a rich feature-set, that will suit most needs.

It’s also clear Mockflow is being constantly developed and improved and the team behind it are both passionate and knowledgable.

Premium Account Giveaway

The lovely people at Mockflow have kindly agreed to give a free upgrade to the Premium account for 1 year – normally worth $49 p/year to the winner of this giveaway.

How To Win & Deadline

» Leave a comment below with your favorite Wireframe or UX tip.
» The deadline for entries is Monday November 16th and winners will be announced on Wednesday 18th, so make sure to check back here to see if you’re a winner!

The winner will be randomly selected using random.org.

33 Comments

  1. Dan says:

    I was thinking about getting a Premium account, but I haven’t had a chance to try everything out yet. A free one would make that an easier decision.

  2. Chad Warren says:

    WOW this an amazing service! I have been using dot paper form Behance Outfitters – http://www.creativesoutfitter.com/Products/Dot-Grid-Book/9 for a while but this looks like a pretty sweet thing. I have always done it with pen and paper and then transitioned to the computer after I hammered it out manually. I would love to have an opportunity to win a free membership in this :-) Great post BTW.

  3. I’ve always been a pen and paper man, but have recently been thinking a wireframe app is the way forward. So thanks for the great post and let’s hope this is my chance to give it a try!

  4. Great stuff Grace! My tip is: start wireframing/ideation with clients using pencil and paper before using digital tools. It helps clients with their wireframing anxiety as it is sketchy and lowfi. Next, create the final sketch in a tool like mockflow and let yiur client ok this.

  5. Hey Grace

    Have you used mockingbird for wireframing at all? http://gomockingbird.com

    I just started using it recently, after only using pen and paper and i love it. I’d be interested in a side by side of these two.

  6. Use pen, make mistakes, and start over. Rinse and repeat.

    It might seem slower than pencil, but redrawing often is when I get my best ideas.

  7. Nice review Grace.

    I only a question about it: is it possible to create HTML prototypes, like Axure?

    I’m asking you this because every single client asks for HTML prototypes to feel the site’s behavior. Axure creates a very nice Word doc, with all screens, notes, priorities, etc. That’s a very valueable deliverable to sell.

    Looking forward to get my premium account, hehehe! Just kidding :P

  8. Trish says:

    That app looks pretty amazing! My tip: don’t reinvent the wheel. =)

  9. Dave Wilhelm says:

    Wireframes have always been beneficial for me in organizing and develop the basic structure of my sites. This is also where I can show and get feed back from my developers. The hard thing with wireframes is that most of my clients can’t visualize how the site will ultimately look and work. They aren’t interested in how the site will work—just how will look. But I think with an interactive wireframe, they may be more willing to review the functionality then move on to the form. I’m going to give Mockflow a try.

  10. Iain Broome says:

    Mockflow looks great and would have to be to drag me away from Hot Gloo, which I’ve been using for the last few months. Will give this a go, methinks.

  11. I am kind of new to wireframing but I would have to say that my best tip is that the time spent doing it is much better than spending time do revisions after you have already started design and coding.

  12. Guisella says:

    W00t!! Wireframing tools are my favourites, I never get tired of trying each of them, I would like this one too!!

  13. Uncleserb says:

    I haven’t yet tested this app but I’ve been using another very nice AIR app (either thru a browser either thru their desktop app):
    http://www.iplotz.com/

    I’d say it’s main advantage is to have a large control gallery that allows users to also use the app for application wireframing.

  14. Dominic Massad says:

    Wireframes are such an important part of designing and development. Mockflow seems like a good app, but I’ll have to compare it to OmniGraffle Pro which is what I currently use.

  15. Dave says:

    Grace

    Glad you are finding it such a great app and glad I decided to tweet you about it though I’m sure you would have come across it anyway you being a wireframe enthusiast and all

    D

  16. A. Garrett says:

    I came across this while looking at wireframing reviews, because of them being mentioned in job adverts. I always do mine on paper, and I find it quite a contemplative moment, being faced with an blank A3 piece of paper, (a pencil, ruler and an eraser). Kind of back to the basics really, and a nice chance to hold a pencil…. which is good practice (isn’t anyone else’s handwriting suffering?) Also a scissors is hugely useful to completely rearrange your ideas!

  17. My tip about UX: don’t listen to the user, that was say by Jakob Nielsen and it makes perfect sense for me, user want something but they don’t know what until you put it on their front. Listen and learn but don’t do anything your users ask you to do.

  18. webbografico says:

    I think this is a great site for everything related to wireframing:

    http://wireframes.linowski.ca/ (wireframes magazine)

  19. Matt Moring says:

    Most important tip: ALWAYS USE LOREM IPSUM. I still have nightmares presenting site mockups with real text. I didn’t get constructive comments on the design but I sure received a few “but… that’s not the right text!” comments.

  20. Peter says:

    This wireframing tool seems really really nice! Thanks for this great and very insightful review of Mockflow!

  21. Cheryl says:

    @mattMoring — Conversely, I’ve had clients quite distressed I put strange “languages” onto their website for design benchmark review.

  22. Once the wireframe is done, the coding part is SO much easier.

    People ask “why wireframe?” I reply “Would you build a house without blueprints first?”

  23. Adam says:

    My best tip for wireframing is simplicity. Keep everything as minimal as possible as the design stage comes later!

  24. Aleksandar says:

    I’ve been playing with hotgloo.com for a while but will definetelly give a try with Mockflow. :)

  25. Kim Røen says:

    Thanks for the nice review. I surely will be trying this out, whether I get it for free or not.

  26. This looks incredible!

    Wireframing takes some serious adjusting for a designer who is used to spitting out a “design” look for approval, rather than the initial frame…but BELIEVE ME (and a ton of others ;), once you get a handle on wireframing, it makes the rest of the process soooooo smooth.

    A little like starting on table design, then shifting to CSS more of a headache that going table-less from the start…it will much less painful and a heck of a lot more productive to start off using wireframes.

    Keep it vauge with WF…as someone mentioned, Lorum text, grayscale, and straight lines help when using. Keep the detail to a bare minimum.

  27. Lisa says:

    I recently tried Mockingbird but it doesn’t have exporting capabilities. This looks awesome! I’d love a free account!

    My best tip: Keep design out of it! color, images, and design-y typography belong on a design not on a wireframe. That took me a while to figure out :)

  28. Sulcalibur says:

    My comment: Err – halloumi cheese is really nice on a barbeque.

    My favourite Wireframe or UX tip: Use a fat felt tip & a big plain pad you Muppet! At first at least :P

    ~ FIN

  29. John Downey says:

    This looks like a great app. My #1 tip for wireframing would be to do it in black & white, no images, and lorem ipsum text. When showing it to clients or colleagues for feedback you don’t want them concentrating on any of those things at this stage. The layout should be the only thing up for review.

  30. Tony Geer says:

    Hi Grace, thanks for the summary, I think this is probably the first wireframing tool that I’ll check out and try to use. Nothing before this looked appealing enough to replace my pencil and paper.

    By the way, it’s difficult to tell between strong text and links sometimes as they’re both bold.

  31. Martin says:

    Dear Grace,

    have you ever tried the wireframe tool pidoco on http://www.pidoco.com? This one looks very interesting and helpful to me. But have not worked with it, still using the cool tool “penandpaper” …

    Martin

  32. mockingnovice says:

    Mockflow (as well as similar tools like mockingbird) is on Google Drive – for even easier sharing and version control.

Leave a Comment