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

Designing on the Z-Axis

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
73
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
CULTURE DECK／Frontend Engineer
Avatar for M-HAND,Inc. mhand01
0
1.4k
Decksh keywords
Avatar for Anthony Starks ajstarks
0
110
「バイブコーディングって何？」から始まった、 AIとの一年間と、その先のこと
Avatar for 瀬戸英晴 seto
0
650
CULTURE DECK／Creative Director
Avatar for M-HAND,Inc. mhand01
0
1.3k
AI時代、デザイナーの価値はどこに？
Avatar for Ryotaro Takahashi tararira
2
1.7k
凡庸を落とすハーネス
Avatar for Hiromi Maeo hiromimaeo
1
560
富山デザイン勉強会_デザイントレンド2026.pdf
Avatar for keita keita_yoshikawa
3
260
Signull 団体説明資料
Avatar for Signull signull
0
700
Of Ordination and Rebellion exploration sketches
Avatar for Rachel Poon rezaline
0
170
設計と制作 意図を形に表す / Design and Making: Intent Made Form
Avatar for usagimaru usagimaru
3
2k
「おすすめ」はなぜ信用されないのか - 信頼を築くUI/UX設計
Avatar for ryu ryu1013
0
160
図面資産×AI 眠れる資産を起こす挑戦
Avatar for 青野正寛 aonomasahiro
0
170

Featured

See All Featured
Navigating the moral maze — ethical principles for Al-driven product design
Avatar for Skipper Chong Warson skipperchong
2
410
Evolution of real-time – Irina Nazarova, EuRuKo, 2024
Avatar for Irina Nazarova irinanazarova
9
1.4k
[RailsConf 2023] Rails as a piece of cake
Avatar for Vladimir Dementyev palkan
59
6.7k
[RailsConf 2023 Opening Keynote] The Magic of Rails
Avatar for Eileen M. Uchitelle eileencodes
31
10k
Odyssey Design
Avatar for Ryan Kendrick rkendrick25
PRO
2
730
Primal Persuasion: How to Engage the Brain for Learning That Lasts
Avatar for Mike Taylor tmiket
0
390
Code Reviewing Like a Champion
Avatar for maltzj maltzj
528
40k
Claude Code のすすめ
Avatar for schroneko schroneko
67
230k
Lightning talk: Run Django tests with GitHub Actions
Avatar for Sarah Abderemane sabderemane
0
220
The Success of Rails: Ensuring Growth for the Next 100 Years
Avatar for Eileen M. Uchitelle eileencodes
47
8.2k
The Limits of Empathy - UXLibs8
Avatar for Cassini Nazir cassininazir
1
410
Applied NLP in the Age of Generative AI
Avatar for Ines Montani inesmontani
PRO
4
2.4k

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?