A Designer's Guide to Prototyping Ajax

Jeffery Zeldman wrote earlier this year in his essay about Web 3.0 that 'Wireframing AJAX is a bitch.' And while I can't deny the statement, I do think there are steps we can take to alleviate the pain. The problem is static XHTML/CSS wireframes are woefully inefficient at the task of communicating and documenting the features available to the new crop of Ajax web sites. Because we've been working on a rather intense Ajax project for the last few months, we've been developing and refining a number of techniques and guidelines to help our team design for Ajax by moving beyond the traditional forms of functional specs and wireframes to something a bit more appropriate for the dynamic medium'rapid prototyping.

Hale, Kevin. Particletree (2006). Design>Web Design>Prototyping>Ajax

Interactive Prototypes with PowerPoint

Have you ever wished your early design mockups could come to life, so you could try out the navigation, test an interaction, or see if a button label just feels right when you click on it? Sure, you could invest in a dedicated prototyping tool, but you can create surprisingly quick and effective prototypes with a software program that's probably sitting on your hard drive right now. It's PowerPoint.

Kelly, Maureen. Boxes and Arrows (2007). Design>Web Design>Prototyping>Microsoft PowerPoint

JavaScript Basics for Prototyping

I know there are a good number of designers out there afraid of anything that smells of programming (basically, if it's not plug and play, it's not being used). I completely understand. Dealing with CSS rending across browsers is bad enough already. Because prototypes are all about making an interface 'look' like it works, the dabbling we're going to go over here is actually a process that's amenable to designers (especially those with programming skills that started off as just rudimentary hacking skills). CSS is the domain that most of the new crop of web designers are most comfortable with and so the functions we're going to go over are ones that manipulate, for the most part, the styles of our elements.

Hale, Kevin. Particletree (2006). Design>Web Design>Prototyping>JavaScript

Seven Website Mockup Tools

I am working on a number of website projects right now. My mission is to banish ‘lorem ipsum’ by working text into page designs before development starts. I wanted to find a tool that would let me create page mockups quickly and try out different combinations of copy and layout. Eventually, I settled on Balsamiq Mockups, which is an awesome tool. The rest of this article describes the different alternatives I considered and concludes with a detailed review of Balsamiq.

Stibbe, Matthew. Bad Language (2009). Articles>Web Design>Prototyping>Software

The Pencil Project

The Pencil Project's unique mission is to build a free and open-source tool for making diagrams and GUI prototyping that everyone can use.

Pencil Project, The. Resources>Web Design>Prototyping>Software