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

Designing on the Z-Axis

248b62984871a1320c4550ea9784c698?s=47 Wren Lanier
September 19, 2014

Designing on the Z-Axis

248b62984871a1320c4550ea9784c698?s=128

Wren Lanier

September 19, 2014
Tweet

More Decks by Wren Lanier

Other Decks in Design

Transcript

  1. DESIGNING WREN LANIER ON THE Z-AXIS @heywren

  2. None
  3. omg

  4. None
  5. photo credit:

  6. We’re not designing pages, we’re designing systems of components. —Stephen

    Hay “ ”
  7. None
  8. LAYERS

  9. TRANSITIONS

  10. None
  11. LAYERS Everything in its place

  12. X photo credit:

  13. photo credit:

  14. None
  15. None
  16. None
  17. None
  18. None
  19. None
  20. None
  21. None
  22. None
  23. None
  24. photo credit: Each layer should have a purpose

  25. photo credit: Layers should reflect information 
 hierarchy—most important on

    top
  26. photo credit: Don’t forget layers can move 
 independently in

    space or time
  27. TRANSITIONS Connect layers together

  28. photo credit:

  29. None
  30. Soften moments of change Describe where you are now Provide

    context cues
  31. None
  32. None
  33. None
  34. None
  35. None
  36. None
  37. None
  38. None
  39. photo credit: Don’t make users brains do “in-betweening”

  40. photo credit: Use transitions to teach app behavior

  41. photo credit: Subtle motions are often the most powerful

  42. Awesome library of mobile transitions CAPPTIVATE.CO

  43. Prototype before you build A few tools you might find

    useful
  44. None
  45. InVision App SOURCE

  46. thoughtbrain.com SOURCE

  47. +

  48. image credit:

  49. None
  50. Why does the z-axis matter? It points the way towards

    the future
  51. None
  52. The future isn’t flat

  53. http://wrenlanier.com @heywren Questions?