$30 off During Our Annual Pro Sale. View Details »

Designing on the Z-Axis

Wren Lanier
September 19, 2014
Design
2
470

Designing on the Z-Axis

Wren Lanier

September 19, 2014
Tweet

More Decks by Wren Lanier

See All by Wren Lanier
Developing a Lean UX Practice
heywren
0
47
Secret Sauce: Designing on the Z-Axis (ConvergeFL 2013)
heywren
0
130
Designing Immersive Mobile Experiences - ConvergeSE 2013
heywren
0
240

Other Decks in Design

See All in Design
FIT2022_levii
levii
0
210
デザインシステム運用とOKRの良い関係
takanorip
0
650
UXA2022 Day 2; - Christian Crumlish - Product Management for UX People
uxaustralia
PRO
0
170
toB SaaS開発におけるUXライティング｜あつまるデザナレ2022
aguringo
4
760
UXA2022 Day 2; Christian Crumlish - Product Management for UX People
uxaustralia
PRO
0
190
UXA2022 Day 1; Natasha Ballantyne - The life-changing potential of digital inclusion
uxaustralia
PRO
0
180
モンストの組織とUIデザイナー業務の紹介
mixil
0
270
Tu fais du Web et tu ne connais pas les Layout Shifts ?! Nan mais...
goetter
2
160
あつまるデザナレ2022　REALITY登壇資料
choukantan
0
780
UXA2022 Day 2; Julie Schiller, Nika SmithAuld, Rebecca Destello, Jennifer Romano - Scaling UX Culture
uxaustralia
PRO
0
110
MIXI スポーツ領域とライフスタイル領域のデザイン
mixil
0
270
Cleaning Kimba's Eyes
kignato1
0
150

Featured

See All Featured
VelocityConf: Rendering Performance Case Studies
addyosmani
317
22k
YesSQL, Process and Tooling at Scale
rocio
158
12k
How To Stay Up To Date on Web Technology
chriscoyier
779
250k
Building an army of robots
kneath
301
40k
Distributed Sagas: A Protocol for Coordinating Microservices
caitiem20
317
19k
Faster Mobile Websites
deanohume
294
29k
Put a Button on it: Removing Barriers to Going Fast.
kastner
56
2.5k
Stop Working from a Prison Cell
hatefulcrawdad
263
18k
Typedesign – Prime Four
hannesfritz
34
1.5k
Web development in the modern age
philhawksworth
197
9.5k
Clear Off the Table
cherdarchuk
79
290k
10 Git Anti Patterns You Should be Aware of
lemiorhan
643
54k

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?