Published: 12th Oct 2015

The power of prototypes

- true team

Creating design mockups is a great way for a designer to explore different possibilities and make decisions.

But even if the work is thoroughly explained, it still leaves a lot open to interpretation. To mitigate this, we believe that whenever possible design work should be brought to life and prototyped. Rather than being explained, it can be experienced.

Prototyping removes all ambiguity and gives a clear indication of how the design system will look, feel, move and respond. Working this way allows us to find the best solutions and minimise development issues further down the line.
 
Here are some of the prototyping techniques we use:

Click-throughs

The best way to communicate the flow of a user journey and get a sense of moving through a site is with a clickable prototype.
 
We work with a piece of software called InVision, which is quick and easy to use. They are constantly improving the product, giving us even more tools to help us communicate our ideas.
 
Here’s an example of a click-through Sean, on of ours designers, prepared for the touchscreen kiosks in Manchester Arndale.
 

Motion examples

Motion often enhances a users experience. Transitions can move the user between sections, animations can offer subtle navigation cues, prompt interaction, offer feedback and guide users through processes to make their journey easier. We can even use animation to decrease perceived waiting time. Getting these things right is a real art.
 
Timing and easing is key. The way a system moves, feels and responds to a user’s actions is part of the overall brand experience. Get this wrong and it can make the site feel clunky, disjointed and unpleasant to use.
 
Here’s an example of an early interaction idea I had for the new True site that I put together in After Effects. 

Interactive demos

For new UX/design patterns, complicated functionality and responsive web design, nothing beats getting it in the browser early so the project team and client can interact with it, see what works or what could be improved and continue to iterate the design.
 
With some ideas you can only go so far on paper or in Photoshop before you need to bring it to life to see whether it works. Here is an example of an early responsive beer page prototype that Curtis, one of our developers, built for Fuller's.
 
All of these tools and techniques help us better communicate our ideas, elicit more useful feedback and produce a superior end product.
 
If you would like to speak to us about an upcoming design project please get in touch.

- true team