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

2,341

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

No Downloads
Views
Total Views
2,341
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
32
Comments
0
Likes
4
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

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

×