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
610

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
59
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 佐藤千晶 chimi_chia
0
250
見栄えと使いやすさの先にある 特別感 をデザインする / Designing a Sense of Specialness Beyond Aesthetics and Usability
Avatar for 株式会社ビットキー / Bitkey Inc. bitkey
PRO
0
140
ユーザー像を「みてね」らしく可視化する　家族アルバムみてねUXリサーチチームの取り組み
Avatar for MIXI DESIGN mixi_design
PRO
2
290
The Spectacular Lies of Maps
Avatar for Per Axbom axbom
PRO
1
330
1年目デザイナーが実践する、チーム貢献のための2つのアプローチ
Avatar for kinomi kinomidesign
0
130
root COMPANY DECK / We are hiring！
Avatar for 株式会社ルート root_recruit
PRO
1
24k
デザイナーがはばたく未来の入り口『hatch』が描く、新しいデザイナー育成のカタチ
Avatar for Goodpatch Inc. goodpatch
3
2.3k
逆向きUIの世界 〜iOSアプリのRTL言語対応〜
Avatar for akatsuki174 akatsuki174
1
290
AI時代に問われる、リサーチの感受性──地域⇄大企業の現場から見えた「違和感」との向き合い方
Avatar for Muture muture
PRO
0
140
kintone_aroma
Avatar for kintone kintone
0
490
mento Design Team Portfolio
Avatar for mento _official mento0fficial
1
980
ドルちゃん
Avatar for ドルちゃん design_dolphins
0
450

Featured

See All Featured
Distributed Sagas: A Protocol for Coordinating Microservices
Avatar for Caitie McCaffrey caitiem20
333
22k
4 Signs Your Business is Dying
Avatar for Josh Pigford shpigford
186
22k
RailsConf 2023
Avatar for Aaron Patterson tenderlove
30
1.3k
ReactJS: Keep Simple. Everything can be a component!
Avatar for Pedro Nauck pedronauck
666
130k
For a Future-Friendly Web
Avatar for Brad Frost brad_frost
180
10k
We Have a Design System, Now What?
Avatar for Morgane Peng morganepeng
54
7.9k
Testing 201, or: Great Expectations
Avatar for Joseph Mastey jmmastey
46
7.7k
Balancing Empowerment & Direction
Avatar for Lara Hogan lara
5
710
Bootstrapping a Software Product
Avatar for Garrett Dimon garrettdimon
PRO
307
110k
YesSQL, Process and Tooling at Scale
Avatar for Rocio Delgado rocio
174
15k
Building Better People: How to give real-time feedback that sticks.
Avatar for Will Jessup wjessup
370
20k
A designer walks into a library…
Avatar for Paul Jervis Heath pauljervisheath
209
24k

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?