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

Designing on the Z-Axis

Sponsored · Your Podcast. Everywhere. Effortlessly. Share. Educate. Inspire. Entertain. You do you. We'll handle the rest. →
Avatar for Wren Lanier Wren Lanier
September 19, 2014
Design
640
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
70
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
「ツール」から「パートナー」へ。AI伴走時代のUXデザインとは？～操作を減らし、成果を最大にするための設計～
Avatar for NCDC ncdc
1
630
プロダクトデザイナーに学ぶ、『見る気が起きる』ダッシュボードの作り方 / Creating Engaging Dashboards: Lessons from Product Designers
Avatar for yamamoto-yuta yamamotoyuta
2
820
図面資産×AI 眠れる資産を起こす挑戦
Avatar for 青野正寛 aonomasahiro
0
120
AIスライド生成を進化させるMDファイル
Avatar for 太田賢一 kenichiota0711
0
1.1k
デザインコンテキストのバトンをつなぐ—AI時代のプロダクトマネジメント
Avatar for kumano ayumi kumanoayumi
6
1.1k
Accelerating performance improvement based on a software review evaluation matrix
Avatar for kitanosirokuma kitanosirokuma
0
240
2026年の勢い / Momentum for 2026
Avatar for bebe bebe
0
440
Diverse Design Team Deck
Avatar for Diverse diverse
0
1.8k
test deck title
Avatar for Shota Matsuo shotamatsuo
0
1.5k
絵や写真から学ぶ、要素がもたらす副作用
Avatar for keigo kspace
0
340
Spacemarket Brand Guide
Avatar for Spacemarket spacemarket
2
730
コンテンツ作成者の体験を設計する
Avatar for Chiaki Okamoto chiilog
0
170

Featured

See All Featured
Odyssey Design
Avatar for Ryan Kendrick rkendrick25
PRO
2
630
Agile that works and the tools we love
Avatar for Rasmus Luckow-Nielsen rasmusluckow
331
21k
How to Think Like a Performance Engineer
Avatar for Harry Roberts csswizardry
28
2.6k
No one is an island. Learnings from fostering a developers community.
Avatar for Antonio thoeni
21
3.7k
Why Mistakes Are the Best Teachers: Turning Failure into a Pathway for Growth
Avatar for Umar Saidu Auna auna
0
140
ラッコキーワード サービス紹介資料
Avatar for ラッコ株式会社 rakko
1
3.4M
Learning to Love Humans: Emotional Interface Design
Avatar for Aarron Walter aarron
275
41k
SEO in 2025: How to Prepare for the Future of Search
Avatar for Michael King ipullrank
3
3.5k
Mozcon NYC 2025: Stop Losing SEO Traffic
Avatar for Sam Torres samtorres
0
240
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
Avatar for mongodb mongodb
49
9.9k
Building Adaptive Systems
Avatar for Chris Keathley keathley
44
3k
Fantastic passwords and where to find them - at NoRuKo
Avatar for Phil Nash philnash
52
3.7k

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?