Design Prototyping

2,641 views
2,513 views

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
0 Comments
4 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
2,641
On SlideShare
0
From Embeds
0
Number of Embeds
67
Actions
Shares
0
Downloads
32
Comments
0
Likes
4
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 http://ebiinterfaces.wordpress.com ... and developers!
  3. 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. 4. Prototyping: pencil and paper Francis Rowland Pencil and Paper Photo: quacktaculous / Flickr http://ebiinterfaces.wordpress.com
  5. 5. Prototyping: sketches Francis Rowland Page layout sketches Francis Rowland / ENFIN redesign http://ebiinterfaces.wordpress.com
  6. 6. The mighty post-it note! Andrea Collett / Flickr Prototyping: post-it note brainstorming Francis Rowland http://ebiinterfaces.wordpress.com
  7. 7. Prototyping: paper prototype Francis Rowland ELIXIR homepage paper prototype Francis Rowland http://ebiinterfaces.wordpress.com
  8. 8. Software... ... lots of options! Prototyping: lots of software options Francis Rowland http://ebiinterfaces.wordpress.com
  9. 9. Making wireframes in Balsamiq http://www.balsamiq.com / Prototyping: Balsamiq Mockup screenshot Francis Rowland http://ebiinterfaces.wordpress.com
  10. 10. Prototyping in Adobe Fireworks Mark Bingley / screenshot Prototyping: Fireworks screenshot Francis Rowland http://ebiinterfaces.wordpress.com
  11. 11. Page layout mockups again ... this time in Photoshop Prototyping: wireframe / mockups with some detail Francis Rowland http://ebiinterfaces.wordpress.com
  12. 12. ELIXIR homepage annotated wireframe Francis Rowland Prototyping: annotated wireframe with grid overlay Francis Rowland http://ebiinterfaces.wordpress.com
  13. 13. Prototyping: core points Francis Rowland http://ebiinterfaces.wordpress.com <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;http://videos.visitmix.com/mix09/key01 Prototyping: quote Francis Rowland Final thought... http://ebiinterfaces.wordpress.com
  15. 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

×