
In a
previous post, I talked about the notion of "looking before you leap" as it relates to designing a website. Part of this "looking," or exploration stage, can be enhanced by prototyping. Prototyping can take shape in a number of ways, depending on a number of things related to the project in which you're currently involved. A quick survey of some of my colleagues here at Forum One revealed that the preferred method of prototyping really depends on the scope of the project, the phase of the project in which you're currently immersed, and, of course, the size of your budget. However, the most favored method was paper prototyping.
Paper prototyping usually takes place during the initial stages of design exploration and is then translated into something more functional, like a HTML mock-up, allowing more interaction with the site you're conceptualizing.
In my efforts to consolidate some of the knowledge on various prototyping procedures and techniques, here is an overview of some of the best web references on prototyping I've found.
Paper
Paper Prototyping - This a great overview of the process and benefits of paper prototyping, brought to you by A List Apart.
In Defense of Paper Prototyping - The author of this article argues that, in many cases, going beyond paper prototyping during the initial stages of a project can be "overkill." Once the basic design elements are agreed upon and in place, moving to more detailed and functional prototype makes sense, but a pen and paper never fails to get you started.
PaperPrototyping.com - A companion site to the book Paper Prototyping, by Carolyn Snyder. This site contains many great paper prototyping resources and references.
Presenation Tools
Prototyping with PowerPoint - This article presents a great way to create a functional prototype model using a nice little presentation tool of which you may have heard.
Diagramming Tools
Make Your OmniGraffle Mock-Ups Functional - A handy little screencast on turning your OmniGraffle wireframes/mock-ups into clickable prototypes.
Prototyping Using Visio - This article from the Society for Technical Communication provides a great tutorial on how to create functional prototype designs in Visio.
HTML
HTML Wireframes and Prototypes - From Boxes and Arrows, "Using HTML as the basis for your wireframing and prototyping can be a quick and rewarding experience with fabulous benefits, including easier user testing, improved client communication, and faster, more effective use of design time."
Dreamweaver Primer - This is a great companion piece to the above resource. The author lays out the process of prototyping with Dreamweaver quite nicely. Although the article was written during the days of Dreamweaver past, the concepts still hold true.
As I stated, the technique you choose depends greatly on the phase of the project. I wouldn't suggest bringing pen and paper sketches to a client meeting if the client wants to see functionality. It's up to you to decide which technique is best for your project. That being said, this is by no means an all-inclusive resource on prototyping. I suggesting checking in with some of the other experts in user experience design, like Boxes and Arrows and Adaptive Path to see what they have to say.
Prototyping is all about exploring ideas before you invest in them. Use the opportunity to refine and revise, get buy-in, and explore the features of your site before you think about build-out.
Comments
Wed, 03.09.2008 09:53
FF messages
Sat, 02.08.2008 08:49
Thanks a lot for the help! This technique is really nice.
Wed, 16.07.2008 04:20
Nice article about placing and choosing right matter while desiging a web page.
Sat, 21.06.2008 14:10
very nice
Tue, 03.06.2008 05:13
Hi, Regarding Method #3: You can get rid of the long dashed focus border that shows in Firefox by adding 'overflow: [...]
Tue, 29.04.2008 17:45
Thank you for the assistance. It worked perfectly.
Mon, 31.03.2008 09:38
Ditto what Anna said. Each time a Project Mgr or a biz owner asks me, "when are we doing user testing"? They are [...]
Thu, 27.03.2008 16:35
Your points on the idea that you're testing a site, not the user, are well taken. But I think "user testing" can be [...]