Ajax Wireframing Approaches

By Kevin Hale
2007-11-23


Introduction
Last week we introduced the concept of prototyping as a solution to the problem of representing Ajax at the early stages of designing an interface. We talked about some general strategies and attitudes we should take when starting a project (like not being a hero and establishing good relationships with our programmers) and reviewed some fundamental XHTML and CSS skills we should have in our arsenal before beginning the prototyping process.

In this installment, we’re going to go over a few techniques and approaches we use to create the foundation of every prototype—wireframes. In addition to serving as documentation for those working with the markup, wireframes are a great way to create screenshots and debug rendering problems that are happening during DOM manipulation. Whenever we find something looking funny during the development process, we always refer back to our wireframes to see if it’s a markup / presentation problem. If it renders right in the browser statically, then we know to look for the problem in the JavaScript or server side programming.

Creating an XHTML/CSS wireframe is easy enough, basically you just build the web site with your editor of choice (we like TextMate and Skedit on OSX and Notepad++ on XP). Good XHTML/CSS wireframes take into consideration all the markup changes that will happen on a web site and if done well, are extremely versatile. The problem is how do you efficiently indicate all the dynamic action that’s going to be taking place on the page? The answer is not easily. The following three methods are some of the approaches we discovered to help us prepare wireframes for prototyping.

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