- Benefits of Prototyping
- Styles of Prototypes
- Prototyping Tools
- Whats Next?
Like this article? We recommend
Like this article? We recommend
Like this article? We recommend
Prototyping Tools
For every job, there is a tool. In the case of prototyping, there are quite a few tools. Let’s take a look at some of the most popular of these tools.
Axure
Axure is a very cool idea, and if you’re going to be creating a lot of wireframes and specifications, Axure could be an invaluable tool. That said, it’s a little on the expensive side, at about $589 for a single-user license.
At first, Axure seems to be a tool for creating wireframes. It comes with a set of user interface elements that can just be dropped into a screen and positioned. Nice. But the real magic is what happens next. Once your wireframes are done, you can link elements within screens to other screens to quickly create a click-through prototype. Additionally, you can add notes to each screen, much like you would in a PowerPoint presentation, to clear up any assumptions or unclear ideas. And from there, you can export the whole thing as HTML to create a live web-based click-through prototype, complete with all those notes, and you can pass it around as a product specification.
So there you have it. Wireframes, a click-through prototype, and a spec, all in one tool, with a consolidated workflow, making the job of creating each of these elements fast and cost-effective. Axure easily pays for itself in a few days if you’re designing a large site or application from scratch.
Axure is also great for AJAX- or Flash-style interaction simulations, so if you’re working on a rich interface, you can create click-through demonstrations to show off multiple states within a single page. This point is the one that truly convinced me that I should use Axure on every project. Maybe it’ll convince you as well.
Flash
We’ve already talked a bit about how you can leverage Flash as a prototyping tool; and, indeed, it’s a very useful resource for putting together simulations of interactions you can’t explain well in a simple use case or wireframe.
On the downside, Flash does require you to have some programming chops to be really effective. You can do only so much with the included UI components and such, without being able to manipulate their behaviors and modify the look and feel of the components to create something that resembles your final application. If you’re not comfortable with code, your Flash prototypes probably won’t produce the best representation of your interface.
If you’re willing to dive in, however, or already have some Flash skill, it’s definitely worth testing out to see if it’s right for you. Create a prototype for something simple, such as a contact form, and see how far you have to take things to create an effective prototype. If you’re comfortable, run with it. The benefits you gain from the rich interface capabilities of Flash can outweigh the extra time you’ll need to create prototypes with it. If you’re not comfortable, on the other hand, be prepared to abandon the whole idea and shift back to using HTML, Axure, or something else.
HTML Editors
For HTML prototypes, you can use any number of tools, from Dreamweaver to Notepad. I find it best, however, to stick with visual editors because you can get more done in a shorter amount of time.
Again, the best thing about using HTML prototypes is that you can keep refining the HTML you started with to eventually create your final page. But even with Dreamweaver, you’ll probably have to modify the CSS to create a prototype that will serve as a good starting point for a final page. Yes, you can wait until later in the process to do this, but the further along things get, the more difficult it will be to shift everything around. It’s easier to edit CSS to change the styles of several prototyped screens all at once than it is to make the same changes in each of several pages individually.
Fireworks
I personally have never used Fireworks to create a prototype, but it does have some interesting benefits, in that it can be used to generate navigation menus quickly. Also, any image you create in Fireworks can be cut up and exported as HTML, so you can design an entire page in Fireworks from scratch and end up with HTML and images to get a prototype going pretty easily. The HTML generated by Fireworks is not ideal, so you’ll definitely need to do some editing in another editor (even if it’s just Notepad) to get the code looking good enough to keep using.