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

Designing on the Z-Axis

Sponsored · Ship Features Fearlessly Turn features on and off without deploys. Used by thousands of Ruby developers. →
Avatar for Wren Lanier Wren Lanier
September 19, 2014
Design
650
2

Designing on the Z-Axis

Avatar for Wren Lanier

Wren Lanier

September 19, 2014

More Decks by Wren Lanier

See All by Wren Lanier
Developing a Lean UX Practice
Avatar for Wren Lanier heywren
0
76
Secret Sauce: Designing on the Z-Axis (ConvergeFL 2013)
Avatar for Wren Lanier heywren
0
160
Designing Immersive Mobile Experiences - ConvergeSE 2013
Avatar for Wren Lanier heywren
0
290

Other Decks in Design

See All in Design
test deck title
Avatar for Shota Matsuo shotamatsuo
0
1.5k
I.A. como meio, não como fim. Como avaliar o valor entregue?
Avatar for Viviane Delvequio videlvequio
0
460
2026-04-06 CMU School of Design "Vision-Driven Design"
Avatar for Hiroshi Ishii ishii_mit
0
140
Where Imagination Ends AI Begins
Avatar for R-524 r5ni4
0
370
kintone開発における​ライターの役割の変化​〜AI活用を添えて〜 / Changes in the Role of Writers in Kintone Development
Avatar for keroyama keroyama
0
190
保育現場にAIを 〜人と技術に橋を架けるデザインで考えてきたこと〜 uiuxcamp2026-hoiku-ai-design
Avatar for Takahiro Yamaguchi hiro93n
1
410
20260309_3月ICTデザイン勉強会_地域創生2.0
Avatar for Kimura Atsunobu a2k
0
170
【CEDEC2026】アートとゲームデザインをつなぐVFX設計『GRANBLUE FANTASY: Relink - Endless Ragnarok』における表現と可読性の両立
Avatar for Cygames, Inc. cygames
PRO
1
1.2k
全員がアウトプットを出せる時代、 誰を採用する?
Avatar for NishaMe nishame
0
650
ISO 9241-171:2025っていうのがあってな
Avatar for Shoji Ohashi shosira
1
270
速く作れるかではなく、速く学べるか ― 学習ループを回すパイロットの途中報告
Avatar for Sho Nagata nagata03
0
640
PAMPHLET.pdf
Avatar for M-HAND,Inc. mhand01
0
1.7k

Featured

See All Featured
Into the Great Unknown - MozCon
Avatar for Noah Learner thekraken
41
2.7k
Paper Plane
Avatar for Katie Cordina Lindsey katiecoart
PRO
2
53k
Color Theory Basics | Prateek | Gurzu
Avatar for Gurzu gurzu
0
450
Exploring anti-patterns in Rails
Avatar for Elle Meredith aemeredith
3
490
16th Malabo Montpellier Forum Presentation
Avatar for AKADEMIYA2063 akademiya2063
PRO
0
370
jQuery: Nuts, Bolts and Bling
Avatar for Doug Neiner dougneiner
66
8.6k
Reflections from 52 weeks, 52 projects
Avatar for Jefferson Lam jeffersonlam
356
21k
Measuring Dark Social's Impact On Conversion and Attribution
Avatar for Stephen Akadiri stephenakadiri
2
270
The Director’s Chair: Orchestrating AI for Truly Effective Learning
Avatar for Mike Taylor tmiket
1
290
What does AI have to do with Human Rights?
Avatar for Per Axbom axbom
PRO
1
2.4k
Why Our Code Smells
Avatar for Brandon Keepers bkeepers
PRO
340
58k
Unsuck your backbone
Avatar for Amy Palamountain ammeep
672
58k

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?