Your SlideShare is downloading. ×
Prototyping <ul><li>Francis Rowland </li></ul><ul><li>EMBL-EBI External Services </li></ul>Developing ideas for UI and web...
&quot;The use of simplified and incomplete models of a design to explore ideas, elaborate requirements, refine specificati...
Prototyping:  lo-fi and hi-fi comparisons Francis Rowland http://ebiinterfaces.wordpress.com Paper and software prototypin...
Prototyping:  pencil and paper Francis Rowland Pencil and Paper Photo: quacktaculous / Flickr http://ebiinterfaces.wordpre...
Prototyping:  sketches Francis Rowland Page layout sketches Francis Rowland / ENFIN redesign http://ebiinterfaces.wordpres...
The mighty post-it note! Andrea Collett / Flickr Prototyping:  post-it note brainstorming Francis Rowland http://ebiinterf...
Prototyping:  paper prototype Francis Rowland ELIXIR homepage paper prototype Francis Rowland http://ebiinterfaces.wordpre...
Software... ... lots of options! Prototyping:  lots of software options Francis Rowland http://ebiinterfaces.wordpress.com
Making wireframes in Balsamiq http://www.balsamiq.com / Prototyping:  Balsamiq Mockup screenshot Francis Rowland http://eb...
Prototyping in Adobe Fireworks Mark Bingley / screenshot Prototyping:  Fireworks screenshot Francis Rowland http://ebiinte...
Page layout mockups again ... this time in Photoshop Prototyping:  wireframe / mockups with some detail Francis Rowland ht...
ELIXIR homepage annotated wireframe Francis Rowland Prototyping:  annotated wireframe with grid overlay Francis Rowland ht...
Prototyping:  core points Francis Rowland http://ebiinterfaces.wordpress.com <ul><li>Some prototyping tips... </li></ul><u...
&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; Bil...
Thanks for listening. So what are your experiences?  What works for you? Prototyping:  thanks + discuss Francis Rowland Ov...
Upcoming SlideShare
Loading in...5
×

Design Prototyping

2,372

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,372
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
32
Comments
0
Likes
4
Embeds 0
No embeds

No notes for slide

Transcript of "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

×