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
ドルちゃん
Avatar for ドルちゃん design_dolphins
0
580
新規AIプロダクトで、事前に知るべきだった3つの壁 〜医療AIを1年間作って、従来の開発が通用しなかった話〜 / Three Walls in Building AI Products
Avatar for Takuya Shikichi shikichee
2
3.7k
体験負債を資産に変える組織的アプローチ
Avatar for hikarutakase hikarutakase
0
720
From the Visible Crossroads: Turning Outputs into Outcomes
Avatar for takai_kanako takaikanako
2
1.2k
Crisp Code inc.｜ブランドガイドライン - Brand guidelines
Avatar for So Kotani / Crisp Code inc. CEO so_kotani
1
320
Storyboard Assignment: Storyboard from Comic Strip
Avatar for Mandalyn Teo lynteo
3
200
mount_company_profile
Avatar for mount inc. mount_inc
0
5.5k
2026年の勢い / Momentum for 2026
Avatar for bebe bebe
0
390
「ツール」から「パートナー」へ。AI伴走時代のUXデザインとは？～操作を減らし、成果を最大にするための設計～
Avatar for NCDC ncdc
1
220
2026_01_07_３DプリントはじめましたLT.pdf
Avatar for HideakiTakechi hideakitakechi
0
120
AIスライドデザインを生成する仕組みを社内共有する
Avatar for 太田賢一 kenichiota0711
6
4.8k
結びながら、ひらく - にじむ境界のデザイン
Avatar for Hiroki Tani hilokifigma
3
1.5k

Featured

See All Featured
Between Models and Reality
Avatar for mayunak mayunak
2
230
Refactoring Trust on Your Teams (GOTO; Chicago 2020)
Avatar for Rebecca Miller-Webster rmw
35
3.4k
BBQ
Avatar for Matthew Crist matthewcrist
89
10k
Done Done
Avatar for chrislema chrislema
186
16k
JAMstack: Web Apps at Ludicrous Speed - All Things Open 2022
Avatar for David Neal reverentgeek
1
380
How to build a perfect <img>
Avatar for Jono Alderson jonoalderson
1
5.2k
How to build an LLM SEO readiness audit: a practical framework
Avatar for Nick Samuel nmsamuel
1
660
Designing Powerful Visuals for Engaging Learning
Avatar for Mike Taylor tmiket
0
260
Become a Pro
Avatar for Speaker Deck speakerdeck
PRO
31
5.8k
Accessibility Awareness
Avatar for Sarah Abderemane sabderemane
0
73
The Art of Delivering Value - GDevCon NA Keynote
Avatar for David Neal reverentgeek
16
1.9k
The Straight Up "How To Draw Better" Workshop
Avatar for Dennis Kardys denniskardys
239
140k

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?