Archive for November, 2009

Practical Prototyping Tips

I saw Todd Warfel speak in August at DELVE UI. I was so inspired by his approach that I changed the way we work. We have now moved away from large decks of wireframes and interaction notes- and embraced the 70% rule. We design 70% then build a prototype. There are a number of examples in my talk Designers vs Developers: Coming together to build the best RIAs. But the point is, if you are designing Rich Internet Applications, RIAs, prototyping is essential.

Check out Todd’s talk on prototyping:

And consider getting his new book, Prototyping: A Practitioner’s Guide to Prototyping, Rosenfeld Media, November 2009. It is full of practical advice and detailed examples, not philosophical musings. If you are like me- a busy consultant who is not a great programmer, but needs to get interactive mock-ups in front of stakeholders as fast as possible- there are a number of great ideas in here.

Comments (11)

Designers vs Developers: Coming together to build the best RIAs

Presented on Nov 3, 2009 at Øredev in Malmo, Sweden.

What is the fastest way to get from a product idea to a rich internet application? By breaking down the communication barriers between designers and developers.

This talk takes a quick look at how to build a shared vocabulary and use prototyping to bypass extensive wireframes and development specs.

Take a look at 5 simple and effective prototyping tools:

  • Balsamiq Mock-ups + Nakpee
  • Any wireframes + Protoscript
  • Prototcasting (using click-throughs and screencasts to convey requirements)
  • Atlas and other development environments + visual layout editors


Comments (6)

UI Controls for Rich Applications

In January 2009, we posted an article on the 30 Essential Controls for Rich Application design. The article was incredibly popular since it also discussed which RIA frameworks/toolkits/libraries offer each control. We will be posting a new version of the article later this month on UX Booth.

In the mean time, check out the new Control Matrix- 42 controls across 25 libraries, toolkits and frameworks like: Flex, Ext JS, jQuery, Dojo, MooTools, Google Web toolkit, YUI! 2 & 3, Telerik for .net and Silverlight, Open Laszlo and more. You can use iWork to comment on the spreadsheet if you have feedback or corrections. There is also a download button at the top of the screen (next to the printer) if you want to download the matrix.

And here are the bookmarks for the 20+ demo galleries.

And download our RIA Pattern Flipbook prototype. All you need is:

  • a printer
  • Avery 3381 Postcards/Index Cards
  • a hole punch
  • a wire ring/clip, at least as big around as a quarter


I print a page, then flip it and print the back. The back of each card has an example from alive application.

Then I punch a hole in the top left corner of each card and pull them all on the ring. This is quite useful to keep on your desk or take into design meetings for reference and inspiration. We used them in our workshop on Designing Rich Applications at Øredev in Malmo, Sweden yesterday.

Comments (3)