Design Prototyping

Uploaded 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.

More in: Design , Technology , Business
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    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...