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

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
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
Basket_of_love.pdf
Avatar for Terence Basart terencebasart
0
330
test deck title
Avatar for Shota Matsuo shotamatsuo
0
1.6k
富山デザイン勉強会_生成AIを使ったデザイン制作2026最新版.pdf
Avatar for keita keita_yoshikawa
0
110
root COMPANY DECK / We are hiring！
Avatar for 株式会社ルート root_recruit
4
30k
【CEDEC2026】『Shadowverse: Worlds Beyond』続編開発におけるUIデザイン・アニメーション演出の「超進化」 ～継承と挑戦を両立するデザイン手法～
Avatar for Cygames, Inc. cygames
PRO
4
5.3k
「おすすめ」はなぜ信用されないのか - 信頼を築くUI/UX設計
Avatar for ryu ryu1013
0
320
なぜ、インサイトを貯めるのか？
Avatar for 田島佳穂 tajima_kaho
3
2.8k
Luna's Light
Avatar for Sheena shemeetscity
0
150
デザイナーの判断をAIにつなぐ ── 審美眼をハーネスする試み
Avatar for Kota SAITO kotasaito_cnt
0
970
RawrXD: The Sword
Avatar for Sean Natarajan seanvraj_arts
0
140
The ISO 25964 standard on Information and documentation — Thesauri and interoperability with other vocabularies
Avatar for AccessInnovations accessinnovations
0
190
HeartLanguage - DesignProcess
Avatar for HeartLanguage heartlanguage
0
150

Featured

See All Featured
Marketing Yourself as an Engineer | Alaka | Gurzu
Avatar for Gurzu gurzu
0
310
Crafting Experiences
Avatar for Bethany Jepchumba bethany
1
360
Site-Speed That Sticks
Avatar for Harry Roberts csswizardry
13
1.5k
Bioeconomy Workshop: Dr. Julius Ecuru, Opportunities for a Bioeconomy in West Africa
Avatar for AKADEMIYA2063 akademiya2063
PRO
1
370
The Curse of the Amulet
Avatar for Matthew Lei leimatthew05
3
15k
コードの90%をAIが書く世界で何が待っているのか / What awaits us in a world where 90% of the code is written by AI
Avatar for r-kagaya rkaga
63
46k
Redefining SEO in the New Era of Traffic Generation
Avatar for Szymon Słowik szymonslowik
1
450
Music & Morning Musume
Avatar for Bryan Veloso bryan
48
7.4k
Agile Actions for Facilitating Distributed Teams - ADO2019
Avatar for Mark Kilby mkilby
0
290
Navigating the moral maze — ethical principles for Al-driven product design
Avatar for Skipper Chong Warson skipperchong
2
580
Mind Mapping
Avatar for Hélio Medeiros helmedeiros
1
370
Being A Developer After 40
Avatar for Adrian Kosmaczewski akosma
91
590k

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?