Prototypes play a vital role in the production of successful user experiences, below is a brief look at how I utilised varying degrees of prototype fidelity during the life cycle of a conceptual project.
Low fidelity prototypes allow quick and easy creation, testing and iteration. In the example below (an in-house product I designed at Bluefrog) I built an initial interactive prototype using HTML and CSS.
Taking care to focus on functionality and not aesthetics, I was able to quickly adapt and improve the product until we were happy the idea worked.
— View the working prototype.
My initial prototype provided proof of concept, I now had to build on this with a higher fidelity approach so we could perform initial usability testing and demonstrate the product to clients.
Taking the earlier HTML and CSS code, I designed in the browser to apply a visual layer that incorporated branding, photography and a more realistic appearance.
— View the working prototype.
Finally I designed the user interface in sketch, incorporating all of the feedback and findings from testing and client demonstrations, and uploaded my screens to InVision.
Here I was able to present and test the final interface design using InVision's simple, clickable 'hot point' approach. This also provided an interactive reference point for the engineering team as we progressed to build.
Occasionally it is necessary to output a clickable prototype straight from a design tool. Adobe XD and Sketch both offer these facilities which, despite being basic in terms of transitions and sharing are often the quickest method for prototype creation.