Home > Prototyping and wireframing > Effective prototyping and the fidelity spectrum

Choosing the right fidelity for your prototype can save you time and rework in the long run. Don’t believe us? Read on to find out more!

When it comes to prototyping, efficiency is key. We create mockups, wireframes and prototypes to learn more about our assumptions and how a piece of software might work before development. Prototypes can vary in fidelity from basic sketches to high-resolution, interactive prototypes. There’s lots of variety and sometimes this can get a little confusing. So, let’s see how we can get the most out of this awesome design stage and choose the right fidelity for our project!

What is effective prototyping?

Prototyping is a process of bringing people together, discussing a problem and moving towards solutions by materializing our design assumptions. It’s most fruitful when it brings together stakeholders, users, researchers, designers and programmers into an open conversation where they can tackle challenges. Effective prototyping intends to communicate enough about the end product so that clients and stakeholders can visualize their requirements and give feedback about how these have been interpreted in order to eventually move forward with the final designs. When done right, prototypes can avoid management mistakes early in the development process and decrease the risk of error at later stages. Moreover, efficient wireframing and prototyping allow developers and designers to collaborate more effectively to present and convey their ideas.

Be smart about your prototyping

For beautiful visual design, details matter: this much is obvious. But when it comes to the prototyping phase, things should be a little more basic. We don’t mean to say that can get sloppy or only create rough designs before development, but at the same time, it’s not worth trying to hit every possible design option with perfect clarity so early on. OK, no, static prototypes do not do the real design justice, but pixel-perfect deliverables are not always necessary at the early stages of the design process, either. Don’t worry about creating beautiful deliverable or being ‘digitally immortal‘, worry about communicating using the most direct, effective, and quick ways possible.

Stop yourself spending too much time on the details. Walking through every little detail may help you to see different ways to group features together. However, as Sophie Paxton explains, “prototypes are, by their very nature, disposable” – just good enough. Restricting the scope of each prototype will “enhance your ability to contribute to effective product development” and focus on what is most required at the point of time. Of course, what constitutes as “good enough” totally depends on what you are building and what your stakeholders want to see. Let’s take a look at the types of fidelity that you can reach with prototyping your design.

Download Justinmind today and build up your prototyping fidelity!


The prototyping workflow

  1. Sketch on paper and get your initial ideas out.
  2. Create assets in medium-high visual fidelity using Illustrator or Photoshop
  3. Import assets into Justinmind.
  4. Prototype in the functionality by adding animation and transition effects using the events dialog.
  5. Simulate prototypes to see animation in action
  6. Publish/Review/Validate/Iterate/…Lather, rinse, repeat: Always always analyze your results and add fidelity and functionality only to enhance your design. This step should be repeated as needed.

A good prototype should be economical – time is money, man – and expressive of the relevant project requirements. A great prototype should be communicative and enable stakeholders to share and give feedback as effortlessly as possible. Essentially, the quicker you can get your ideas out and in front of stakeholders the better.

The prototyping fidelity spectrum

As Sam Brinson explains, as users, “simplicity is now something we expect from design. Everything should be clear, obvious, intuitive — in other words, we should not have to think very hard”. When it comes to early stage prototyping, speed trumps all. Prototypes should be treated as disposable and to apply excessive fidelity too early in the process can be a massive time, money and resource waster. If you start to get bogged down in graphic design or precise animation timing then you run the risk of getting too attached to your prototype. Let’s take a look at the different levels of fidelity to get involved in.

  • Low Fidelity

Sketches and static wireframes are the lowest fidelity in the world of UI/UX and they allow you to ideate and present all features and content in a quick and disposable manner. They’re about getting all of the bad ideas out of the way first, so that the good ideas can follow. With low-fidelity, you’re only looking at the basic design and information architectureno interaction. So go ahead, draw those fast, crude wireframes and user flows. A word of warning though, don’t fall in love. As soon as you’ve invested efforts into making your sketches perfect, you’re unlikely to be mentally willing to look for alternatives or throw them away. Low-fidelity prototypes allow you to fail and iterate much faster than with high-tech tools,and should be used for these purposes.

  • Medium Fidelity

With medium fidelity mockups, you can build up from concept to working design phase more quickly with more flexibility and interaction, and the possibility to iterate easily. This type of fidelity can reduce the risk of designing components that will need lots of rework, or will be binned when developing the actual front-end because it allows for clearer visualization of initial ideas. These detailed wireframes in which users can use limited interactions are more defined than our low-fidelity sketches, but not as refined as high-fidelity prototypes.

  • High Fidelity

With hi-fi prototypes, there’s more time to iterate and refine the User Interface design. At this stage, it’s about ensuring that your prototype looks almost like the finished product. These prototypes are easier to submit to non-designer folk because, to the naked eye, these types of prototypes really look like the real deal. For optimal feedback, try to prototype something that looks real enough to be presented to your stakeholders and users as a replica of the real thing.

The right fidelity for the job

“Design methods are not mutually exclusive. Rather, each method exists on a continuum of fidelity.” – Tyler Tate

Sometimes we move on too quickly to the high-resolution, pixel perfect design. But then, reality sets in. Changes crop up and to keep pace with the time and requirements, we may want to break the flow down, which results in a bunch of prototyping efforts bring lost and rendered useless, and sends the design back to square one. For this reason, it’s always a good idea to try to determine your prototype fidelity needs at the earliest possible stage of the design process. We keep hearing that low fidelity tools are the best. Well that’s not necessarily the case. The optimal level of fidelity is the minimum amount of fidelity needed to get the job done. So, our advice is to engage the right fidelity at the right time over the course of a design project.

Justinmind offers you a tool that takes you through the whole prototyping lifecycle—from basic low-fidelity wireframes and mockups to multi-functional, high-fidelity prototypes. Create simple screens, and then build your wireframes up with interaction, animation and mobile gestures in order to simulate a life-like model, on the real device! Join today and see for yourself!download-justinmind-prototyping-tool-banner-1

Emily is Marketing Content Editor at Justinmind

Add comment

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

Download Free