This post was originally seen on my old Posterous site.
One of my UX resolutions for 2012 was to learn how to prototype effectively in code. So lets get started, it's almost February already! Chop chop!
Pondering my options in Q&A format:
What does it mean to prototype in code?
To me it means making test interfaces out of HTML, with as much real-world interactivity built-in as possible, to make a prototype good enough to test with users.
No wait, why prototype at all?
Lots of reasons - read this for some. http://www.scottberkun.com/essays/12-the-art-of-ui-prototyping/
Why "interactive" prototype?
But for an experience closer to that of using a real site or app, you want to simulate the server backend - database, persistent shopping carts and whathaveyou. You want your prototype pages to be able to emulate multiple states, like "What if the user is logged out on this page?" and so on.
How do you make an HTML prototype interactive?
In the future, it might be possible to use fancy HTML5-related technologies like Local Storage to emulate all the server-side storage and interactivity a real site or app would have.
Can't you just use a prototyping tool instead?
Plenty of pros and cons to using tools vs code for prototyping. For me, both are valid depending on the project. For me, code prototyping has many benefits when thinking about responsive design in particular - that's what sparked this particular effort.
What will it look like?
I could code my own HTML for presentation, but that seems insane with all the excellent HTML/CSS frameworks lying around just begging to be used.
But which one? There are approximately 1.3 billion HTML/CSS frameworks to choose from - and that's just the free & open source ones.
My evaluation criteria for picking a framework:
This last one is contentious. I can see some times it would be better to have a barely-styled prototype to avoid prejudicing the visual design phase. The Twitter and Foundation kits are too durned attractive for that.
Enough chit-chat, lets get on with it.
Since I'm coding only for pleasure, I'm going with Foundation for my first attempt, despite it being pretty. I'm going to plug in polypage, and try to make a basic mobile app prototype.
NEXT EPISODE: we see if that worked out then.
Prototyping in code .NET article by Alex Morris I'll be referring to for tips
24 Ways Article by Richard Rutter on managing page states with PolyPage
jStorage - a Local Storage kit for jQuery that might meet my info-saving needs
blog comments powered by Disqus