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
590

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
56
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
270

Other Decks in Design

See All in Design
「デザイン」を信じるには
Avatar for なつ iflection
0
260
Tools for Design Engineers other than LLM in the LLM era
Avatar for takanorip takanorip
1
130
私とデザインの10年
Avatar for なつ iflection
0
130
“ブロック”で作る、WordPress制作フロー変革のすすめ
Avatar for Koots koots2021
4
1.8k
クライアントワークにおける UXリサーチの実践
Avatar for Kozo Taira kozotaira
0
680
ビジネス成果を最大限に発揮するPORTFOLIO
Avatar for 新井拓海 ataxi1003
0
190
Goodpatch Tour💙 / We are hiring!
Avatar for Goodpatch Inc. goodpatch
31
860k
パンくずリストかわいい(breadcrumb so cute)
Avatar for Ysuda ysuda
0
270
PF_濵村ひろみ_202503
Avatar for 濱村ひろみ maru_design78
0
170
sachi_y_portfolio
Avatar for Sachi sachi337
0
250
Hatena Engineer Seminar #33 チームと開発するためのモック
Avatar for takuwolog takuwolog
0
320
Cyber Heart Online Book
Avatar for Hannah hjnasby
0
110

Featured

See All Featured
jQuery: Nuts, Bolts and Bling
Avatar for Doug Neiner dougneiner
63
7.8k
The Web Performance Landscape in 2024 [PerfNow 2024]
Avatar for Tammy Everts tammyeverts
8
670
Large-scale JavaScript Application Architecture
Avatar for Addy Osmani addyosmani
512
110k
Code Reviewing Like a Champion
Avatar for maltzj maltzj
524
40k
What's in a price? How to price your products and services
Avatar for Michael Herold michaelherold
246
12k
Balancing Empowerment & Direction
Avatar for Lara Hogan lara
1
360
Practical Orchestrator
Avatar for Shlomi Noach shlominoach
188
11k
Producing Creativity
Avatar for Steve Smith orderedlist
PRO
346
40k
Building an army of robots
Avatar for Kyle Neath kneath
306
45k
Build your cross-platform service in a week with App Engine
Avatar for Jose L jlugia
231
18k
Making the Leap to Tech Lead
Avatar for Ryan Cromwell cromwellryan
134
9.3k
Bootstrapping a Software Product
Avatar for Garrett Dimon garrettdimon
PRO
307
110k

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?