Product Review: Justinmind Prototyper

By Afshan Kirmani

Published: January 4, 2010

“I’ve been exploring Justinmind Prototyper, a prototyping tool that serves the ideation process well and, more important, generates HTML code for the prototypes we create.”

Since our clients require an ideation phase before looking at a product’s visual design, I’ve been looking at a lot of wireframing and other prototyping tools lately. To find out more about prototyping tools, I’ve combed several mailing lists—such as SIGIA and IxDA—looking for discussions about the latest tools that are available to us. As a result of what I’ve found out, I’ve been exploring Justinmind Prototyper, a prototyping tool that serves the ideation process well and, more important, generates HTML code for the prototypes we create.

Competitive Edge: HTML Wireframe Generation and More

“With the latest version of Justinmind, you can simplify your work by generating HTML for your prototype with just a click, then send it to your clients and share it with your colleagues.”

Justinmind provides a number of benefits over the competition, as follows:

  • HTML wireframe generation—With the latest version of Justinmind, you can simplify your work by generating HTML for your prototype with just a click, then send it to your clients and share it with your colleagues. This feature provides Justinmind’s biggest competitive edge.
  • widget libraries—A feature that is unique to Justinmind is its widget libraries—otherwise known as reusable components within the industry. With these widget libraries, it is easy to include predesigned icons, templates, and HTML and Flash code in your prototypes. Figure 1 shows My Widgets.
  • simulations—You can create a complete simulation of your Web site or application, using just one application. Most prototyping tools like Balsamiq Mockups, FlairBuilder, Photoshop, and Illustrator only let you draw user interfaces, and creating wireframes in HTML/CSS takes too long. Justinmind lets you draw your wireframes, incorporating JPEG images from any design tool, and create a perfect simulation.
  • reusable components—What’s interesting about this prototyping tool is that you can either use existing components or create new, functional, reusable components, or widgets, that you can reuse in any of your projects, as shown in Figure 2. When creating prototypes, you’ll love how easy it is to drag and drop these components. And you can share your widgets and blog about them on your Web site.
  • conditional logic—With this feature, you can simulate state changes. For example, you can create a login screen that goes to the screen that appears only if a user’s password is correct and once the user has logged in.
  • data manipulation—The kind of data manipulation that is available in iRise seems advanced in Justinmind as well. You can manipulate data, filter, and search—all within your prototype. You can even use real data when creating forms.
  • collaboration—Overall, collaboration is improved in Justinmind. Requirements management lets you control who can comment on what and organize all the functions in a text document for your programmers. It’s a good tool for teamwork.

Figure 1My Widgets

My Widgets

Figure 2—Prototyping with reusable components

Prototyping with reusable components

Components of Justinmind Prototyper

“You can create wireframes and mockups for ideation, brainstorming, and conceptualization.”

The Visual Prototyper has three main sections.

  • User Interface—On this tab, you can create wireframes and mockups for ideation, brainstorming, and conceptualization. It lets you drag and drop the components for a design, which are also reusable later on. It also includes a simulation environment that allows you to see how your prototype would look on the Web.
  • Functional Scenarios—This tab lets you create flow diagrams, which facilitate your designing the information architecture for a Web site or the workflows for an application. It also lets you branch control flows down separate paths, using conditional logic.
  • Requirements—Uniquely, another great benefit this prototyping tool offers is that it helps you gather requirements end to end, on the Requirements tab shown in Figures 3 and 4. This helps you progress through requirements to page flows, which are then reflected in the user interface. Justinmind groups elements structurally, and you can maintain versions as you refine your designs. Competitors do not offer this feature.

Figure 3Requirements tab

Requirements tab

Figure 4—Capturing requirements you’ve gathered from your client

Capturing requirements

Justinmind Server

“With Justinmind Server, you can store and deploy your various projects on a server for review.”

With Justinmind Server, you can store and deploy your various projects on a server for review. Justinmind Server also functions as a project space in which you can store all of your project files. It lets you invite people in various roles to view your prototypes. Whether for your clients or your own team, you can provide login IDs to the people who need access to prototypes. Plus, once you’ve deployed a prototype in Justinmind Server, you can conduct participatory design sessions, giving users access to the prototype.

Your Workflow in Justinmind Prototyper

Justinmind Prototyper lets you

  1. Create a list of functional requirements.
  2. Transform those requirements into an application wireframe.
  3. Create simulations, whether you are an analyst, consultant, or UX designer.
  4. Upload your simulation files to the Justinmind Server, generating a Web prototype.
  5. Publish your Web wireframe to share it with your client or team.
  6. Give your client or team members login access to your prototype, so they can review it and provide their suggestions.
“Justinmind Prototyper is especially useful during the definition phases of a project. Designers can quickly churn out and deploy prototypes, simulating a Web environment.”

Justinmind Prototyper is especially useful during the definition phases of a project. Designers can quickly churn out and deploy prototypes, simulating a Web environment. With the kind of flowcharts Justinmind generates, business analysts could gain from using it as well. And information architects should keep this tool handy if they don’t already have a tool that helps them capture requirements and create mockups, flowcharts, and page designs. Justinmind lets you create a navigation map, outlining the structure for your entire project, showing all of its screens and the connections from one screen to another.

Look Before You Leap

Before you go out and buy yourself this tool, I want to mention some of its shortcomings—that is, things that could be improved. What seems lacking is the amount of training information that is available for the application. Plus, compared to its competitors, its user base is smaller, so most people don’t know how to use the application. Although it’s relatively easy to learn, the lack of customer support is bewildering to a first timer. The Web site does provide some tutorials, a blog, and a Support Portal for customers, but for users to fully benefit from the extent and power of this tool, these areas need improvement.

“What seems lacking is the amount of training information that is available for the application.”

Some features are hard to use. For example, the masters feature is completely incomprehensible on your first try. The latest version of the Prototyper offers drag-and-drop conditional logic. However, its users think building conditional logic is too complicated and feels like programming, so many don’t use what is one of the application’s most powerful tools.

The HTML code the Prototyper produces is not perfect, so Development still needs to create production-quality code. Someone who isn’t a CSS expert cannot understand the CSS code the application produces. Only a coder could decipher each line of code, which makes it difficult for a nondeveloper to create a Web site.

Fortunately, you don’t need to jump into purchasing this tool immediately. Download the free, trial version from the Justinmind Web site and experiment with it, then decide whether it’s right for you based on your needs. The application costs $550, including one year of support and a WebEx training session.

Comparing Justinmind to Other Prototyping Tools

“iRise, and Axure RP … come close to Justinmind Prototyper’s capabilities.”

After looking at tools like Balsamiq Mockups, FlairBuilder, OmniGraffle Professional, MockFlow, Visio, GIMP, iRise, and Axure RP, I think the latter two come close to Justinmind Prototyper’s capabilities. Only you can determine which prototyping application would best satisfy your needs. So, in addition to trying Justinmind Prototyper, I suggest you also check out these other prototyping applications:

  • Axure RP
  • Balsamiq Mockups
  • DesignerVista
  • Expression Blend
  • Fireworks
  • FlairBuilder
  • Flash Catalyst
  • GUI Design Studio
  • HotGloo
  • iPlotz
  • iRise
  • JustProto
  • MockFlow
  • OmniGraffle Professional

In my opinion, you should avoid these tools:

  • DENIM
  • ForeUI
  • fluidIA
  • Lucid Spec
  • Pencil
  • pidoco
  • ProtoShare

I’ve created a comparison chart of the five applications I think you should definitely try, shown in Figure 5.

Figure 5—Five prototyping tools compared

5 prototyping tools compared
  • Axure RP lets many people work on a file at the same time, keeps a history of a project, and is easy to use.
  • Balsamiq Mockups links screens together, creating simple prototypes.
  • Fireworks provides flexibility in creating shapes and layered wireframes, and it’s easy for designers to work on the same file, if necessary.
  • iRise is serious about innovation and experimentation.
  • Justinmind Prototyper allows flexible interaction and helps with gathering business and user requirements.

Please feel free to comment on this review, which offers my personal judgment on Justinmind Prototyper and other prototyping applications. If you have something on your mind or a different opinion, pitch in with your comments.

14 Comments

I definitely have to try out Justinmind’s application now.

I think you’ve made a mistake with ForeUI, though. Just this week, I used the trial to create an HTML prototype that used simple logic to fake interactions. Is there a reason it does’t meet your criteria for HTML prototype generation?

Hey,

Cristian here, developer of FlairBuilder. Thanks so much for mentioning my product. FlairBuilder has been on the market for only half a year now, and it’s now on full speed with improvements and new feature growth. To mention a few, it will soon support reusable components, site maps, more interactions, and so on.

Cheers, Cristian

I agree with Nate; ForeUI does very well on HTML interactive prototyping. Its scope is quite close to Axure RP.

Hi,

I’m Victor, Product Manager of Justinmind. First of all, I want to thank you very much for the article. It’s detailed and well explained. Congratulations.

However, I think I need to clarify some of the lacks you pointed out about Justinmind Prototyper. Of course, the application must be improved, and it’s going to be along this year, but anyway…

About the masters complexity, I fear I must agree with you. Actually, the thing that’s hard to understand at first glance is how you define the master’s boundaries. Something is explained in the Help documentation, but we are going to publish an article in our blog about how to use the masters.

It’s true we don’t have a big user base—but it’s getting bigger day by day—and that’s something we are working on. For instance, we are going to make a new Web site with a place to upload widgets, prototypes, and templates, so customers and users can share what they know about the tool. We are going to make new videos and tutorials, too.

Regarding the problems you point on the conditional logic, well, the thing is that is only available in 3.0 that now is a private BETA and the first impressions are really good. We are going to launch a public beta in the next weeks and see what people think about it.

Again, thank you very much for your review.

If any of you have questions, please contact us and we will be very pleased to help you.

Best regards

Any reason you forgot to add iPlotz to the list of prototyping tools out there? It’s been a year since it’s first release and HTML export, interactivity, and project management are included.

Hi Afshan,

Thanks for your interesting article.

Could you give some more details on why you think Pidoco is not a good tool? Some IA colleagues recently tested it and were quite satisfied. Also, Pidoco now offers functional specification annotations and remote usability testing facilities.

No, I am not from Pidoco. ;-)

Best, Mateo (Sapient)

Nate, I suggest that you try it before you buy it. Answering your question: the HTML ForeUI generated is too complicated. Are you able to use the code effectively? For example, simple interactions like click image or change background color don’t work too well. I feel that, if ForeUI doesn’t get this right, it’s not worth a mention.

Brantlake, do I see you shaking your head in disagreement here? :)

Mark, I have made a mention of iPlotz under the section “Comparing Justinmind to Other Prototyping Tools.” Though, I do know what you’re getting at. I didn’t add it to the comparison table, because the list could go on and on. I aimed to include just a few tools and that was it.

Mateo, Pidoco is another wireframing tool that lacks interaction. This tool is good for a start, when you create diagrams. But not if you require detailed coverage to finish a project. I don’t believe this tool is complete. Again, this is my opinion, and you may still think otherwise.

Hi Afshan,

I would like to thank you for mentioning Pidoco in your article, even if your reference to Pidoco explicitly advises your readers not to try it.

We think it’s really sad that Pidoco does not match your requirements.

With Pidoco, one can definitely create interactive wireframes, which can be exported as clickable HTML and as a specification document in Word. Certainly the interactions that can be modelled with Pidoco may not be the most powerful among wireframing tools; however, the interactions that are possible are very easy to create. Everyone who knows how to use PowerPoint can use Pidoco, which is not true for many tools that were recommended in your article.

There are simply so many different requirements that can be thought of for a wireframing tool—for example, with Pidoco you can hold teleconferences with screensharing, and this is helpful for usability tests. So one tool cannot fulfill everyone’s requirements.

And since I know my competitors’ products well—you can be sure of that—I know that very few tools truly deserve to stand in the “avoid” list.

I hope my response finds some consideration with you and thanks again!

Best regards, Tino Truppel

Hi Afshan,

I am reviewing Web wireframe / prototyping tools for my company. We currently are deciding between four tools—you like three of them. Could you explain why you would avoid ProtoShare? Thank you so much for your insight!

Best, Eric

Thanks for the feedback, Tino. I�m glad that you were honest enough to defend your statements. I�m sure that people who read this review would make a note of your feedback and consider giving it a shot. Again, this was a subjective review. There may be others, like yourself, who disagree.

Eric, the positive is that it is Web based. You could always try the trial version before you decide to purchase it. From my perspective, it maybe interactive, but it seems like it is still in its beta state. When I compare ProtoShare with iRise or Axure, I would much rather buy the latter two.

Take a look at my “Comparison of (almost) All Interaction Design Software.” A large spreadsheet compares all the UX / IxD tools I could find—everything from wireframing to prototyping, on the Mac, PC, and Web. I created this comparison chart as a way to determine what programs to use depending on various project needs and thought other interaction designers would find this useful.

Please let me know what you think. I would like to maintain ownership of this document, but I am open to constructive criticism and suggestions.

This project was inspired by two articles: “A Real Web Design Application,” by Jason Santa Maria, and�”Prototyping: Picking the Right Tool,”�by Todd Zaki Warfel.

Shlomo Goltz

My organization has been using this product for several months on a daily basis and, while it offers a ton of features, it’s very buggy. We’ve tried addressing this with the company and were given a deaf ear. Below is a list of issues when using this application for wireframing.

  1. Layers are hard to work with.
  2. HTML output produces very buggy code. It generates a ton of style sheets that have to be loaded into the browser, which, in the case of IE(8 and 9), will not load all the styles. So our layouts appear as text, when presenting.
  3. When elements within a group are moved, the entire group shifts and offsets from its original position, throwing off our layout.
  4. Datagrids sometimes do not load, especially when showing a ton of information.
  5. Datagrids linked to a data master do not update the data list even though they offer it as an option. It even says on their site that it will not work. So if you have a grid that needs column changes, you can’t do it without reproducing the entire grid.
  6. Datagrids can’t be copied between files, only within the file in which it was created. You have to import an entire prototype to get a grid from another file, which is a pain. Especially if you have a lot of screens.
  7. Masters cannot be copied between files; they come in as a regular grouped object. You have to recreate them in the new file.

Given all the pluses this application offers, there are a ton of bugs that make it difficult to work with, especially within a team environment and with large-scale UI projects.

Shlomo - Great resources. This is very helpful for us to make an informed decision.

Jeff - Thanks for your input, too.

Justinmind is the best in my opinion. It has much better tools for rapid prototyping. I’ve been using it for 3 years now. Just being able to simply hide and show anything and everything makes it a much better tool than the rest.

Hide and show anything is still not possible in Axure today.

Join the Discussion

Asterisks (*) indicate required information.