Designing on the Z-Axis

Transcript

1. DESIGNING WREN LANIER ON THE Z-AXIS @heywren
3. omg
5. photo credit:
6. We’re not designing pages, we’re designing systems of components. —Stephen Hay “ ”
8. LAYERS
9. TRANSITIONS
11. LAYERS Everything in its place
12. X photo credit:
13. photo credit:
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:
30. Soften moments of change Describe where you are now Provide context cues
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
45. InVision App SOURCE
46. thoughtbrain.com SOURCE
47. +
48. image credit:
50. Why does the z-axis matter? It points the way towards the future
52. The future isn’t flat
53. http://wrenlanier.com @heywren Questions?