Before you start writing code, it's always a good idea to create a wireframe that lays out the basic scenes and stages within the application. (Click here for few wireframing examples.) This can be done with basic rectangles and text in PowerPoint, but forum poster shutton has a better idea. He created a wireframe with elements that mimic the look of the Mojo UI, including buttons in various sizes:
Check out this forum thread to download the .svg file. By resizing and moving elements around and adding new elements and text in a program like Illustrator, you can quickly mock up how your application will look and get a much better picture of how a user will interact with it. You'll also be better able to spot any potentially awkward interactions in the UI you may not have previously noticed.
If anyone is feeling creative, it would be great to build on this file by adding shapes representing other Mojo UI widgets (e.g. radio buttons, sliders, toggle buttons, etc.) and create a complete shape library for rapid wireframing of webOS applications. After all...what better way to spend your time while waiting to get into the Mojo early access program?
This article is the first of many daily development-related webOS articles. Grab the RSS feed to stay in the know!
Friday, 08 May 2009
FYI, the "Min" buttons are 48x48 relative to the screen, which is what the Rough Cuts documentation recommends as a minimum hit target.
-Scott