Upgrade to PRO for Only $50/Year—Limited-Time Offer! 🔥

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
株式会社ログラス - 会社説明資料【デザイナー】/ Loglass Designer
Avatar for 株式会社ログラス loglass2019
1
5.7k
mount_company_profile
Avatar for mount inc. mount_inc
0
3.9k
デザイナーがはばたく未来の入り口『hatch』が描く、新しいデザイナー育成のカタチ
Avatar for Goodpatch Inc. goodpatch
3
2.8k
BXデザイン組織が挑んだスクラム 〜ブランドを育み、デザイナーを解放する変革の物語〜（Scrum Fest Mikawa 2025）
Avatar for Tadashi Inoue tadashiinoue
0
960
「キャリア」のプロダクトをつくる私の「キャリア」への向き合い方 / JAM de NIGHT DESIGN SESSION Vol3
Avatar for Visional Engineering ＆ Design visional_engineering_and_design
1
920
What makes a great Director?
Avatar for _Limex_ _limex_
0
350
チームで事業価値を生み出す、プロアクティブなデザイナーになるための道のり/ Designship2025_Naya
Avatar for 株式会社ルート root_recruit
0
330
「稼ぐ」だけでなく 「還す」ためのデザイン / Designship2025
Avatar for インクルーシブデザインスタジオCULUMU culumu
1
520
kintone_aroma
Avatar for kintone kintone
0
1k
Portfolio 齋藤明敏 Hiroyuki Saito
Avatar for HIROYUKI SAITO crearedesign
0
130
【Designship 2025｜10.11】デザイン組織と事業貢献、その挑戦と結果。
Avatar for payatsun payatsusan213
1
840
decksh object reference
Avatar for Anthony Starks ajstarks
2
1.5k

Featured

See All Featured
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
Avatar for Marc Duiker marcduiker
35
2.3k
Let's Do A Bunch of Simple Stuff to Make Websites Faster
Avatar for Chris Coyier chriscoyier
508
140k
StorybookのUI Testing Handbookを読んだ
Avatar for Shingo Yamazaki zakiyama
31
6.5k
[Rails World 2023 - Day 1 Closing Keynote] - The Magic of Rails
Avatar for Eileen M. Uchitelle eileencodes
37
2.7k
Sharpening the Axe: The Primacy of Toolmaking
Avatar for Bryan Cantrill bcantrill
46
2.6k
Testing 201, or: Great Expectations
Avatar for Joseph Mastey jmmastey
46
7.8k
What’s in a name? Adding method to the madness
Avatar for Product Marketing Alliance productmarketing
PRO
24
3.8k
Fight the Zombie Pattern Library - RWD Summit 2016
Avatar for Marcelo Somers marcelosomers
234
17k
Docker and Python
Avatar for Tania Allard trallard
47
3.7k
Understanding Cognitive Biases in Performance Measurement
Avatar for Philip Tellis bluesmoon
32
2.8k
Designing Experiences People Love
Avatar for Jonathan Moore moore
143
24k
Code Reviewing Like a Champion
Avatar for maltzj maltzj
527
40k

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?