MockFlow is web-based software for creating mockups and wireframes. The application allows users to create mockups and wireframes for websites and software development and collaborate with others within a password-protected online account.
Your First Mockup
You can try mockup for free, which includes a four-page mockup with two collaborators. A paid subscription costs $59 per year and includes unlimited mockups and collaborators. After a quick sign-up to MockFlow, you can build your first template from scratch or by using an existing template. Choosing to use a template brings you to the Mockup Store, which includes many free user-created templates such as mobile devices, browser sizes, image grids and signup forms. In my test I browsed to the Mobile category and chose the iPad template, which could be used for app development. You can then name your mockup, and MockFlow imports the template. The process is very straightforward, taking you from signup to template creation in clear, simple steps.
The MockFlow Interface
The interface for MockFlow is also clean and simple, with a standard menu across the top and a toolbar on the right that can be hidden for more working space. While there are a few small, obscure icons, their use is quickly learned through tool tip rollovers. In the top menu there are options for sharing, saving and exporting a mockup, standard edit options such as copy and paste, access to the images within a project, and a chat button for discussing a mockup with collaborators. The right column toolbar contains quick access to components and all of the pages in a project. Components are pre-designed elements for use in a mockup, such as basic shapes, arrows, alert boxes, form elements and other objects often used in application or website development.
The MockFlow Workflow
I was impressed with the functionality and workflow of the application. Components can be added to a wireframe or mockup with drag-and-drop or a double-click. From there, each type of component has different, adjustable variables. Certain, simple elements, such as a shape or sample pie chart, can be resized. For other components, such as a list of radio button options, you can adjust the type options, line spacing, colors and size, all from a right column inspector. Additional pages can be added and managed through a sitemap. Mockups need to be saved during work (I was unsure if there was an auto-save feature). I was also impressed with the export process, during which you simply select a file type, choose the pages to export, and the file is saved to your computer.
The app gets even more powerful when you add in collaboration. You can add team members and immediately send them invites to both join mockflow and and view your mockup. Once more than one member is working on a mockup, they can discuss the project via the chat feature. If anyone working on the mockup makes a change and saves the document, a popup window alerts other users, and they have the option to preview or update their view of the page. This process seemed natural, even though ideally there would be live updating. This could get confusing if two or more people were editing and saving a mockup at the same time, without discussion. While the app does warn you that you are updating an unsaved document, saving your document as a result of this alert loses the option to refresh the document with another user's changes, so it could be unclear what the latest version is and if changes are lost. Therefore, it would seem using the collaboration feature would require clear communication between users as to who was editing at any given time. Despite this, MockFlow is a handy application for creating wireframes and other mockups.