Upgrade to Pro — share decks privately, control downloads, hide ads and more …
Sign up for free

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
78
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
Starfall (2025)
Avatar for Rachel Poon rezaline
0
140
デザイナーがいない部署にハーネスを設計する
Avatar for 太田賢一 kenichiota0711
5
4.6k
Bet AI Day 2026丨デザインハーネス：専門職の判断基準をコードのように運用する
Avatar for LayerX layerx
PRO
6
6.8k
HeartLanguage - DesignProcess
Avatar for HeartLanguage heartlanguage
0
160
test deck title
Avatar for Shota Matsuo shotamatsuo
0
1.6k
2026/6/26 第6回韓日リビングラボネットワークフォーラムin世宗　ー未来を作るリビングラボー アジアの社会システム転換に向けたリビングラボの可能性
Avatar for Kimura Atsunobu a2k
2
120
Typographie et intégration web
Avatar for Raphael Goetter goetter
0
130
Decksh keywords
Avatar for Anthony Starks ajstarks
0
140
【CEDEC2026】『Shadowverse: Worlds Beyond』続編開発におけるUIデザイン・アニメーション演出の「超進化」 ～継承と挑戦を両立するデザイン手法～
Avatar for Cygames, Inc. cygames
PRO
4
5.3k
怖くないアクセシビリティ -カウンターカルチャーとしてのアッカン東京-
Avatar for Yu Morita securecat
1
300
言幹と言葉（Stems & Leaves）
Avatar for 加来幸樹 SIGNCOSIGN kakukoki
0
230
The Art of Caring
Avatar for Klemens klemens
0
470

Featured

See All Featured
Building Experiences: Design Systems, User Experience, and Full Site Editing
Avatar for Michelle Schulp Hunt marktimemedia
1
610
How to Get Subject Matter Experts Bought In and Actively Contributing to SEO & PR Initiatives.
Avatar for Liv Day livdayseo
0
200
Bootstrapping a Software Product
Avatar for Garrett Dimon garrettdimon
PRO
306
120k
The Web Performance Landscape in 2024 [PerfNow 2024]
Avatar for Tammy Everts tammyeverts
12
1.3k
SEO for Brand Visibility & Recognition
Avatar for Aleyda Solis aleyda
0
4.8k
Keith and Marios Guide to Fast Websites
Avatar for Keith Pitt keithpitt
413
23k
コードの90%をAIが書く世界で何が待っているのか / What awaits us in a world where 90% of the code is written by AI
Avatar for r-kagaya rkaga
63
46k
Highjacked: Video Game Concept Design
Avatar for Ryan Kendrick rkendrick25
PRO
1
470
Everyday Curiosity
Avatar for Cassini Nazir cassininazir
0
340
Odyssey Design
Avatar for Ryan Kendrick rkendrick25
PRO
2
850
The Director’s Chair: Orchestrating AI for Truly Effective Learning
Avatar for Mike Taylor tmiket
1
310
Build The Right Thing And Hit Your Dates
Avatar for Maggie C. maggiecrowley
39
3.5k

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?