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

Designing on the Z-Axis

Wren Lanier
September 19, 2014
Design
2
570

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
55
Secret Sauce: Designing on the Z-Axis (ConvergeFL 2013)
heywren
0
150
Designing Immersive Mobile Experiences - ConvergeSE 2013
heywren
0
270

Other Decks in Design

See All in Design
FANCL×CA流アプリリニューアルPJ 成功の秘訣とそのプロセス / dx-fancl-renewal
cyberagentdevelopers
PRO
2
470
Webデザイナーが押さえておきたいエンジニアとの連携ポイント
448jp
0
570
今日から始める グラレコ チャレンジ　DevRel/Tokyo #94 〜グラレコ チャレンジ〜
moshimoshiyuki
0
140
若手デザイナーチームが手がける CADC2024クリエイティブディレクションの全貌 / opening-design
cyberagentdevelopers
PRO
1
1k
シームレスな連携を実現するデザイントークンの設計と構築
amishiratori
0
410
Bridging the Design Gap: How Collaborative Modelling removes blockers to flow between stakeholders and teams @FastFlow conf
baasie
0
170
エンタメ業界からDX領域に飛び込んだデザイナーが今立ち向かっている壁とは / applibot-dx-designer
cyberagentdevelopers
PRO
1
120
Dive Deep into Communication
yomtsu
0
110
Money Forward UIの紹介 / Introducing Money Forward UI
taigakiyokawa
1
2.6k
「ちょっといいUI」を目指す努力 / Striving for Little Big Details
usagimaru
6
3.9k
一人ひとりのポテンシャルを活かしたナレッジマネジメントとは？
atsushihomma
0
300
Webフォント選定の極意！フォントの基本から最新トレンドまで徹底解説
takanorip
5
720

Featured

See All Featured
How STYLIGHT went responsive
nonsquared
95
5.2k
Automating Front-end Workflow
addyosmani
1366
200k
[RailsConf 2023] Rails as a piece of cake
palkan
53
5k
Build your cross-platform service in a week with App Engine
jlugia
229
18k
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
stephaniewalter
280
13k
Designing for humans not robots
tammielis
250
25k
How to Ace a Technical Interview
jacobian
276
23k
Side Projects
sachag
452
42k
The Art of Programming - Codeland 2020
erikaheidi
53
13k
Statistics for Hackers
jakevdp
796
220k
Thoughts on Productivity
jonyablonski
67
4.4k
Practical Tips for Bootstrapping Information Extraction Pipelines
honnibal
PRO
10
810

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?