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
600

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
58
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
Light My Fire/ハートに火をつけるコミュニティ
Avatar for kgsi kgsi
1
150
教育分野に強いUIデザイナー / 山口哲弘ポートフォリオ
Avatar for 山口哲弘 t2yamaguchi429
0
690
AIで加速するアクセシビリティのこれから
Avatar for Rikiya Ihara / magi magi1125
3
640
Tools for Design Engineers other than LLM in the LLM era
Avatar for takanorip takanorip
1
430
なぜプレイドにデザインエンジニアが必要だったのか？
Avatar for t32k t32k
0
620
オルタナUX | AIで高速化するのもいいけど品質も大事なんじゃない？というお話
Avatar for なつ iflection
6
2k
minpaku-community-scrum-patterns
Avatar for Noriaki Kawanishi norinity1103
1
240
Crisp Code inc. ブランドガイドライン
Avatar for So Kotani / Crisp Code inc. CEO so_kotani
1
200
株式会社バクタム　会社説明資料
Avatar for Bactum Inc. bactum
0
290
CursorでAI活用のナレッジベースを構築する
Avatar for 神崎 kanzaki
0
610
組織で取り組むアクセシビリティのはじめ方
Avatar for cawpea masakiohsumi
0
170
“ブロック”で作る、WordPress制作フロー変革のすすめ
Avatar for Koots koots2021
4
1.9k

Featured

See All Featured
4 Signs Your Business is Dying
Avatar for Josh Pigford shpigford
184
22k
The Straight Up "How To Draw Better" Workshop
Avatar for Dennis Kardys denniskardys
236
140k
Scaling GitHub
Avatar for Zach Holman holman
462
140k
[RailsConf 2023] Rails as a piece of cake
Avatar for Vladimir Dementyev palkan
56
5.8k
The Invisible Side of Design
Avatar for Vitaly Friedman smashingmag
301
51k
Java REST API Framework Comparison - PWX 2021
Avatar for Matt Raible mraible
33
8.8k
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
Avatar for panda_program panda_program
110
20k
Docker and Python
Avatar for Tania Allard trallard
45
3.5k
How STYLIGHT went responsive
Avatar for nonsquared nonsquared
100
5.7k
How to Create Impact in a Changing Tech Landscape [PerfNow 2023]
Avatar for Tammy Everts tammyeverts
53
2.9k
The Psychology of Web Performance [Beyond Tellerrand 2023]
Avatar for Tammy Everts tammyeverts
49
3k
Git: the NoSQL Database
Avatar for Brandon Keepers bkeepers
PRO
431
65k

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?