Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Designing for Single Page Applications

Designing for Single Page Applications

Ember allows us to design highly adaptive, extendable, and fast web apps, but with those possibilities comes greater responsibility. Successfully leveraging the characteristics that make the technology worth while requires a myriad of methods, principles, and patterns that aren’t readily obvious to those breaking into single page application design. In this talk I’ll hone in on those requirements with relevant examples and give the audience a starting point to make their next Ember.js product design successful.

91ade645d6519b0ee30d660be5645d88?s=128

Steve Trevathan

March 03, 2015
Tweet

Transcript

  1. Loading presentation…

  2. src: christinefranck.files.wordpress.com

  3. src: http://www.jphs.org/

  4. src: images.nymag.com/

  5. Steven Trevathan

  6. Partner & Creative Director at DockYard Inc @strevat

  7. Designing for Single Page Applications Designing for Single Page Apps

    @strevat
  8. Designing for Single Page Apps @strevat Pain in

  9. Designing for Single Page Apps @strevat the ass

  10. Designing for Single Page Apps @strevat user.

  11. Designing for Single Page Apps @strevat Welcome to the world

    of making things for people.
  12. None
  13. Designing for Single Page Apps @strevat Mental Models

  14. Designing for Single Page Apps @strevat Mental Models: what I

    think the thing is
  15. Designing for Single Page Apps @strevat Mental Models: how I

    think the thing works
  16. Designing for Single Page Apps @strevat Mental Models: influenced by

    experiences from my past
  17. Designing for Single Page Apps @strevat Mental Models: can be

    updated / changed
  18. Designing for Single Page Apps @strevat What is “home”?

  19. src: buildmyplatform.com

  20. src: danshareza.com

  21. src: hgtv.com

  22. None
  23. Designing for Single Page Apps @strevat Macro

  24. Designing for Single Page Apps @strevat Macro Models what I

    think it is from a distance
  25. None
  26. Designing for Single Page Apps @strevat Micro

  27. Designing for Single Page Apps @strevat Micro Models how I

    think each individual interaction works
  28. None
  29. None
  30. None
  31. None
  32. None
  33. None
  34. None
  35. Designing for Single Page Apps @strevat Build a framework for

    understanding
  36. None
  37. None
  38. Designing for Single Page Apps @strevat Use them explicitly If

    they directly apply
  39. Designing for Single Page Apps @strevat Break em’ when you

    can improve understanding & value
  40. None
  41. None
  42. Designing for Single Page Apps @strevat Design Methods & Patterns

  43. Designing for Single Page Apps @strevat #1 Gradual Engagement reducing

    perceived risk
  44. None
  45. None
  46. None
  47. None
  48. Designing for Single Page Apps @strevat #2 Skeleton UI thinning

    out the spinners
  49. None
  50. None
  51. None
  52. None
  53. None
  54. Designing for Single Page Apps @strevat #3 Carry Context be

    kind, don’t rewind
  55. Designing for Single Page Apps @strevat …in other words: don’t

    leave me waiting at the bus stop
  56. None
  57. None
  58. None
  59. Designing for Single Page Apps @strevat Can be a major

    save.
  60. Designing for Single Page Apps @strevat #4 Reuse Core Interactions

    cementing in that value
  61. None
  62. Designing for Single Page Apps @strevat Micro > Macro core

    interactions become a symbol of your app
  63. None
  64. None
  65. Designing for Single Page Apps @strevat #5 Offline Mode “Goliath

    mode”
  66. Designing for Single Page Apps @strevat Disallow Editing? Please no.

  67. None
  68. None
  69. None
  70. Designing for Single Page Apps @strevat Respond Optimistically? Tread lightly.

  71. None
  72. Designing for Single Page Apps @strevat Tools of the Trade

    A free design pattern library for Ember applications.
  73. Designing for Single Page Apps @strevat toolsofthetrade.dockyard.com

  74. Designing for Single Page Apps @strevat Thank you. @strevat