MockFlow: Wireframes in Minutes

6 Comments

MockFlow - Wireframes for software and web projectsWireframes are a crucial part of the web design process, especially if you’re working with a team. A wireframe makes it possible to discuss the design before having to invest time and money into the creative aspects — time and money that might be wasted if a significant change is made to the design. Taking wireframes online is a logical next step: if you’re working with a team distributed around the world, having an online application just makes sense.

MockFlow - Online Wireframe Tool for Software and WebsitesMockFlow is that application. With it, you can quickly drag and drop components into a mockup of what a web site might look like. You can also map out your site as a whole, easily adding pages. The built-in component set includes more than seventy pieces commonly used in web design, such as fields for data input, banners and dropdown menus. You can even drop in charts and graphs, which can mocking up something other than a website an option with MockFlow. Want to go a step beyond a bare bones wireframe? You can upload images of your own, as well as stickers for standard widgets and plugins. Adding a Facebook Connect button or a PayPal Donate button can be done just by dragging and dropping it wherever you want it.

On top of the ability to quickly pull pieces together into a mockup of what your web site will look like, you can bring collaborators on board for even the very beginnings of the design process, as long as you know their email address. You have the option of inviting your team members as editors, who can make changes to your mockup, or viewers, who are limited to reviewing and commenting. There’s no need to try to manage comments on a dozen different copies of one file that you’ve sent around to your team — a massive improvement over the usual process. MockFlow incorporates real-time chat, as well as annotated feedback, making it easier to work on a design from wherever you happen to be.

When you’re ready to move past a wireframe, MockFlow allows you to export your designs. You can export them as an image or as a PDF. You may also want to export your designs at various points through the process, but MockFlow does securely host and backup data using Amazon’s (s amzn) EC2 and S3 services, however, so exporting your designs in order to back them up isn’t really an issue.

MockFlow - Wireframes for software and web projects-1You can try out a MockFlow account for free. The free account allows you to build one mockup with up to four pages and share it with two collaborators. This basic version does not allow you to use the chat feature or export designs easily (your images will have a MockFlow watermark). The premium version is priced at $49 per year. It allows for unlimited mockups, as well as unlimited collaborators, and allows you access to all of MockFlow’s features.

MockFlow was developed by Produle Systems, which started by creating a Flash widget builder (s adbe). The company is also responsible for JukeBuilder and iPixer, which allow you to build branded MP3 players for the web and annotate multimedia, respectively.

Have you tried MockFlow for web site wireframing?

6 Comments

Eva

I like Mockflow because of its Sharing features. It is great for working with the team. I am not sure the sketchy look of Balsamiq Mockup is necessary an advantage. Honestly, how hard is it to educate people that your B&W mockup is a wireframe? With that said, Balsamiq is a little bit easier to use.

For now Balsamiq has more components. I hope Mockflow will have components for iPhone soon.

Lance White

Thanks Thursday for the detailed review.

Balsamiq is good for drawing sketch, low-fidelity wireframe is good for some cases, specially when communicate with non-technical people, less details can avoid some troubles. However sometimes we may need wireframe with higher fidelity for documentation or internal review, so I think the tools like MockFlow will also be useful.

I also like the way ForeUI did, it makes wireframe skinnable, so that we can switch the wireframe’s fidelity, that’s fancy.

Paul Carney

This application does look interesting, but I agree with Horst – Balsamiq Mockups makes the design look “sketchy” so there is no confusion about the fact that you are looking at a concept and not a completed product.

Horst Hammer

Hi, did you try Balsamiq Mockups. There is no better wireframing application. Give it a try.

Comments are closed.