• Save
Design Prototyping
Upcoming SlideShare
Loading in...5

Like this? Share it with your network


Design Prototyping



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

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



Total Views
Views on SlideShare
Embed Views



4 Embeds 53

http://ebiinterfaces.wordpress.com 43
http://www.slideshare.net 4
http://www.linkedin.com 3
https://www.linkedin.com 3


Upload Details

Uploaded via as Microsoft PowerPoint

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
Post Comment
Edit your comment

Design Prototyping Presentation Transcript

  • 1. Prototyping
    • Francis Rowland
    • EMBL-EBI External Services
    Developing ideas for UI and web page design
  • 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
  • 13. Prototyping: core points Francis Rowland http://ebiinterfaces.wordpress.com
    • Some prototyping tips...
    • Know your users and their activities
    • Do some simple modelling before you sketch
    • Work quickly and iterate
    • Start big, and leave detail until later
    • Manage expectations
    • Use tools appropriate to the development stage
    • Bounce ideas off other designers and developers
    • Test early and often
    • Be prepared to compromise... design is a process
  • 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