Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Designing on the Z-Axis

Wren Lanier
September 19, 2014
Design
2
550

Designing on the Z-Axis

Wren Lanier

September 19, 2014
Tweet

More Decks by Wren Lanier

See All by Wren Lanier
Developing a Lean UX Practice
heywren
0
53
Secret Sauce: Designing on the Z-Axis (ConvergeFL 2013)
heywren
0
140
Designing Immersive Mobile Experiences - ConvergeSE 2013
heywren
0
270

Other Decks in Design

See All in Design
2024デザすぷVol.4 新年会/ Design Sprout Bar vol-4
root_recruit
1
310
データ活用に強い、伴走型デザインパートナー「DeC」紹介資料
hopin
0
180
noteのアクセシビリティ　これまでのプロダクト・組織へのアプローチとこれからのこと
tatsuyasawanobori
1
1k
root Design Partnership Policy
root_recruit
0
3.9k
デザインをみんなのものに　「デザインの脱植民地化」を日本の文脈で考える
mayunak
7
4.1k
TrollsTopia: Funtography- Part 1
kenijam
1
210
Crafting Blog covers: 
AI tools vs Human Illustrators. Who is the winner?
strongeron
0
130
デザイン組織の一人目マネージャーが啜る泥水と美味しいビールに向けてTRYすること
ryoya_frst
0
180
モデル・デザイン入門
akitsugu7935
0
460
20231122_Design Leader Impact Award_Presentation_FAKE Okazaki
okazakityo
1
240
全社を巻き込んだコーポレートバリューの再定義に関するデザイナーの関わり方
sugiyama_sukedachi
0
170
デザイナーの帽子をかぶったわたしが、プロダクト開発するうえでスクラムチームに提供したいこと / what I want to provide to Scrum teams when developing products
hiromitsuuuuu
14
4.8k

Featured

See All Featured
How to Ace a Technical Interview
jacobian
272
22k
No one is an island. Learnings from fostering a developers community.
thoeni
14
2.1k
Stop Working from a Prison Cell
hatefulcrawdad
266
19k
Refactoring Trust on Your Teams (GOTO; Chicago 2020)
rmw
24
2.3k
Raft: Consensus for Rubyists
vanstee
132
6.2k
What's in a price? How to price your products and services
michaelherold
237
11k
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
smashingmag
243
20k
The Illustrated Children's Guide to Kubernetes
chrisshort
29
46k
The Pragmatic Product Professional
lauravandoore
24
5.8k
Teambox: Starting and Learning
jrom
128
8.4k
Building Better People: How to give real-time feedback that sticks.
wjessup
354
18k
The Invisible Customer
myddelton
114
12k

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?