A Designer's Guide to Prototyping Ajax

By Kevin Hale
2007-11-23


Relationship Skills

Secretly, everyone loves participating in the design process. I think it might be because the barrier to entry on giving an opinion about design is being born with eyes. And while it gives me the most terrible headaches, if you involve your developers in the process, they will love you for it. Kidding aside, the best thing you can ever do for your team is to establish open communications with the developers and engineers working on a project. I’m always learning new tricks about the DOM and the capabilities of a server side language from Ryan and Chris and they are always surprised to find out when a bug or quirk can be fixed with simple tweaks to XHTML and CSS.

Also, happy programmers don’t touch markup. Like most designers, I’m a complete control freak when it comes to the XHTML and CSS I generate. When I create a wireframe or prototype, I make sure I provide all of the necessary DOM hooks (IDs and Classes) to let a programmer do his job. By incorporating their needs into the design, you don’t have to worry about them trying to hack a solution or (God forbid) attempt to make changes themselves. You don’t have to leave all the problem solving to them. Too many times I’ve seen a function appear that attempts to target an element with a complex set of node traversing rules. Making a developer guess and figure out how to access elements is a complete waste of time.

Before beginning, you’ll want to know and understand the environments the developers are using to integrate your work. You’ll want to know what frameworks, toolkits and animation libraries are at their disposal and what templating options are available for presentation. There are many out there and whether its a Movabletype template, XSLT, Smarty Templates or the up and coming JSONT, you’ll want to take into account each one’s subtleties. If your team completely compartmentalizes design and development, take the time to follow-up with the developers and ask about what worked and what they needed to make your creation come alive.

Tutorial Pages:
» Introduction
» There are No Heroes in Prototyping
» Relationship Skills
» XHTML Skills
» CSS Skills

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 » Ajax Wireframing Approaches