Adobe Flex is an Awesome Prototyping Tool
Posted by Bob Warfield on September 22, 2007
I talked to someone the other day who built a complete mock up of a complex enterprise app’s proposed UI facelift in 2 days. They were just as surprised as I was, and have since become addicted to using Adobe’s Flex for UI prototyping. It’s really easy to use Flex in this fashion, much easier than trying to do something similar with AJAX.
UI prototyping is essential for good UI development in my book. You need to get the proposed UI in front of real customers ASAP, well before you can hope to have real code behind it in most cases. Storyboards and the like are handy, but there’s nothing quite like an interactive UI prototype that at least navigates to the correct screens if nothing else. I also like the idea of being to build an app from “both sides”. The UI gang can get a prototype doing and start fleshing it out towards the engine. The engine can can start building towards to the UI, and they’re able to see what UI functions are contemplated up front. The two meet in the middle and you have alpha quality code for a product. If I’m planning to support both a RIA and a “dumb” thin client, I’d rather dumb down the RIA than try to “smarten up” the dumb thin client as well, which argues to start from the RIA in any case.
Developers often like to start out with a real web page too, rather than a Photoshop illustration or Visio diagram or some such. It only makes sense. The task of trying to convert a Photoshop or other drawing into code is drudgery anyway, so why not just start with something that’s nearly ready for incorporation into the app? A UI prototype also gives QA something more substantitve to start thinking about test plans around.
Go ahead, give Flex a taste for this purpose. It’s easy to learn at this level. Here are some resources to help you get started:
Adobe Flex Home Page: There’s a 30 day trial offer here: that’s your ticket to play with Flex.
Flex Component Explorer: An easy way to see all the gadgets available in vanilla Flex 2.
Flex 2 Style Explorer: And you can see how to tweak their styles.
Leave a Reply