Photo: Andy Budd
On the train back from a workshop in Brighton for dConstruct, a programme of events and a conference hosted by design agency Clearleft. The theme of this year’s dConstruct is “Designing the Social Web” - and my workshop was Wireframing 2.0: Designing for Definition.
Wireframing isn’t a design technique I’ve personally used before (although I get the idea), so I was keen to learn more. Or rather, from what I’d been reading online about designers debunking old-style ‘grey box’ wireframing in these days of AJAX and complex, multi-state user interactions, I was keen to know what methodology I should be adopting in its place.
Rich Rutter and James Box from Clearleft presented the differences between wireframing and the approach they preferred - interactive prototyping. Prototyping is essentially building a clickable website, using HTML, CSS and Javascript (mainly in the shape of jQuery or another Javascript library), that closely resembles the layout of the final design, but with the minimum of visual adornment. A key stage in the web design process, prototypes follow on from the early stages of brainstorming and basic sketches (Clearleft’s mantra is ‘Identify > List > Cluster > Sketch’).
Prototyping expressly dispenses with the model of:
- visual design (in Photoshop and pdf)
- development
- user testing
- delivery
Naturally, flat visual layouts are often reshuffled and reconfigured during development; testing, again, frequently throws up surprises. The logical way to build a website is through a series of iterative prototypes, that puts user experience (or ‘UX’) at the core, instead of shoehorning it in later; users can feel the way the site behaves, and feed back on their experience of it, before any visual design decisions are made. Prototyping also ideally draws input from both designers and developers, as opposed to having a rather cagey back-and-forth relationship between the two.
So - I’m sold. Hand me the stickies. I’m particularly chuffed that Clearleft have provided a zip file of the prototyping code framework they presented. If you’re a UX-er you’ll be interested in their Polypage tool, developed in collaboration with Rails developers New Bamboo, that allows prototypers to manipulate user states (e.g. logged in vs logged out) by adding classes to their HTML elements.
