Ajax Wireframing Approaches

By Kevin Hale
2007-11-23


Turn On Possibilities (TOP)

Stacking is great for segments of markup that are just going to be replaced by one another dynamically, but are a bit of a waste for when elements are just going to change their state with a class name change or a style change. In our login example above, I probably would combine the with and without error stacks because they’re similar in markup (note that the “with errors” only contains an extra span.)

Here’s a better example of a TOP wireframe. In this wireframe, I’ve indicated various interface situations like when a field is focused (yellow hover, instructions on the side) and when there’s an error. As you can see, TOPs are great for creating controlled screenshots.

The thing to remember is that it is best to use all three approaches in combination to develop your wireframes for prototyping. On Wufoo, we used keyframing for lightboxes, stacking for showing the various fields types in our demo, and TOP for tooltips, help menus and properties.

Tutorial Pages:
» Introduction
» Keyframing
» Stacking
» Turn On Possibilities (TOP)
» Using Useful Class Names
» CSS Boolean

Related Tutorials: » Getting Started with AJAX in jQuery » GWT Basics: AJAX Programming with Java » AJAX Accessibility for Websites » AJAX and PHP Form Processing » The obligatory 'My Ajax Tutorial' Post » A Designer's Guide to Prototyping Ajax