Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Rapid prototyping

1,222 views

Published on

My talk at xConf ThoughtWorks, Pune

Published in: Design
  • Be the first to comment

  • Be the first to like this

Rapid prototyping

  1. 1. Rapid Prototyping jayalaxmi dinni @ jayaa.wordpress.com
  2. 2. no right way to do prototype
  3. 3. design questions and communicate design ideas prototype can answer
  4. 4. “show me, don‟t tell” approach
  5. 5. Fig 1 (paper interface to a programmable climate control system) and Fig 2 -taken from book “Sketching User Experience” Bill Buxton
  6. 6. prototype for Web
  7. 7. Scale fast Think Big Act Small Rapid Prototyping
  8. 8. Create a high level vision document to keep track of the big picture Think Big Rapid Prototyping
  9. 9. •Basic design principles -http://www.thefloatingfrog.co.uk/graphic-design/basic-design-principles-explained/ •Heuristic Principles - http://www.useit.com/papers/heuristic/heuristic_list.html •Essential controls for web applications (or invent new one) •Psychology •Contextual Inquiry What you should know:
  10. 10. Explore Proposes Tentative Lack of commitment for Refinement Specific more Descriptive
  11. 11. Paper Balsamiq PowerPoint PowerPoint Visual Design tools Html/css Mozilla-addon Firebug Ideation stage Evolving Stage
  12. 12. "The best sites are those where there is a seamless divide between the look, the content and the experience" - Issac Pinnock
  13. 13. <html prototyping /> <html prototyping />
  14. 14. Place the content <html prototyping /> 1 <div id="container-outer"> <div id="header-outer"> <div id="header"> <div id="logo"></div> <div id="navigation"> </div> </div> </div> <div id="content-outer"> <div id="content <div class="inner-content"> <div> </div> </div> </div> <div id="box-bottom"> </div> </div><!-- end of sub page content --> </div><!-- end of content --> </div><!-- end of content-outer --> <div id="footer-outer"> <div id="footer"> </div> </div><!-- end of footer outer --> </div><!--- end of container- outer -->
  15. 15. Lay(it)out <html prototyping /> 2
  16. 16. start Styling + add extra Visual treats + interactions using jquery/javascript <html prototyping /> 3
  17. 17. Updating: topography layout color/design elements 1/2 <html prototyping /> [ easiness]
  18. 18. Limitations: you tend limit your thought process extra work upfront for complex design, its time-consuming and difficult
  19. 19. Use: its real easy to test and Validate aids building an interactive pattern library could be used for production
  20. 20. 1 2 3 4 1. On click of the calendar icon, calendar will pop up, where the user can select the date range. 2. The date which have records are highlighted with blue background. And the user can select only those dates 3. The dates which don’t have records are disabled and colored grey. 4. The user can choose the month and year On click of the calendar icon, calendar will pop up, where the user can select the date range. The date which have records should be highlighted with blue background. And the user can select only those dates. The dates which don’t have records are disabled and colored grey. The user can choose the month and year Nobody likes to read. So prototype and „annotate‟ Less need for clarification and less rework # tips
  21. 21. Firebug
  22. 22. firebug
  23. 23. firebug
  24. 24. Intermediate Step Html/CSS Firebug Paper PowerPoint Visual Design Tool plus+ plus+ plus+ plus+ plus+
  25. 25. not just for Designers, its for everyone use Right tool for the right Job validate the design, through prototyping way towards creating a culture of user experience

×