Your SlideShare is downloading. ×
Design Prototyping
Upcoming SlideShare
Loading in...5

Thanks for flagging this SlideShare!

Oops! An error has occurred.

Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

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.

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

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

No notes for slide


  • 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 ... and developers!
  • 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. Prototyping: pencil and paper Francis Rowland Pencil and Paper Photo: quacktaculous / Flickr
  • 5. Prototyping: sketches Francis Rowland Page layout sketches Francis Rowland / ENFIN redesign
  • 6. The mighty post-it note! Andrea Collett / Flickr Prototyping: post-it note brainstorming Francis Rowland
  • 7. Prototyping: paper prototype Francis Rowland ELIXIR homepage paper prototype Francis Rowland
  • 8. Software... ... lots of options! Prototyping: lots of software options Francis Rowland
  • 9. Making wireframes in Balsamiq / Prototyping: Balsamiq Mockup screenshot Francis Rowland
  • 10. Prototyping in Adobe Fireworks Mark Bingley / screenshot Prototyping: Fireworks screenshot Francis Rowland
  • 11. Page layout mockups again ... this time in Photoshop Prototyping: wireframe / mockups with some detail Francis Rowland
  • 12. ELIXIR homepage annotated wireframe Francis Rowland Prototyping: annotated wireframe with grid overlay Francis Rowland
  • 13. Prototyping: core points Francis Rowland
    • 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" Prototyping: quote Francis Rowland Final thought...
  • 15. Thanks for listening. So what are your experiences? What works for you? Prototyping: thanks + discuss Francis Rowland Over to you...