Prototyping in code | Phil Whitehouse

We hosted the inaugural UX Bootcamp last week, organised by Leisa Reichelt. The subject was ‘Prototyping in Code’. I’ll assume for sake of brevity that readers know what prototyping is and why it’s important.

But why use working code for prototypes? There are a few potential reasons:

With experience, and a set of good templates, it’s possible to create and amend a prototype really quickly
It allows you to include and test complex interactions, such as click events or fancy form elements. You can also test for different browser widths / screen sizes, including mobile, especially if you have an understanding of media queries
By improving our understanding of web site architecture, it strengthens our ability to describe intentions to web developers
By designing sites in this way, you don’t have to spend money on other tools such as OmniGraffle or Photoshop

The UX Bootcamp was, first and foremost, a crash course in creating basic code. We learned how to mark up content correctly, how to style it using CSS and how to introduce funky interactions using JavaScript (predominantly JQuery, but also Chosen for forms). We learned where to find useful grid templates, for large screens and mobile. We also learned how to use an app to streamline the workflow (I used Espresso, others used Coda). The course material was fantastic, and the facilitators (Anna, Peter and Alex) were incredibly patient and really knew their stuff. We definitely finished the course with a great foundation to build on.

But would we use code for prototyping? That’s a harder question to answer. To my mind, if you’re starting from a point where you know this stuff, and have a set of familiar templates from which to draw, it might well make sense to use these tools for creating prototypes. However my feeling was that this wouldn’t work as well for designers learning to code for the first time. We depend on these designers to give deep thought to the layout and flow through a website, considering the user’s goals at all times – and hacking code could be a big distraction from this. It’s far easier to draw a box in OmniGraffle, which is better for subsequent annotation as well.

That said, there’s no doubt in my mind that all designers would benefit from a working knowledge of the tools that power the web, and I’m well chuffed with the course. Nice one, Leisa!