Sketching in Code: the Magic of Prototyping

by David Verba

33 Reader Comments

Back to the Article
  1. We’ve been doing this where I work for 6 years. It works exceptionally well once you’ve done it a few times and your partners/clients see it in action.

    We use XML/XSL for our prototyping framework. Works on almost all appservers and all newer browsers.

    We have an extensive snippet library for eclipse/aptana to do common patterns as well as a standard layout template that every page inherits from. This makes it extremely simple to set up your shared components and then just forget about them.

    Using XML files we create “scenarios” that define the page flow as well as hold data for display of specific page elements. This approach provides clear separation of concerns and allows us to explore multiple scenarios with very little coding.

    As we walk through the prototype with the client they may point out suggested changes. We document those changes in the affected XSL file. Most of the requested changes can be made real time and presented to the client. The changes that can’t be made immediately due to complexity are commented with a TODO and put in the task list for later work.

    All of the comments can then be pulled using another XSL file and transformed into implementation notes for developers or help with refining BRDs.

    At the end of the design process the same XSL files can be handed off to a developer, wired up, and used as the end state product. This works well in an agile environment.

    Copy & paste the code below to embed this comment.
  2. Yes, I agree prototypes are good. But I came across the same dilemma, how to develop them without too much pain. I am currently evaluating UML modelling software “Screen Architect”? (plug-in of Enterprise Architect) for work. This software is designed specially for prototyping of user interfaces.
    It does have few problems, but because we are using Enterprise Architect for business requirements, use cases, wireframes, etc., it looks like a good tool to use. 

    Copy & paste the code below to embed this comment.
  3. I’ve heard a lot of you asking about a good tool for prototyping and wireframes and I have to heartily recommend Axure Pro RP.
    As a developer, using this tool for prototyping has helped flush out implementation problems that would have cost thousands of dollars down the line, if we hadn’t done any prototyping.

    Copy & paste the code below to embed this comment.
  4. I couldn’t recommend Axure (http://www.axure.com) enough as a prototyping tool.  It gives non-developers the ability to easily create a full HTML prototype including links, drop-downs, hover-overs, etc.  It even allows complex interactions such as Ajax-driven functionality.  It’s simple to learn with the tutorials present on the site.

    Copy & paste the code below to embed this comment.
  5. I’ve recently started using “Oversite”:http://taubler.com/oversite/ for my IA and prototyping work. It’s great – really easy to use, very flexible and cheap at $35 for a license.

    It’s free to download and try out, so you really can’t go wrong with it.

    I “wrote about it some more”:http://www.smileycat.com/miaow/archives/001080.php on my web site, along with some other examples of prototyping tools.

    Copy & paste the code below to embed this comment.
  6. Great article, which underlines our recent move to prototyping over wireframes and documentation.

    We just finished the first prototype for one of our clients. So far the feedback is great and helped us significantly in the discussions with the client. In future we all our web applications will be based on this approach.

    We used Axure RP Pro 5 and as Rachel (#14) we can not recommend the tool enough for prototyping.

    Copy & paste the code below to embed this comment.
  7. Thanks for the great article and constructive comments. It is comforting to know we are all not alone when it comes to this crucial phase of development.

    I have not seen anyone yet mention the benefit of prototyping to help communicate and facilitate off shore development. I have found that a prototype not only helps business owners have a tangible example, but it also helps spell out and back up any requirements document created”¦and let’s face it, in reality how many developers fully read the requirements documentation, if there is any created at all. Second to that when a business user signs off for requirements at the development phase, a prototype is an excellent visual representation of what the final product is they can expect. No surprises”¦well okay, not as many surprises.

    Copy & paste the code below to embed this comment.
  8. I LOVE prototyping. Can’t get enough of it when it is done appropriately at the right level of fidelity for where the stakeholders are at in the product lifecycle and when it doesn’t get in the way of getting to the right solution (which I have seen it do; but that is another post).

    What I’m interested in here is that the title of the article talks about “sketching” and “prototyping” as if these are the same things.

    Please see “Sketching User Experience” by Bill Buxton on a clearer and deeper explanation on why they aren’t, but I’ll just put out there that the intentions of a sketch are different than those of a prototype and further the purpose of a sketch are also different. A sketch can be interactive, it can be in code, but it does need to have certain properties to maintain the important design process requirements that makes sketching work.

    Let me first point you to my own blog post on sketching here: http://synapticburn.com/more.php?id=288_0_1_0_C

    To summarize Buxton, sketches are suggestions and prototypes are descriptions. To summarize my take, the purpose of sketching is to generate ideas. The purpose of prototyping is to communicate an idea. Yes there is a continuum here, but going back to Buxton, this is why sketching needs to be and even appear quick & rough, but also very importantly need to be disposable.

    My experience with coded prototypes is that they are seldom quick enough (yes, ruby makes it quick as an example, but not nearly as quick as pencil to paper as different example), and because of the nature of pixel drawing, prototypes are almost never rough enough and thus seldom if ever have the quality of something that is disposable.

    Like I said though. Prototypes are HUGELY important. They are reflexive decision points about the look and behavior and even functional requirements of the solution. In Industrial Design they would the equivalent of an appearance model which in many studios is a “signed-off on deliverable” that is used before the expensive process of tooling is commenced. They are also great for usability testing and other forms of user and customer feedback generation (as well as other stakeholders). They are also important for other methods of design refinement. But that is not what “sketching” is for. “Sketching” is not about refinement, but about ideation and maybe at best “frameworking”.

    —dave

    Copy & paste the code below to embed this comment.
  9. Unfortunately [”¦] I’ve often seen features cut from a product launch in favor of generating “better”? documentation.

    Hooray, now we know how to prevent feature bloat!

    it is often difficult to annotate a working prototype[”¦]

    In Axure RP you can annotate any page or element; it will also generate a Word document from the working prototype. One of the many reasons why I second other commenters’ enthusiasm for this product.

    David Malouf:

    My experience with coded prototypes is that they are seldom quick enough.

    So true! Even in a rapid prototype, the more work goes into it, the more we grow attached to design ideas prematurely. No tool will be ever rapid enough to replace paper and pencil.

    Copy & paste the code below to embed this comment.
  10. Also, many methods of prototyping require development resources of one sort or another.

    I think there’s a line between “design” and “development” that many clients don’t understand. Some may disagree with me, as they take care of everything (jack o’ all trades) in their production process.

    However, many use Designers, and then Developers to finish. And the Designers must understand requirements from Developers, while they all need to understand what the client wants. That’s if the client understands what’s necessary for the project. Soon would after a good prototype, right?

    Glad to read an article that emphasizes the importance of prototyping, because it not only helps the client interact, but gets the team involved to see the big picture. And the prototype can be visual (img/ppt/Ai/Ps) or interactive, even just a bunch of scratch paper to begin.

    Copy & paste the code below to embed this comment.
  11. 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.
  12. 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.
  13. 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.
  14. 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.
  15. 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.
  16. 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.
  17. 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.
  18. 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.
  19. 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.
  20. This article made me feel a lot better about visually modeling out my projects. Thanks.

    Copy & paste the code below to embed this comment.
  21. 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.
  22. 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.
  23. 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.