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
2
630

Designing on the Z-Axis

Avatar for Wren Lanier

Wren Lanier

September 19, 2014
Tweet

More Decks by Wren Lanier

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

Other Decks in Design

See All in Design
アンエシカルデザインの枠組みの提案 -HCD-Netダークパターン研究会活動報告-
Avatar for Yu Morita securecat
0
220
decksh object reference
Avatar for Anthony Starks ajstarks
2
1.5k
Goodpatch Tour💙 / We are hiring!
Avatar for Goodpatch Inc. goodpatch
31
1M
組織の右腕として共創する ー デザインと経営の二つの視点から見えた、新しい支援のかたち/ Designship2025_Nishimura
Avatar for 株式会社ルート root_recruit
0
300
TUNAG BOOK 2024
Avatar for 株式会社スタメン stmn
PRO
0
1.5k
「見せる」登壇資料デザインの極意
Avatar for takanorip takanorip
2
580
「余白」と「欲望」を味方につける ——AI時代のデザインエンジニアリングと「越境」の作法 #KNOTS2026
Avatar for koyaman koyaman
1
1.5k
Ralph Penel Portfolio
Avatar for ralphpenel ralphpenel
0
330
絵や写真から学ぶ、要素がもたらす副作用
Avatar for keigo kspace
0
190
Storyboard Assignment: Storyboard from Comic Strip
Avatar for Mandalyn Teo lynteo
3
200
20260215独立行政法人科学技術振興機構(JST) 社会技術研究開発センター(RISTEX)ケアが根づく社会システム _公開シンポジウム
Avatar for Kimura Atsunobu a2k
0
120
AI時代に必要な アイデアの形
Avatar for ux-man uxman
0
130

Featured

See All Featured
The Curse of the Amulet
Avatar for Matthew Lei leimatthew05
1
9.7k
Kristin Tynski - Automating Marketing Tasks With AI
Avatar for Tech SEO Connect techseoconnect
PRO
0
190
30 Presentation Tips
Avatar for Ian Lurie portentint
PRO
1
250
Data-driven link building: lessons from a $708K investment (BrightonSEO talk)
Avatar for Szymon Słowik szymonslowik
1
960
The SEO identity crisis: Don't let AI make you average
Avatar for Varn varn
0
400
XXLCSS - How to scale CSS and keep your sanity
Avatar for Zaharenia Atzitzikaki sugarenia
249
1.3M
YesSQL, Process and Tooling at Scale
Avatar for Rocio Delgado rocio
174
15k
StorybookのUI Testing Handbookを読んだ
Avatar for Shingo Yamazaki zakiyama
31
6.6k
How GitHub (no longer) Works
Avatar for Zach Holman holman
316
140k
Odyssey Design
Avatar for Ryan Kendrick rkendrick25
PRO
2
540
Gemini Prompt Engineering: Practical Techniques for Tangible AI Outcomes
Avatar for Mfonobong Umondia mfonobong
2
310
Discover your Explorer Soul
Avatar for Emna emna__ayadi
2
1.1k

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?