Prototyping - keeping it simple
Every UX designer knows that a small change to something present on multiple wireframe pages can equate to a lot time spent on the rework. And because we create in an iterative cycle of design and review, rework is a common factor.
Although many prototyping tools provide a range of ok (to bad) ways to manage this, the key to improving the time in which prototypes can be reworked, and in fact built, is good form design. And the key to good form design? Keep it simple!
What follows are some tips and tricks I have learnt along the way that help me. Maybe they will help you too.
- Measuring up – Always build pages to the same grid. This means objects within the prototype can be copied to other pages (and indeed other prototypes) with no need for resizing. Given the majority of websites are built to a 960 pixel page width I use this in 3 column layout. Split 10-180-20-540-20-180-10.
- Make it snappy – Use ‘snap to grid’ and where possible size all objects in multiples of 10. This makes objects easier to align and resize.
- And most importantly… Keep it simple! – Remember UX design is about function. The pretty stuff we can leave to the creatives. Not that a prototype has to be ugly but you can produce a good looking prototype that is easy to maintain by doing the following:
- Minimise the use of too many different colours. I will build a prototype using 3 text colours, 3 background shades and one ‘call to action’ colour.
- Keep to one easy to read, modern font type such as Arial.
- Decide on a size and colour for headings, subheadings, text sections, button text and links – and stick to them.
By simplifying what you use to create the prototype the end result will be simple to understand and simple to maintain. Good luck!
