In my current project, here's the process I followed: - Loose visual conceptual model of the site and its flow, in Visio (flowchart boxes on the page, no decoration, notes for myself about what goes where) - Rough hand-drawings of major pages that define the experience (free-form, loose notes and doodles about icons and graphics, some notes about color themes, font sizes, loose representation of headline-to-body-text relationship) - I did a rough wireframe in Visio to emulate my hand-drawings, but quickly realized I was going to get a lot farther, much faster, with Fireworks (my favorite design tool) - I mocked up all of my rough pages in Fireworks CS3. The best thing they added was the ability to have multiple pages in a single file, with a master page containing the common header, footer and background. It took me about a week to go from rough drawings and wireframes to about 15 well-formed pages with full graphic treatments. - I dove into dreamweaver to define the basic stylesheet with fonts and general classes for major blocks, headline tags, and common conventions. - I created a second Fireworks file to hold common buttons that weren't in my first mockup, and to preserve the mockup from the slicing I needed to keep images small (I just need a 1px-wide slice of my background image, so slicing the mockup would have broken things apart). Again, Fireworks comes through with button templates, common library elements, and multi-pages (I have a page for buttons, backgrounds, photos, images, icons, and "miscellaneous")
As soon as I had anything to share, I showed it to everyone I could. I'm still planning to schedule sessions with users, but until I get my recruits, I put the design (in Visio, JPG & DHTML form) in front of potential users and SMEs). My developers are about a week behind my prototyping, so I'm beginning to treat their pages with styles and elements from the DHTML prototype. I always wind up with an DHTML prototype, because that's the only way I can confidently define and test the interactions I'll need. In this case, I redesigned one critical page once I had coded it because I discovered several ways to make the process more efficient. I couldn't have done that in Fireworks without a ton of extra effort, but in DHTML, I have to use the page myself several hundred times a day. Once I have to use it for my own testing, I'm driven to make it faster and more intuitive. >From start to finish, total effort was about 3 solid weeks, stretched out over the past 1.5 months. My developers use "stories" to define experiences in an agile paired-programming model, so I have found delivering a set of stories with each prototype helps them see how pages fit together and how interactions on a page should work. It also lets me define requirements that were too difficult to prototype but must be included (i.e. if I forgot to add "remove" buttons to items in a table, my story would be "The teacher can add a statistic to the table and remove it by clicking the Remove link next to the item (not represented in prototype)"). I came from an old-school business-requirements model of working, but this new story-method is a lot easier and faster. We meet once a day and have a deep dive twice a week, so I'm sure that's helping as well. Hope this helps... I haven't tried Thermo yet, but will take a look since your review =]. My biggest problem with the above is I'm much more productive once I'm in DHTML mode, so it would be nice to attach CSS styles and HTML tags to Fireworks symbols, so if you exported a page as HTML it would get you moving more quickly. Right now you're limited to a kludgy table-layout export that's a nightmare to rebuild in Dreamweaver (and disconnects you from your original PNG file). Bryan http://www.bryanminihan.com -----Original Message----- From: [EMAIL PROTECTED] [mailto:[EMAIL PROTECTED] On Behalf Of Fred Beecher Sent: Tuesday, January 08, 2008 1:05 PM To: IxDA Discuss Subject: [IxDA Discuss] Prototyping with Adobe CS3 Hi all, Ever since Thermo came out, I've started paying more attention to Adobe products and their potential for use in rapid prototyping. Previously, I've thought of these products as being massive, teetering piles of features that need to be "integrated" (read: "made even more complex") in order to produce effective prototypes. But the UXP I saw demonstrated in Thermo has wreaked a little havoc with my prejudices. Have any of you worked with the trio of Fireworks, Dreamweaver, & Flash to do rapid prototyping? What is your process like? How do you deal with printed documentation? How do you make your prototyping "rapid" (i.e., do you/can you create Visio-like stencils)? Thanks for any insight, F. ________________________________________________________________ *Come to IxDA Interaction08 | Savannah* February 8-10, 2008 in Savannah, GA, USA Register today: http://interaction08.ixda.org/ ________________________________________________________________ Welcome to the Interaction Design Association (IxDA)! To post to this list ....... [EMAIL PROTECTED] Unsubscribe ................ http://www.ixda.org/unsubscribe List Guidelines ............ http://www.ixda.org/guidelines List Help .................. http://www.ixda.org/help ________________________________________________________________ *Come to IxDA Interaction08 | Savannah* February 8-10, 2008 in Savannah, GA, USA Register today: http://interaction08.ixda.org/ ________________________________________________________________ Welcome to the Interaction Design Association (IxDA)! To post to this list ....... [EMAIL PROTECTED] Unsubscribe ................ http://www.ixda.org/unsubscribe List Guidelines ............ http://www.ixda.org/guidelines List Help .................. http://www.ixda.org/help
