Simulated prototypes of websites: questions and answers

Here are some questions and answers about creating wireframes with Justinmind Prototyper.

When do we stop building the wireframe and start the real development of the project?

The answer is simple: when you won’t make any more structural changes. It’s just like building a house. When you have all the structure defined, you’re allowed to make the groundings and start rising your work. But after the groundings, you cannot move the structure. Imagine saying to an engineer: “can you please move this column 3 feet to the left?” No. That also is dangerous when you’re building software. Changing database structures, layout or even snippets of code is hard, and can lead to an enormous amount of bugs.

We always recommend our clients to change whatever they want, as many times as they need, while still on the wireframe, because changing it later can be very painful.

How detailed must my prototype be?

Just enough to let everyone understand what’s going to be built. Some don’t need final graphics, or real text, others need to have data. For example, to test an online store, you may need prices and a database of products. If you must test data, you can wireframe and simulate it with Justinmind Prototyper, or insert the real images from jpgs and pngs.

Whether you need to use real data, real images of fake images and dummy texts (the famous lorem ipsun), it’s up to you and your project. Ask your co-workers and clients to understand their needs, and decide when to stop detailing the prototype.

xWhy not just simply show static mockups of the pages?

Nowadays, web technology has evolved so much, static pages don’t represent everything we see. For example, the webs that change content according to what users do. There are Javascript codes almost everywhere, not just links, but mouse overs, text that changes, colours and properties according to the navigation. How to represent it with static pages?

Functional prototypes can show the real interactions in an easier way, and make it clearer for both clients and developers. So, the final project won’t be different to what was planned.

Simple wireframe, mockup, hi-fi wireframe, prototype. You can do any of them, depending on your objectives. But be always sure of one thing: it’s function is to improve development speed and help everyone to understand the project better.