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.
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.
There are two types of accounts offered:
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.
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.
By clicking on Presentation you can see both wireframes in action here. Both pages are also linked to each other via the menu.
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.
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.
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.