Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
Designing on the Z-Axis
Search
Wren Lanier
September 19, 2014
Design
2
590
Designing on the Z-Axis
Wren Lanier
September 19, 2014
Tweet
Share
More Decks by Wren Lanier
See All by Wren Lanier
Developing a Lean UX Practice
heywren
0
56
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
「デザイン」を信じるには
iflection
0
260
Tools for Design Engineers other than LLM in the LLM era
takanorip
1
130
私とデザインの10年
iflection
0
130
“ブロック”で作る、WordPress制作フロー変革のすすめ
koots2021
4
1.8k
クライアントワークにおける UXリサーチの実践
kozotaira
0
680
ビジネス成果を最大限に発揮するPORTFOLIO
ataxi1003
0
190
Goodpatch Tour💙 / We are hiring!
goodpatch
31
860k
パンくずリストかわいい(breadcrumb so cute)
ysuda
0
270
PF_濵村ひろみ_202503
maru_design78
0
170
sachi_y_portfolio
sachi337
0
250
Hatena Engineer Seminar #33 チームと開発するためのモック
takuwolog
0
320
Cyber Heart Online Book
hjnasby
0
110
Featured
See All Featured
jQuery: Nuts, Bolts and Bling
dougneiner
63
7.8k
The Web Performance Landscape in 2024 [PerfNow 2024]
tammyeverts
8
670
Large-scale JavaScript Application Architecture
addyosmani
512
110k
Code Reviewing Like a Champion
maltzj
524
40k
What's in a price? How to price your products and services
michaelherold
246
12k
Balancing Empowerment & Direction
lara
1
360
Practical Orchestrator
shlominoach
188
11k
Producing Creativity
orderedlist
PRO
346
40k
Building an army of robots
kneath
306
45k
Build your cross-platform service in a week with App Engine
jlugia
231
18k
Making the Leap to Tech Lead
cromwellryan
134
9.3k
Bootstrapping a Software Product
garrettdimon
PRO
307
110k
Transcript
DESIGNING WREN LANIER ON THE Z-AXIS @heywren
None
omg
None
photo credit:
We’re not designing pages, we’re designing systems of components. —Stephen
Hay “ ”
None
LAYERS
TRANSITIONS
None
LAYERS Everything in its place
X photo credit:
photo credit:
None
None
None
None
None
None
None
None
None
None
photo credit: Each layer should have a purpose
photo credit: Layers should reflect information hierarchy—most important on
top
photo credit: Don’t forget layers can move independently in
space or time
TRANSITIONS Connect layers together
photo credit:
None
Soften moments of change Describe where you are now Provide
context cues
None
None
None
None
None
None
None
None
photo credit: Don’t make users brains do “in-betweening”
photo credit: Use transitions to teach app behavior
photo credit: Subtle motions are often the most powerful
Awesome library of mobile transitions CAPPTIVATE.CO
Prototype before you build A few tools you might find
useful
None
InVision App SOURCE
thoughtbrain.com SOURCE
+
image credit:
None
Why does the z-axis matter? It points the way towards
the future
None
The future isn’t flat
http://wrenlanier.com @heywren Questions?