An overview of some approaches to design prototyping for websites and other user interfaces... going from paper to the browser window.

2. "The use of simplified and incomplete models of a design to explore ideas, elaborate requirements, refine specifications, and test functionality." Lidwell, Holden & Butler - "Universal Principles of Design" "... an appropriate way to communicate design information to users" Jenny Preece - "Human Computer Interaction" Prototyping: a couple of definitions Francis Rowland http://ebiinterfaces.wordpress.com ... and developers!

3. Prototyping: lo-fi and hi-fi comparisons Francis Rowland http://ebiinterfaces.wordpress.com Paper and software prototyping Examples Positives Negatives PAPER “ low fidelity” Pencil and paper; card dividers; Balsamiq, iPlotz Lightweight, portable, disposable, fast ! artificial reality! lack of interactivity (*) and functionality SOFTWARE “ high fidelity” Fireworks, (Ps / Ai) Flash Catalyst, Balsamiq, iPlotz, iRise, Axure Functionality, interaction; reusable components; bind to data; libraries and widgets Tunnel vision; sometimes difficult to translate; devil in the details

4. Prototyping: pencil and paper Francis Rowland Pencil and Paper Photo: quacktaculous / Flickr http://ebiinterfaces.wordpress.com

5. Prototyping: sketches Francis Rowland Page layout sketches Francis Rowland / ENFIN redesign http://ebiinterfaces.wordpress.com

6. The mighty post-it note! Andrea Collett / Flickr Prototyping: post-it note brainstorming Francis Rowland http://ebiinterfaces.wordpress.com

7. Prototyping: paper prototype Francis Rowland ELIXIR homepage paper prototype Francis Rowland http://ebiinterfaces.wordpress.com

8. Software... ... lots of options! Prototyping: lots of software options Francis Rowland http://ebiinterfaces.wordpress.com

9. Making wireframes in Balsamiq http://www.balsamiq.com / Prototyping: Balsamiq Mockup screenshot Francis Rowland http://ebiinterfaces.wordpress.com

10. Prototyping in Adobe Fireworks Mark Bingley / screenshot Prototyping: Fireworks screenshot Francis Rowland http://ebiinterfaces.wordpress.com

11. Page layout mockups again ... this time in Photoshop Prototyping: wireframe / mockups with some detail Francis Rowland http://ebiinterfaces.wordpress.com

12. ELIXIR homepage annotated wireframe Francis Rowland Prototyping: annotated wireframe with grid overlay Francis Rowland http://ebiinterfaces.wordpress.com

14. "If you don't have as much detail in the transitions as you do in the states, you're going to get it wrong." Bill Buxton - author of "Sketching User Experiences"http://videos.visitmix.com/mix09/key01 Prototyping: quote Francis Rowland Final thought... http://ebiinterfaces.wordpress.com

15. Thanks for listening. So what are your experiences? What works for you? Prototyping: thanks + discuss Francis Rowland Over to you... http://ebiinterfaces.wordpress.com