Home > Prototyping and wireframing > Using HTML to prototype wireframes

Nowadays, there is a tendency to create HTML prototypes for client presentation or project testing. This is a more realistic approach to paper, but it’s much more time consuming. Justinmind is a tool created to join together the functionality of a HTML wireframe with the ease to use of diagram tools such as Visio and Omnigraffle.

There is no conflict between HTML wireframes and paper ones. Both have their advantages, but both have problems too. Not everyone has HTML knowledge, it’s time consuming and people tend to spend more time checking for HTML mistakes than thinking about the final product. Paper is not the real thing, it can’t simulate advanced interactions, and won’t be of use for several types of tests.

With Justinmind, it’s possible to generate HTML just as if it was a diagramming tool, without touching a single line of code.

The final code should be created after prototype approval. This way, changes are minimized and production costs reduced. With Justinmind, you’ll get:

  • An added value for the client, who’ll see something very much alike the final project, with rich interactions and a mockup of the final layout.
  • Improved client communication. The client will be able to see his web or software working. He’ll understand the links, the effects, and will make his changes before the coding phase.
  • Communication through demonstration means that every specification will be clearer, leading to a smoother coding phase.
  • Dump the poor ideas before. It’s better to lose an hour prototyping a functionality than lose a week coding something that won’t get to the final project phase.
  • Simplified implementation. When everyone knows what to do, and everything’s well documented, the final phases go easy and smooth.

It gets easier to convince people of the value of a project
Not a long time ago, when people asked for a layout of anything printed, they received something drawn, painted with ink, glued, copied and pasted with scissors and several other objects. Then came digital desktop, which changed graphic design for good. Now, before buying a great project, you are able to see a mockup of the printed version, with almost the final quality of colors, shape, etc.

Why selling a website with a static page?

We know that coding can be hard, and much more for applications, but nowadays it’s possible to simulate near-real experiences.

You have to build one car to test it, then mass produce it
When a car factory builds a new car and have it tested, this prototype can be approved, modified or abandoned. They can also be virtually built and simulated with software nowadays, can’t they?

This can now happen with websites and software.

An HTML prototype is like a real built car. It’s hard to create, but it shows all functionality to perfection. If it works, they’ll build more. A prototype created with Justinmind is like a virtual car: you can test almost everything, and simulate to the bones, having all the advantages, but with much less effort.

Victor is the Product Manager at Justinmind. His specialties include business analysis, usability, requirements management and prototyping. When not busy doing that he is known to eat or sleep.

Download Free