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
620

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
61
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
OJTで学んだ 「心を動かす」ファシリテーション
Avatar for さき saki822
1
200
アイデアを加速させる！Firefly ボードで発想の幅を広げよう
Avatar for コネクリ connecre
1
250
Correspondence：共に生成していく過程
Avatar for Akira Motomura akiramotomura
0
170
Installing and Running decksh/pdfdeck
Avatar for Anthony Starks ajstarks
1
910
Vibe Coding デザインシステム
Avatar for poteboy poteboy
3
1.6k
デザインを信じていますか
Avatar for sekig(ojiee) sekiguchiy
1
750
maki setoguchi
Avatar for Maki / Web Designer maki_setoguchi
0
610
体験を守るためのデザイン計測
Avatar for PERSOL CAREER Dev | techtekt techtekt
PRO
0
160
Findyのプロデチームの 歩みとこれから
Avatar for Satty satty9556
0
370
デザイナーがAIを使い倒して爆速プロダクト開発！社内ハッカソンでの取り組み紹介
Avatar for 都村　美帆 abokadotyann
9
2.8k
SAMSUL KAMAR ABDUL RAHMAN
Avatar for SAMSUL RAHMAN samsulrahman32
0
200
アクセシビリティ推進を続けられるようにするヒント - Accessibility Conference CHIBA 2025
Avatar for uto usui uto
0
140

Featured

See All Featured
Have SEOs Ruined the Internet? - User Awareness of SEO in 2025
Avatar for Akash Hashmi akashhashmi
0
210
16th Malabo Montpellier Forum Presentation
Avatar for AKADEMIYA2063 akademiya2063
PRO
0
32
Fireside Chat
Avatar for paigeccino paigeccino
41
3.8k
The Organizational Zoo: Understanding Human Behavior Agility Through Metaphoric Constructive Conversations (based on the works of Arthur Shelley, Ph.D)
Avatar for Dr. Kim W Petersen kimpetersen
PRO
0
210
Practical Orchestrator
Avatar for Shlomi Noach shlominoach
190
11k
Helping Users Find Their Own Way: Creating Modern Search Experiences
Avatar for Dan Newman danielanewman
31
3k
Mobile First: as difficult as doing things right
Avatar for Swwweet swwweet
225
10k
How to build a perfect <img>
Avatar for Jono Alderson jonoalderson
0
4.8k
Chasing Engaging Ingredients in Design
Avatar for Sebastian Deterding codingconduct
0
92
Reality Check: Gamification 10 Years Later
Avatar for Sebastian Deterding codingconduct
0
2k
What Being in a Rock Band Can Teach Us About Real World SEO
Avatar for Ade Holder 427marketing
0
150
Darren the Foodie - Storyboard
Avatar for Kevinho.art khoart
PRO
0
2k

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?