Sketching in Code: the Magic of Prototyping

by David Verba

33 Reader Comments

Back to the Article
  1. I haven’t seen it mentioned yet, so I thought I would throw it into the ring ;-) I use it all the time for mocking up interactive web site designs.

    Copy & paste the code below to embed this comment.
  2. I might not belong here, but still I had to sign up to make a comment. This article helped me with describing the meaning of role play. That for sure is prototyping issues difficult to grasp since they are abstract or invisible to view, however using all our senses makes it clear. I often find it usefull and inspiring to get input from disciplines you normally do not associate with drama, however having the same objectives; tension, energy, and so on.

    Copy & paste the code below to embed this comment.
  3. I’ve been doing a lot of inquiry in this subject over the last few months and haven’t been completely happy with what I’ve been finding.  Wireframers are great and tools like Balsamiq Mockups and Flairbuilder allow folks with domain experience to contribute, but often those folks often lack the experience necessary to avoid bogging the process down.  Worse, template inheritance is often very difficult, and those wireframes typically can’t be used to generate a usable HTML foundation.  Artists (for their role in a final site) don’t want to deal with a grid at all and typically stick to raster graphics programs like Photoshop. 

    So after reading this article, and for those interested in techniques, here’s something I’m about to try:

    I use Wicket (http://wicket.apache.org) for my web templating engine, and it has a <wicket:remove> tag, which wraps prototype content in a page and removes it from rendering at runtime.  Some other discussions on this (i.e. http://stackoverflow.com/questions/55363/best-tools-for-creating-website-wireframes) note the use of jQuery for prototype interactivity, which sounds like it’s worth exploring.  (I’m also using wiQuery, so I’ll have to be very careful with side effects on the final code, but hopefully can deal with that using <wicket:remove>.)

    Combined with Blueprint or 960gs, I’m hoping to get rapid development of a prototype, but as importantly a prototype that can rapidly transition to live code. 

    We’ll see!!

    Copy & paste the code below to embed this comment.