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
630
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
68
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
280

Other Decks in Design

See All in Design
Diverse Design Team Deck
Avatar for Diverse diverse
0
1.2k
Goodpatch Tour💙 / We are hiring!
Avatar for Goodpatch Inc. goodpatch
31
1.1M
Drawing_for_Anim_Final_PDF.pdf
Avatar for Mandalyn Teo lynteo
2
130
AIスライド生成を進化させるMDファイル
Avatar for 太田賢一 kenichiota0711
0
630
Vibe Coding デザインシステム
Avatar for poteboy poteboy
3
1.8k
Crisp Code inc.｜ブランドガイドライン - Brand guidelines
Avatar for So Kotani / Crisp Code inc. CEO so_kotani
1
340
デザイナーとエンジニアで 同じ山に登ろう
Avatar for moco moco1013
0
190
「自分の仕事はどこまで？」と問い続けたら。デザイナーの「視座」を考える
Avatar for Takeru Mukai mukai_takeru
0
330
デザインコンテキストのバトンをつなぐ—AI時代のプロダクトマネジメント
Avatar for kumano ayumi kumanoayumi
6
1k
Rethinking IFUs: What Board Game Rulebooks Contribute to IFU Usability
Avatar for Chris Hass deadlinepoet
0
170
root COMPANY DECK / We are hiring！
Avatar for 株式会社ルート root_recruit
2
27k
図じゃなく言語で描く - Common Ground for Design AI Operations.
Avatar for Kazuki Ikeda kazukiikeda
2
750

Featured

See All Featured
4 Signs Your Business is Dying
Avatar for Josh Pigford shpigford
187
22k
Why Mistakes Are the Best Teachers: Turning Failure into a Pathway for Growth
Avatar for Umar Saidu Auna auna
0
110
Typedesign – Prime Four
Avatar for Hannes Fritz hannesfritz
42
3k
Lightning talk: Run Django tests with GitHub Actions
Avatar for Sarah Abderemane sabderemane
0
160
The Pragmatic Product Professional
Avatar for Laura Van Doore lauravandoore
37
7.2k
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
Avatar for mongodb mongodb
49
9.9k
Designing for Performance
Avatar for Lara Hogan lara
611
70k
Refactoring Trust on Your Teams (GOTO; Chicago 2020)
Avatar for Rebecca Miller-Webster rmw
35
3.4k
XXLCSS - How to scale CSS and keep your sanity
Avatar for Zaharenia Atzitzikaki sugarenia
249
1.3M
Public Speaking Without Barfing On Your Shoes - THAT 2023
Avatar for David Neal reverentgeek
1
350
Speed Design
Avatar for Sergey Chernyshev sergeychernyshev
33
1.6k
Balancing Empowerment & Direction
Avatar for Lara Hogan lara
5
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?