High-fidelity screen mockups

How to describe a website to a developer? How it’s going to work, all the steps, phases and requirements? With text? A simple wireframe that shows where things will be?

Sometimes, you need to show relations. What kind of information a box shows when a button gets clicked, and how that colour changes when the mouse goes over. All this must be in the final product, so it has to be planned, specified and coded. So, you have to put this kind of information on the final project.

In this case, a lo-fi wireframe is not enough. These wireframes work just as a map of the web, but for a bigger site, you’ll need to show the relations. So, the ideal solution is a high-fidelity screen mockup. A file that works just as if it was the real website, reacting and interacting with the user. That cannot be done with a simple drawing tool, neither with paper.

This  video shows a paper prototyping method. It is very common to test and simulate with someone pretending to be the computer, and changing the “screens” mannualy. But it can be very tiresome to do a test, or even to simulate several screens, and even though, some projects won’t be simulated.

JustInMind Prototyper is a solution for this. You can simulate with a hi-fi mockup almost any properties your final software/website could have. Clicking, data collecting, movement links, etc. This way, nobody will be confused, requirements could be easily specified, things could  be tested and the projects could be approved by the clients even before coding.

When everyone knows what they’re doing, and how things connect and interact, it’s easier to get the project done, and reach your goals. Using a hi-fi mockup, you’ll be able to reduce costs and time expenses, improving work quality.

Symptoms:

  • Communication problems between team members.
  • Lack of comprehension of project requirements.
  • Several changes, discrepancies between versions, modifications throughout the development phases.

Use it when:

  • Exploration of an end-to-end conceptual design is possible within a week
  • You need to reduce the risk of further clients’ modifications requirements.
  • You need to increase the understanding between different team members.
  • Testing should be done, but you don’t have enough time to code and develop the entire application.
  • You want to test different design/layouts/interface solutions.

Requirements:

  • Skills to use – analysis, conceptual design, information architecture, user-experience, data architecture
  • Things to produce – prototype, logical data model, storyboard, process map

This entry was posted in Wireframe and tagged , , , , , . Bookmark the permalink.

Leave a Reply

Your email address will not be published. Required fields are marked *

*

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Newsletter

Almost finished... We need to confirm your email address. To complete the subscription process, please click the link in the email we just sent you.

Ok

Thank you for contacting us!

We'll reply as soon as possible.

Ok