Sketching in Code: the Magic of Prototyping

by David Verba

33 Reader Comments

Back to the Article
  1. in three years my partner and have chopping away on our site and, to date, we haven’t yet uncoiled the wires. No thinking how many hours of relocating the plumbing could have been saved.

    why didn’t i think of that flickers through the mind.
    and. Gosh we aren’t even talking about rockets.

    a clicking map for the mind.

    Copy & paste the code below to embed this comment.
  2. Have to add my vote for Axure RP Pro as a solution to clickable wireframes. I’m a Business Analyst and have found it ultra-simple to use to do anything including RIA-like interactivity.

    Our clients and tech guys love its outputs. Great clickable wireframes (to whatever level of fidelity you like) and it also automatically outputs a Functional Spec.

    I’ll be interested to see how these softwares evolve. I can imagine them swallowing up much of the development effort – producing the UI code that just needs to be tied into the back-end. I believe Visual Studio has similar drag-drop functionality. Suddenly development becomes the realm of analysts and designers and can be done quickly.

    Copy & paste the code below to embed this comment.
  3. Great article indeed! I’ve been wireframing for years in InDesign, (it’s great for spitting out nicely ordered PDF’s). However it’s not great for prototyping as you can’t add any interaction.

    For those who are good at Flash, there’s a great article worth checking out here:

    http://www.boxesandarrows.com/view/quick-and-easy-flash

    Thanks for this David, the best article I’ve read in ages.

    Stu.

     

    Copy & paste the code below to embed this comment.
  4. I’ve been advocating rapid prototyping as an important step for a while. I think it will be amazingly beneficial for reducing the post-production rework cycle by getting it right up-front. But where can I find people with these skills? What specific skills do I need to look for?

    I need someone who can rapidly put ideas into code for a RIA. Any recommendations on some specifics to post in a job listing?

    Copy & paste the code below to embed this comment.
  5. I think most ALA readers will agree that prototyping is the most agile path to a great UI and a satisfied user.  However, as has been iterated, the tools to do this are what’s lacking. 
    For a cheap and medium fidelity solution, PowerPoint does work pretty well if you don’t mind working with the Animations.
    I haven’t heard anyone mention Adobe Thermo yet?  Does anyone know when it may be released?  It sounds/looks, from the demo I saw, a lot like what this crowd needs.  But it’s been in development for a while now.

    Copy & paste the code below to embed this comment.
  6. I’ve been using dreamweaver since 2000 to do rapid prototyping and it works well.  It certainly doesn’t spit out good code, but it serves its purpose.

    Copy & paste the code below to embed this comment.
  7. Nice article,

    I agree that the future of prototyping is through programs as AJAX, Flash, Maybe Adobe Thermo, but the way we should approach each project varies. Personally I use mainly Visio and Axure at the moment as the most projects I had so far were under the pressure of time and of low budget.

    However, sometimes more interactive prototypes are needed. Especially, if they involve user testing.  On the other hand, there is the danger that has already mentioned of clients might confuse the prototype with the actual web site which is not good. As they focus more on the functionality for example of the navigation menu than the actual menu. 

    Copy & paste the code below to embed this comment.
  8. If you want to prototype may be interesting to check Seaside framework. It has debugging capabilities and flow control extremely intuitive.
    In my equation with it: prototyping is making.
    cheers,

    Sebastian

    Copy & paste the code below to embed this comment.
  9. I am currently researching wireframe and prototyping tools.  I really want something web based that users can login, comment and contribute content to the live wireframe.  I thinks this is a great way to manage content as well.  I had experimented w/ a simple drupal install where I setup a skeleton of the site just for capturing content from the client. Each page had the options status of something like not started, waiting, in progress, complete.  Then it was on the user to post content there as they had it.  This has been great because then we have logs of everything they give us, when, who editied it and when they marked it complete.  I have seen a lot of people mention Axure but it is not web based which I do not like.  Can someone give me more feedback??

    Copy & paste the code below to embed this comment.
  10. This article made me feel a lot better about visually modeling out my projects. Thanks.

    Copy & paste the code below to embed this comment.
  11. 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.
  12. 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.
  13. 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.