Prototypes are interactive wireframes. We build prototypes to put it in front of the users, get feedback and improve your prototype. This is an iterative process which allows us to build great products.
Prototyping is about building, experimenting and learning during and iterative process. Good design process involves the user and it’s shortening the feedback loop. Usually the prototyping is started with a wireframing so we are mostly aware of the position of the different elements.
Based on the detail you want to achieve we can talk about low, medium and high fidelity prototyping. Usually the higher the fidelity is, the more work is required.
Benefits of prototyping
It’s an efficient use of resources
Rapid prototyping enables you to learn quickly what does and doesn’t work in weeks, instead of months. Instead of wasting time, money and team power making highly functional polished products to eventually test on your users.
You build something that users actually want
Testing prototypes with the user early on means that you are much more likely to build something they will use, rather than something you ‘think’ that they want. By getting regular feedback from your users, you always know whether you’re on track with your idea or product, or not.
It’s a low risk and high value
This approach allows you to experiment without putting your business at risk. You can take chances and learn from your users in a safe environment. Moulding the prototype on their feedback early on to make something that is highly effective in achieving your business goals.
You avoid over-thinking and planning
Less time is spent making long drawn out plans and discussing what it best for your users. Instead more time is spent validating the assumptions that are made in making the prototype. Building on fact rather than fiction.
Prototyping helps with ideation
We can often come up with new ideas and solutions as we prototype. Building something or “thinking with our hands” opens up the doors to more creativity as you get to physically interact with your ideas.
Low Fidelity Prototyping
Similarly to wire frames low fidelity prototypes are also built with paper. The difference between wire frame and prototype is the interactivity that you can provide for the user. You can add popups, dropdown menus and also new pages if the user wants to navigate to another page.
High Fidelity Prototyping
Usually the visual elements details and the level of interactivity makes a prototype more rich. You can create a mix of paper-like, but feels like an app prototype with Pop.app for example. Or you can design entire screens like they are final and put them together with MarvelApp. Another approach is to use Framer.js which allows you to code almost—feels—like—native applications on mobile.
For web application prototyping you can use Bootstrap or Foundation. To increase the fidelity and interactivity we use tools like Bootstrap, Middleman, Sass etc.