Design Prototyping


Published on

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

Published in: Design, Technology, Business
  • Be the first to comment

No Downloads
Total Views
On Slideshare
From Embeds
Number of Embeds
Embeds 0
No embeds

No notes for slide

Design Prototyping

  1. 1. Prototyping <ul><li>Francis Rowland </li></ul><ul><li>EMBL-EBI External Services </li></ul>Developing ideas for UI and web page design
  2. 2. &quot;The use of simplified and incomplete models of a design to explore ideas, elaborate requirements, refine specifications, and test functionality.&quot; Lidwell, Holden & Butler - &quot;Universal Principles of Design&quot; &quot;... an appropriate way to communicate design information to users&quot; Jenny Preece - &quot;Human Computer Interaction&quot; Prototyping: a couple of definitions Francis Rowland ... and developers!
  3. 3. Prototyping: lo-fi and hi-fi comparisons Francis Rowland 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. 4. Prototyping: pencil and paper Francis Rowland Pencil and Paper Photo: quacktaculous / Flickr
  5. 5. Prototyping: sketches Francis Rowland Page layout sketches Francis Rowland / ENFIN redesign
  6. 6. The mighty post-it note! Andrea Collett / Flickr Prototyping: post-it note brainstorming Francis Rowland
  7. 7. Prototyping: paper prototype Francis Rowland ELIXIR homepage paper prototype Francis Rowland
  8. 8. Software... ... lots of options! Prototyping: lots of software options Francis Rowland
  9. 9. Making wireframes in Balsamiq / Prototyping: Balsamiq Mockup screenshot Francis Rowland
  10. 10. Prototyping in Adobe Fireworks Mark Bingley / screenshot Prototyping: Fireworks screenshot Francis Rowland
  11. 11. Page layout mockups again ... this time in Photoshop Prototyping: wireframe / mockups with some detail Francis Rowland
  12. 12. ELIXIR homepage annotated wireframe Francis Rowland Prototyping: annotated wireframe with grid overlay Francis Rowland
  13. 13. Prototyping: core points Francis Rowland <ul><li>Some prototyping tips... </li></ul><ul><li>Know your users and their activities </li></ul><ul><li>Do some simple modelling before you sketch </li></ul><ul><li>Work quickly and iterate </li></ul><ul><li>Start big, and leave detail until later </li></ul><ul><li>Manage expectations </li></ul><ul><li>Use tools appropriate to the development stage </li></ul><ul><li>Bounce ideas off other designers and developers </li></ul><ul><li>Test early and often </li></ul><ul><li>Be prepared to compromise... design is a process </li></ul>
  14. 14. &quot;If you don't have as much detail in the transitions as you do in the states, you're going to get it wrong.&quot; Bill Buxton - author of &quot;Sketching User Experiences&quot; Prototyping: quote Francis Rowland Final thought...
  15. 15. Thanks for listening. So what are your experiences? What works for you? Prototyping: thanks + discuss Francis Rowland Over to you...