Prototyping

So you’ve agreed your wireframe structure, but what is this system actually going to look like? What is the flesh on the bones?

There are many things to consider, branding clashes, colour consistency, WAI concerns such as colour blindness, contrast strobing and tonal clashes and of course plain simple personal taste. This where prototyping comes in, my tool of choice is Adobe Photoshop because I know it so well I can work and quickly and efficiently to produce rapid variations of possibilities.

It is not essential to illustrate every single component of every single screen, but it is important to make sure that everything is consistent so that upon agreement style-guides can be agreed and created quickly to speed the development process.

In this illustration I created the welcome screen first then carried the colours, the top bar navigation, the typeface elements back in to the system, so that although they are two very different screens they are undeniably related.

I tend to work in an Agile development environment where development is almost an evolutionary concept. Changes need to made rapidly and by limiting your prototype to a generalised look and feel you’ll help this process immensely, rather than bogging the system down with pedantic details that require change request agreements across all stakeholders.

As the Prototype is built, it needs to be evaluated and tested by all stakeholders, sometimes that’s as easy as a single nominated member of each group having sign-off, sometimes it requires meetings to get agreement but what is essential is that the prototype is flexible to meet all these needs.

Here's the typical way I work to create prototypes, taking the agreed wireframe designs and constantly evaluating the prototype.

When evaluating a UI prototype think about this:

1. What is good about the prototype?
2. What is bad about the prototype?
3. What is missing from the prototype?
4. What is non-essential about prototype?

No prototype, or at least very few, ever get universal sign-off immediately; there will always be changes, new requirements you may have missed but when agreement is reached there should be no shock for anyone.

© Bob Powell