We are the makers of things
Designing Without the Browser
27 May, 2011 • Hannah Donovan
My name is Hannah,
My name is Hannah,
Last.fm Kinect
Last.fm Kinect
Last.fm Kinect
Last.fm Kinect
Why was it hard?
!"#"$%&'%(%)*$+
,*-.&/".+*$(0&'%(%)*$+
/*1-0(.&'%(%)*$+ 2(3&'%(%)*$+
,*-.&/".+*$(0&'%(%)*$+
45(6"7&!(8)*45(6"7&!(8)* 45(6"7&!(8)*
9(+%:;6&<)$"#%
9)=.(.>&!(8)*?)@&!(8)*
!"#*66"$8"8&!(8)*
/*1-0(.&'%(%)*$+
,*-.&/".+*$(0&'%(%)*$+
A.%)+%&!(8)*
9(+%:;6&<)$"#%
9(+%:;6&<)$"#%
2(3&'%(%)*$+
9(+%:;6&<)$"#%
A.%)+%&!(8)*A.%)+%&!(8)*
A.%)+%&!(8)*A.%)+%&!(8)*
A.%)+%&!(8)*
A.%)+%A.%)+% A.%)+%
)#*$)#*$
)#*$
B=*@&<)$"#%&5(C)3(%)*$'"0"#%)$3&+%(%)*$+
D*$%.*0+E&F+".&+"0"#%+&(&%)0"&=>&GH*08)$3I&%H").&H($8
'%(%"+E&/".+*$(0&+%(%)*$+&J)00&="&"61%>&K($8&$""8&(&H"01&+#.""$L&-$%)0&%H"&-+".&H(+&0)+%"$"8&%*&@&%.(#M+N&1-00&."#"$%&+%(%)*$+&;.*6&-+".O+&9P?&H)+%*.>:
'"0"#%)$3&%H"+"&+%(.%+%H"&+%()*$N&."Q-)."+
10(>&)#*$
'"0"#%)$3&%H"+"*1"$&(&G;*08".I
K+H*-08&$*%&H(C"&(&10(>&)#*$L
Flexibility today
Increasingly, the medium we’re designing for is not the browser.
And these mediums are (at the moment) are less flexible to work with.
Flexibility today
The plateau of profitability
Gartner’s Hype Cycle (image from BERG’s ‘Mining the Trough of Disillusionment’)
Flexibility today
The plateau of profitability
Gartner’s Hype Cycle (image from BERG’s ‘Mining the Trough of Disillusionment’)
= flexibility
Photo credit: Jeffrey Beall
But what aboutlunch?
The story of the shark
Hong Kong
The story of the shark
Hong Kong
From ‘The Art of Finding Nemo” by Mark Cotta Vaz (Pixar)
!"#"$%&'%(%)*$+
,*-.&/".+*$(0&'%(%)*$+
/*1-0(.&'%(%)*$+ 2(3&'%(%)*$+
,*-.&/".+*$(0&'%(%)*$+
45(6"7&!(8)*45(6"7&!(8)* 45(6"7&!(8)*
9(+%:;6&<)$"#%
9)=.(.>&!(8)*?)@&!(8)*
!"#*66"$8"8&!(8)*
/*1-0(.&'%(%)*$+
,*-.&/".+*$(0&'%(%)*$+
A.%)+%&!(8)*
9(+%:;6&<)$"#%
9(+%:;6&<)$"#%
2(3&'%(%)*$+
9(+%:;6&<)$"#%
A.%)+%&!(8)*A.%)+%&!(8)*
A.%)+%&!(8)*A.%)+%&!(8)*
A.%)+%&!(8)*
A.%)+%A.%)+% A.%)+%
)#*$)#*$
)#*$
B=*@&<)$"#%&5(C)3(%)*$'"0"#%)$3&+%(%)*$+
D*$%.*0+E&F+".&+"0"#%+&(&%)0"&=>&GH*08)$3I&%H").&H($8
'%(%"+E&/".+*$(0&+%(%)*$+&J)00&="&"61%>&K($8&$""8&(&H"01&+#.""$L&-$%)0&%H"&-+".&H(+&0)+%"$"8&%*&@&%.(#M+N&1-00&."#"$%&+%(%)*$+&;.*6&-+".O+&9P?&H)+%*.>:
'"0"#%)$3&%H"+"&+%(.%+%H"&+%()*$N&."Q-)."+
10(>&)#*$
'"0"#%)$3&%H"+"*1"$&(&G;*08".I
K+H*-08&$*%&H(C"&(&10(>&)#*$L
The story of the shark
Shark vs. my Kinect drawings?
!"#"$%&'%(%)*$+
,*-.&/".+*$(0&'%(%)*$+
/*1-0(.&'%(%)*$+ 2(3&'%(%)*$+
,*-.&/".+*$(0&'%(%)*$+
45(6"7&!(8)*45(6"7&!(8)* 45(6"7&!(8)*
9(+%:;6&<)$"#%
9)=.(.>&!(8)*?)@&!(8)*
!"#*66"$8"8&!(8)*
/*1-0(.&'%(%)*$+
,*-.&/".+*$(0&'%(%)*$+
A.%)+%&!(8)*
9(+%:;6&<)$"#%
9(+%:;6&<)$"#%
2(3&'%(%)*$+
9(+%:;6&<)$"#%
A.%)+%&!(8)*A.%)+%&!(8)*
A.%)+%&!(8)*A.%)+%&!(8)*
A.%)+%&!(8)*
A.%)+%A.%)+% A.%)+%
)#*$)#*$
)#*$
B=*@&<)$"#%&5(C)3(%)*$'"0"#%)$3&+%(%)*$+
D*$%.*0+E&F+".&+"0"#%+&(&%)0"&=>&GH*08)$3I&%H").&H($8
'%(%"+E&/".+*$(0&+%(%)*$+&J)00&="&"61%>&K($8&$""8&(&H"01&+#.""$L&-$%)0&%H"&-+".&H(+&0)+%"$"8&%*&@&%.(#M+N&1-00&."#"$%&+%(%)*$+&;.*6&-+".O+&9P?&H)+%*.>:
'"0"#%)$3&%H"+"&+%(.%+%H"&+%()*$N&."Q-)."+
10(>&)#*$
'"0"#%)$3&%H"+"*1"$&(&G;*08".I
K+H*-08&$*%&H(C"&(&10(>&)#*$L
The story of the shark
Shark vs. my Kinect drawings?
!"#"$%&'%(%)*$+
,*-.&/".+*$(0&'%(%)*$+
/*1-0(.&'%(%)*$+ 2(3&'%(%)*$+
,*-.&/".+*$(0&'%(%)*$+
45(6"7&!(8)*45(6"7&!(8)* 45(6"7&!(8)*
9(+%:;6&<)$"#%
9)=.(.>&!(8)*?)@&!(8)*
!"#*66"$8"8&!(8)*
/*1-0(.&'%(%)*$+
,*-.&/".+*$(0&'%(%)*$+
A.%)+%&!(8)*
9(+%:;6&<)$"#%
9(+%:;6&<)$"#%
2(3&'%(%)*$+
9(+%:;6&<)$"#%
A.%)+%&!(8)*A.%)+%&!(8)*
A.%)+%&!(8)*A.%)+%&!(8)*
A.%)+%&!(8)*
A.%)+%A.%)+% A.%)+%
)#*$)#*$
)#*$
B=*@&<)$"#%&5(C)3(%)*$'"0"#%)$3&+%(%)*$+
D*$%.*0+E&F+".&+"0"#%+&(&%)0"&=>&GH*08)$3I&%H").&H($8
'%(%"+E&/".+*$(0&+%(%)*$+&J)00&="&"61%>&K($8&$""8&(&H"01&+#.""$L&-$%)0&%H"&-+".&H(+&0)+%"$"8&%*&@&%.(#M+N&1-00&."#"$%&+%(%)*$+&;.*6&-+".O+&9P?&H)+%*.>:
'"0"#%)$3&%H"+"&+%(.%+%H"&+%()*$N&."Q-)."+
10(>&)#*$
'"0"#%)$3&%H"+"*1"$&(&G;*08".I
K+H*-08&$*%&H(C"&(&10(>&)#*$L
The story of the shark
Shark vs. my Kinect drawings?
SHARK WINS. GAME OVER.
The story of the shark
Why does the shark win?
The story of the shark
Why does the shark win?
Why doesn’t the shark win? It’s a fucking shark.
The story of the shark
Why does the shark win?
Why doesn’t the shark win? It’s a fucking shark.
What’s our equivalent of the 3/4 view?
Open question:
Our toolkit
If you grew up in flatland, you had a very ill-equipped toolkit.
So we’ve spent the last 10 years levelling up.
Our toolkit
The toolkit of our future needs to be able to communicate things like:
• physical space
• context
• scale
• timing
And it’s going to be awesome.
Our toolkit
It’s time to look in our Ramona Bags.
Excerpt from “Scrott Pilgrim vs. The World”
Our toolkit
It’s time to look in our Ramona Bags.
Excerpt from “Scrott Pilgrim vs. The World”
Our toolkit
InvestigationInspired by: animation, architecture & industrial design
Investigation | The talented observer
Observation, or “just go look”
Investigation | The talented observer
Observation, or “just go look”
From ‘The Animator’s Survival Kit’ by Richard Williams
Investigation | The talented observer
Stills from the DVD commentary on “Up”
Investigation | The talented observer
Even if there’s nothing to look at, there’s always something to see.
Investigation | The talented observer
Even if there’s nothing to look at, there’s always something to see.
Investigation | Sketching, a conversation in…
Sketch with whatever you’ve got in your studio.
(So keep fun things lying around).
Investigation | Sketching, a conversation in…
“Sketching is not putting pen to paper, it’s the mindset you do it in” — Bill Buxton
Sketch for ‘Valley of the Wind’ building by Benny Lee, Bread Studio
CommunicationInspired by: Industrial design, 3D animation & architecture
Communication | The art of concept drawing
Concept drawing; leaving just enough “holes”.
Your Recommended Lineup (show complete lineup)Email Print
PavementYour stats: 500 scrobbles, discovered 12 May 2009You’ve seen this artist 8 times
Broken Social SceneYour stats: 400 scrobbles, discovered 14 June 2006
Pierced ArrowsYour stats: 320 scrobbles, discovered 20 Feb 2008You’ve seen this artist 1 time
The CleanYour stats: 215 scrobbles, discovered 3 Jan 1020
Camera ObscuraYour stats: 98 scrobbles, discovered 10 May 2009
Don’t Miss:
You might also like:
ShareThe WalkmenTags: indie, folk, indie rock, indietronicaSimilar to: French Kicks, Jonathan Fire*Eater, Spoon, White Rabbits
The Walkmen is an American indie rock band, with members based in New York City and Philadelphia. Read more…
Mobile phone concept drawing from “Drawing for Designers” by Alan Pipes
Communication | The art of concept drawing
Concept drawing; leaving just enough “holes”.
Your Recommended Lineup (show complete lineup)Email Print
PavementYour stats: 500 scrobbles, discovered 12 May 2009You’ve seen this artist 8 times
Broken Social SceneYour stats: 400 scrobbles, discovered 14 June 2006
Pierced ArrowsYour stats: 320 scrobbles, discovered 20 Feb 2008You’ve seen this artist 1 time
The CleanYour stats: 215 scrobbles, discovered 3 Jan 1020
Camera ObscuraYour stats: 98 scrobbles, discovered 10 May 2009
Don’t Miss:
You might also like:
ShareThe WalkmenTags: indie, folk, indie rock, indietronicaSimilar to: French Kicks, Jonathan Fire*Eater, Spoon, White Rabbits
The Walkmen is an American indie rock band, with members based in New York City and Philadelphia. Read more…
Mobile phone concept drawing from “Drawing for Designers” by Alan Pipes
Communication | The art of concept drawing
Concept drawing; leaving just enough “holes”.
Your Recommended Lineup (show complete lineup)Email Print
PavementYour stats: 500 scrobbles, discovered 12 May 2009You’ve seen this artist 8 times
Broken Social SceneYour stats: 400 scrobbles, discovered 14 June 2006
Pierced ArrowsYour stats: 320 scrobbles, discovered 20 Feb 2008You’ve seen this artist 1 time
The CleanYour stats: 215 scrobbles, discovered 3 Jan 1020
Camera ObscuraYour stats: 98 scrobbles, discovered 10 May 2009
Don’t Miss:
You might also like:
ShareThe WalkmenTags: indie, folk, indie rock, indietronicaSimilar to: French Kicks, Jonathan Fire*Eater, Spoon, White Rabbits
The Walkmen is an American indie rock band, with members based in New York City and Philadelphia. Read more…
Mobile phone concept drawing from “Drawing for Designers” by Alan PipesDrawing by Spencer Nugent, www.spencernugent.com
Communication | The art of concept drawing
Concept drawing; leaving just enough “holes”.
Your Recommended Lineup (show complete lineup)Email Print
PavementYour stats: 500 scrobbles, discovered 12 May 2009You’ve seen this artist 8 times
Broken Social SceneYour stats: 400 scrobbles, discovered 14 June 2006
Pierced ArrowsYour stats: 320 scrobbles, discovered 20 Feb 2008You’ve seen this artist 1 time
The CleanYour stats: 215 scrobbles, discovered 3 Jan 1020
Camera ObscuraYour stats: 98 scrobbles, discovered 10 May 2009
Don’t Miss:
You might also like:
ShareThe WalkmenTags: indie, folk, indie rock, indietronicaSimilar to: French Kicks, Jonathan Fire*Eater, Spoon, White Rabbits
The Walkmen is an American indie rock band, with members based in New York City and Philadelphia. Read more…
Mobile phone concept drawing from “Drawing for Designers” by Alan PipesDrawing by Spencer Nugent, www.spencernugent.com
Communication | The art of concept drawing
Focus on the important parts; create rich stories around them.
Architectural concept by Benny Lee, Bread Studio
Communication | The art of concept drawing
Focus on the important parts; create rich stories around them.
Architectural concept by Benny Lee, Bread StudioDrawing by Oscar Tusquets Blanca from “Drawing for Designers” by Alan Pipes
Communication | Technical drawings for all
Wireframes are our technical drawings, but what are they exactly?
Communication | Technical drawings for all
Wireframes are our technical drawings, but what are they exactly?
Communication | Technical drawings for all
Getting technical.
Engineering drawing from 1775, Brompton GA, “Drawing for Designers” by Alan Pipes
Communication | Technical drawings for all
Getting technical.
Engineering drawing from 1775, Brompton GA, “Drawing for Designers” by Alan Pipes
Communication | Technical drawings for all
Mapmaking
Communication | Technical drawings for all
Mapmaking
ValidationInspired by: comics, 2D animation & industrial design
Validation | Our users, our characters
We love looking at people.
Disir character design for ‘Siege: Loki’ by Jamie McKelvie
Validation | Our users, our characters
We love looking at people.
Disir character design for ‘Siege: Loki’ by Jamie McKelvieCharacter design for ‘Batman the Animated Series’ by Bruce Tim
Validation | Our users, our characters
From characters to storyboard
Storyboards from ‘Batman the Animated Series’
Validation | Our users, our characters
What’s our ‘mood lighting’?
Validation | Roughing it; sketch prototyping
Sketch prototype
A quick model of your design made from cheap materials.
Validation | Roughing it; sketch prototyping
I <3 iPhone video.
Validation | Roughing it; sketch prototyping
You just don’t know until you can touch it.
Validation | Roughing it; sketch prototyping
You just don’t know until you can touch it.
Right, it’s almost lunch time.
Being like the shark
So, how do we be like the shark? How do we find our 3/4 view?
Being like the shark
As the ‘youngest’ group of designers I’ve talked about today; I don’t think we have it yet.
But we absolutely need to find it, because what we do is important.
Being like the shark
Investigation:
• ‘Just go look’ observation
• Sketching, a conversation in…
Being like the shark
Communication:
• The art of concept drawing
• Technical drawing for all
Being like the shark
Validation
• Our users; our characters• Roughing it;sketch prototyping
The makers of things
10 years ago we were pushing “invisible pixels” around.
The makers of things
10 years ago we were pushing “invisible pixels” around.
Today we’re building products that people depend on as part of their lives.
The makers of things
We’re working with materials that are as impactful and consequential as the stuff that films, objects and buildings are made of.
The makers of things
As product designers of a mature medium—the web—it’s time for us to break out of our silos.
And to learn from and experiment with other designer’s techniques to find our 3/4 view.
The makers of things
As product designers of a mature medium—the web—it’s time for us to break out of our silos.
And to learn from and experiment with other designer’s techniques to find our 3/4 view.
Special thanks to the designers who let me interview them & those who helped along the way: Monika Wensel, Benny Lee, Matt Sheret, Matthew Ogle & Jamie McKelvie.
Thanks!
Slides: www.hannahdonovan.comContact:Twitter: @hanEmail: [email protected]
LUNCH!