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.

Web-Native UX Design: Prototyping with HTML, CSS and jQuery

10,720 views

Published on

New versions of, and extensions to, HTML, CSS and JavaScript are revolutionizing web design, but the tools we UX professionals use to define both structure and behavior are frequently incapable of expressing the full range of web-native interactions. Designing experiences using native web code can help us overcome those limitations and make us better designers. In this presentation you'll learn about creating interactive prototypes that will thrill stakeholders, designers and developers alike.

Video examples from original presentation can be found here: http://jenmatson.com/vid/

Published in: Technology, Design

Web-Native UX Design: Prototyping with HTML, CSS and jQuery

  1. 1. Web-Native UX DesignPrototyping with HTML, CSS and jQuery Jen Matson @nstop hi@jenmatson.com
  2. 2. @nstopUNDERSTANDING
  3. 3. @nstopfàÉÜç g|Åx
  4. 4. @nstop
  5. 5. @nstop
  6. 6. @nstop????????
  7. 7. @nstop
  8. 8. @nstopABOUT ME:• Sr User Experience Architect, Ascentium• Designing & coding web sites since 1994• Find me online: @nstop (Twitter) jenmatson.com (Web)
  9. 9. @nstop WHY NOT USE... [ INSERT SOFTWAREPROGRAM NAME HERE ]?
  10. 10. @nstop “We shape our tools andthereafter our tools shape us” - Marshall McLuhan, Understanding Media (1964)
  11. 11. @nstop
  12. 12. @nstop
  13. 13. @nstop HTML + CSS + JavaScriptStructure + Style + Behavior
  14. 14. @nstop
  15. 15. @nstopHTML + CSS + JavaScriptHTML5 + CSS3 + jQuery
  16. 16. @nstop1. Modern browser support2. Most features & functionality3. Learning “The Right Stuff”
  17. 17. @nstop YOUR ASSIGNMENT: YOUR ASSIGNMENT: “You are working with a cupcake bakery to create anew product detail page that best showcases each delectable cupcake.”
  18. 18. @nstopHTML5
  19. 19. HTML5 @nstop
  20. 20. HTML5 @nstop
  21. 21. HTML5 @nstop
  22. 22. HTML5 @nstop
  23. 23. HTML5 @nstop 1. Accesibility 2. Findability
  24. 24. HTML5 @nstop
  25. 25. HTML5 @nstop <article> <aside> <figure> <footer> <header> <hgroup> <menu> <nav> <section>
  26. 26. HTML5 @nstop
  27. 27. HTML5 @nstop<input type="text" <input type="email" name="email" name="email" id="email"> id="email">
  28. 28. HTML5 @nstop date search email tel month time number url range week
  29. 29. HTML5 @nstop
  30. 30. HTML5 @nstop
  31. 31. HTML5 @nstop VALIDATION
  32. 32. HTML5 @nstop VALIDATION http://validator.w3.org
  33. 33. HTML5 @nstop VALIDATION http://validator.w3.org
  34. 34. HTML5 @nstop VALIDATION http://validator.w3.org
  35. 35. @nstopCSS3
  36. 36. CSS3 @nstop
  37. 37. CSS3 @nstop
  38. 38. CSS3 @nstop APPLYING STYLE
  39. 39. CSS3 @nstop
  40. 40. CSS3 @nstop
  41. 41. CSS3 @nstop
  42. 42. CSS3 @nstop
  43. 43. CSS3 @nstop
  44. 44. CSS3 @nstop 1. Rounded corners 2. Shadows 3. Opacity
  45. 45. CSS3 @nstop
  46. 46. CSS3 @nstop
  47. 47. CSS3 @nstop
  48. 48. CSS3 @nstop 4. Web fonts 5. Text stroke
  49. 49. CSS3 @nstop
  50. 50. CSS3 @nstop
  51. 51. CSS3 @nstop 6. Transforms 7. Animations
  52. 52. CSS3 @nstop
  53. 53. CSS3 @nstop
  54. 54. @nstopjQuery
  55. 55. jQuery @nstop
  56. 56. jQuery @nstop
  57. 57. jQuery @nstop
  58. 58. jQuery @nstop
  59. 59. jQuery @nstop
  60. 60. jQuery @nstop
  61. 61. @nstopHTML + CSS + JavaScript= WORK + REWARD
  62. 62. @nstop ADDITIONAL STRATEGIES1. Switch to a different medium or tool2. Ask a developer for help3. Surf, view source, copy & paste
  63. 63. @nstop
  64. 64. @nstop BUT WAIT...THAT’S NOT ALL
  65. 65. Annotations @nstop
  66. 66. Annotations @nstop
  67. 67. Annotations @nstop
  68. 68. Annotations @nstop
  69. 69. @nstop RESOURCES HTML5 BoilerplateHTML5 Rocks http://http://slides.html5rocks.com html5boilerplate.comCSS3 Gradient Generator Dive Into HTML5http://gradients.glrzad.com http://diveintohtml5.orgHTML Dog When Can I Use...http://htmldog.com http://caniuse.comTime-Saving & Educational Resources for WebDesignershttp://www.smashingmagazine.com/2011/01/18/time-saving-and-educational-resources-for-web-designers/
  70. 70. @nstop
  71. 71. @nstop THANK YOUhttp://jenmatson.com/
  72. 72. @nstop PHOTO ÉyCREDITS |Ç ÉÜwxÜ tÑÑxtÜtÇvxKey in Ignitionhttp://www.flickr.com/photos/cgc/6002365/Carhttp://www.flickr.com/photos/rutlo/3676103315/Shifterhttp://www.flickr.com/photos/8000vueltas/4728937244/Dashboardhttp://www.flickr.com/photos/8000vueltas/4728293079/Tofurkeyhttp://www.flickr.com/photos/megabeth/5206564773/Roast Turkeyhttp://wallpapers.free-review.net/21__Roast_Turkey_and_Mashed_Potatoes.htmSingle Cupcakehttp://www.flickr.com/photos/rosebengal/1035503938/Row of Cupcakeshttp://www.flickr.com/photos/lamantin/5143354092/

×