theTeam.

Prototyping in code

By Phil Whitehouse 27 Jul 2011.
0 comments

We hosted the inaugural UX Bootcamp last week, organised by Leisa Reichelt. The subject was 'Prototyping in Code' - so I thought I'd write a few notes explaining what this is, and why it might be helpful.

When designing a website, it's important to test your work with end users along the way. The designer does their best to relate to the end user, and there are tools such as personas that can help with this, but inevitably several assumptions are being made. These assumptions need to be tested.

Wireframes or designed pages are commonly used for prototyping, and these are very easy to amend based on feedback (sometimes even in the testing session itself). But it's possible to create a working, clickable prototype using the basic tools of the web - HTML, CSS and JavaScript - and render the site in a browser. Why would you want to do that? 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. There were kittens. 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 thesetools 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!

Many thanks to heraldpost for sharing the Boot Camp photo under Creative Commons.