Slides from my Web Directions @Media London talk, 27 May 2011. Looking through the lenses of industrial design, architecture and animation, I talk about the skills interaction designers will need in the future and my experiments / experiences.

1. Designing Without the Browser
We are the makers
of things
27 May, 2011 • Hannah Donovan

2. My name is Hannah,

3. My name is Hannah,

6. Last.fm Kinect

7. Last.fm Kinect

8. Last.fm Kinect

9. Last.fm Kinect
Why was it hard?
9(+%:;6&<)$"#%
B=*@&<)$"#%&5(C)3 ,*-.&/".+*$(0&'%(%
)*$+
(%)*$
'"0"#%)$3&+%(%)*$+ )#*$
)#*$
)#*$
9)=.(.>&!(8)*
?)@&!(8)*
!"#*66"$8"8&!(8)
*
9(+%:;6&<)$"#%
!"#"$%&'%(%)*$+ 9(+%:;6&<)$"#%
'"0"#%)$3&%H"+"&+%
(.%+
%H"&+%()*$N&."Q-)."+
/*1-0(.&'%(%)*$+
10(>&)#*$
45(6"7&!(8)*
45(6"7&!(8)*
45(6"7&!(8)*
,*-.&/".+*$(0&'%(%
)*$+
A.%)+%&!(8)*
'"0"#%)$3&%H"+" A.%)+%&!(8)*
A.%)+%&!(8)*
*1"$&(&G;*08".I
K+H*-08&$*%&H(C"&(
&
10(>&)#*$L ,*-.&/".+*$(0&'%(
%)*$+ /*1-0(.&'%(%)*$+
2(3&'%(%)*$+
A.%)+%&!(8)*
A.%)+%&!(8)*
A.%)+%&!(8)*
D*$%.*0+E&F+".&+"0"
#%+&(&%)0"&=>&GH*08)$3
I&%H").&H($8
'%(%"+E&/".+*$(0&+%(
%)*$+&J)00&="&"61%> 9(+%:;6&<)$"#%
0)+%"$"8&%*&@&%.(#M+N &K($8&$""8&(&H"01&
&1-00&."#"$%&+%(%)*$ +#.""$L&-$%)0&%H"&-+
+&;.*6&-+".O+&9P? ".&H(+&
&H)+%*.>:
2(3&'%(%)*$+

11. 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.

12. Flexibility today
The plateau of profitability
Gartner’s Hype Cycle (image from BERG’s ‘Mining the Trough of Disillusionment’)

13. Flexibility today
The plateau of profitability = flexibility
Gartner’s Hype Cycle (image from BERG’s ‘Mining the Trough of Disillusionment’)

14. But what about
lunch?
Photo credit: Jeffrey Beall

15. The story of the shark
Hong Kong

16. The story of the shark
Hong Kong

17. From ‘The Art of Finding Nemo” by Mark Cotta Vaz (Pixar)

18. The story of the shark
Shark vs. my Kinect drawings?
9(+%:;6&<)$"#%
B=*@&<)$"#%&5(C)3 ,*-.&/".+*$(0&'%(%
)*$+
(%)*$
'"0"#%)$3&+%(%)*$+ )#*$
)#*$
)#*$
9)=.(.>&!(8)*
?)@&!(8)*
!"#*66"$8"8&!(8)
*
9(+%:;6&<)$"#%
!"#"$%&'%(%)*$+ 9(+%:;6&<)$"#%
'"0"#%)$3&%H"+"&+%
(.%+
%H"&+%()*$N&."Q-)."+
/*1-0(.&'%(%)*$+
10(>&)#*$
45(6"7&!(8)*
45(6"7&!(8)*
45(6"7&!(8)*
,*-.&/".+*$(0&'%(%
)*$+
A.%)+%&!(8)*
'"0"#%)$3&%H"+" A.%)+%&!(8)*
A.%)+%&!(8)*
*1"$&(&G;*08".I
K+H*-08&$*%&H(C"&(
&
10(>&)#*$L ,*-.&/".+*$(0&'%(
%)*$+ /*1-0(.&'%(%)*$+
2(3&'%(%)*$+
A.%)+%&!(8)*
A.%)+%&!(8)*
A.%)+%&!(8)*
D*$%.*0+E&F+".&+"0"
#%+&(&%)0"&=>&GH*08)$3
I&%H").&H($8
'%(%"+E&/".+*$(0&+%(
%)*$+&J)00&="&"61%> 9(+%:;6&<)$"#%
0)+%"$"8&%*&@&%.(#M+N &K($8&$""8&(&H"01&
&1-00&."#"$%&+%(%)*$ +#.""$L&-$%)0&%H"&-+
+&;.*6&-+".O+&9P? ".&H(+&
&H)+%*.>:
2(3&'%(%)*$+

19. The story of the shark
Shark vs. my Kinect drawings?
9(+%:;6&<)$"#%
B=*@&<)$"#%&5(C)3 ,*-.&/".+*$(0&'%(%
)*$+
(%)*$
'"0"#%)$3&+%(%)*$+ )#*$
)#*$
)#*$
9)=.(.>&!(8)*
?)@&!(8)*
!"#*66"$8"8&!(8)
*
9(+%:;6&<)$"#%
!"#"$%&'%(%)*$+ 9(+%:;6&<)$"#%
'"0"#%)$3&%H"+"&+%
(.%+
%H"&+%()*$N&."Q-)."+
/*1-0(.&'%(%)*$+
10(>&)#*$
45(6"7&!(8)*
45(6"7&!(8)*
45(6"7&!(8)*
,*-.&/".+*$(0&'%(%
)*$+
A.%)+%&!(8)*
'"0"#%)$3&%H"+" A.%)+%&!(8)*
A.%)+%&!(8)*
*1"$&(&G;*08".I
K+H*-08&$*%&H(C"&(
&
10(>&)#*$L ,*-.&/".+*$(0&'%(
%)*$+ /*1-0(.&'%(%)*$+
2(3&'%(%)*$+
A.%)+%&!(8)*
A.%)+%&!(8)*
A.%)+%&!(8)*
D*$%.*0+E&F+".&+"0"
#%+&(&%)0"&=>&GH*08)$3
I&%H").&H($8
'%(%"+E&/".+*$(0&+%(
%)*$+&J)00&="&"61%> 9(+%:;6&<)$"#%
0)+%"$"8&%*&@&%.(#M+N &K($8&$""8&(&H"01&
&1-00&."#"$%&+%(%)*$ +#.""$L&-$%)0&%H"&-+
+&;.*6&-+".O+&9P? ".&H(+&
&H)+%*.>:
2(3&'%(%)*$+

20. The story of the shark
Shark vs. my Kinect drawings?
9(+%:;6&<)$"#%
SHARK WINS. GAME OVER. B=*@&<)$"#%&5(C)3
'"0"#%)$3&+%(%)*$+
(%)*$
,*-.&/".+*$(0&'%(%
)#*$
9)=.(.>&!(8)*
)*$+
)#*$
)#*$
?)@&!(8)*
!"#*66"$8"8&!(8)
*
9(+%:;6&<)$"#%
!"#"$%&'%(%)*$+ 9(+%:;6&<)$"#%
'"0"#%)$3&%H"+"&+%
(.%+
%H"&+%()*$N&."Q-)."+
/*1-0(.&'%(%)*$+
10(>&)#*$
45(6"7&!(8)*
45(6"7&!(8)*
45(6"7&!(8)*
,*-.&/".+*$(0&'%(%
)*$+
A.%)+%&!(8)*
'"0"#%)$3&%H"+" A.%)+%&!(8)*
A.%)+%&!(8)*
*1"$&(&G;*08".I
K+H*-08&$*%&H(C"&(
&
10(>&)#*$L ,*-.&/".+*$(0&'%(
%)*$+ /*1-0(.&'%(%)*$+
2(3&'%(%)*$+
A.%)+%&!(8)*
A.%)+%&!(8)*
A.%)+%&!(8)*
D*$%.*0+E&F+".&+"0"
#%+&(&%)0"&=>&GH*08)$3
I&%H").&H($8
'%(%"+E&/".+*$(0&+%(
%)*$+&J)00&="&"61%> 9(+%:;6&<)$"#%
0)+%"$"8&%*&@&%.(#M+N &K($8&$""8&(&H"01&
&1-00&."#"$%&+%(%)*$ +#.""$L&-$%)0&%H"&-+
+&;.*6&-+".O+&9P? ".&H(+&
&H)+%*.>:
2(3&'%(%)*$+

21. The story of the shark
Why does the shark win?

22. The story of the shark
Why does the shark win?
Why doesn’t the shark win?
It’s a fucking shark.

23. The story of the shark
Why does the shark win?
Why doesn’t the shark win?
It’s a fucking shark.

24. Open question:
What’s our equivalent
of the 3/4 view?

26. 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.

27. Our toolkit
The toolkit of our future needs to be
able to communicate things like:
• physical space
• context
• scale
• timing

28. And it’s going to be
awesome.

29. Our toolkit
It’s time to look in our Ramona Bags.
Excerpt from “Scrott Pilgrim vs. The World”

30. Our toolkit
It’s time to look in our Ramona Bags.
Excerpt from “Scrott Pilgrim vs. The World”

31. Our toolkit

32. Inspired by: animation, architecture & industrial
design
Investigation

33. Investigation | The talented observer
Observation, or “just go look”

34. Investigation | The talented observer
Observation, or “just go look”
Richard Williams
From ‘T he Animator’s Survival Kit’ by

35. Investigation | The talented observer
Stills from the DVD commentary on “Up”

36. Investigation | The talented observer
Even if there’s nothing to look at, there’s
always something to see.

37. Investigation | The talented observer
Even if there’s nothing to look at, there’s
always something to see.

38. Investigation | Sketching, a conversation in…
Sketch with whatever you’ve got in
your studio.
(So keep fun things lying around).

39. 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

40. Inspired by: Industrial design, 3D animation &
architecture
Communication

41. Communication | The art of concept drawing
Concept drawing; leaving just enough
“holes”.
Your Recommended Lineup (sho
w complete line
Email Print
Don’t Miss:
P ement
av
Your stats: 500 scrobbles, disco
vered 12 May
You’ve seen this artist 8 times
Broken Social Scene
Your stats: 400 scrobbles, disco
vered 14 June
Pierced Arrows
Your stats: 320 scrobbles, dis
covered 20 Feb 2
You’ve seen this artist 1 time
The Clean
Your stats: 215 scrobbles, disco
vered 3 Jan 102
Mobile phone concept drawing from “Drawing for Designers” by Alan Pipes Camera Obscura
Your stats: 98 scrobbles, disco
vered 10 May 200

42. Communication | The art of concept drawing
Concept drawing; leaving just enough
“holes”.
Your Recommended Lineup (sho
w complete line
Email Print
Don’t Miss:
P ement
av
Your stats: 500 scrobbles, disco
vered 12 May
You’ve seen this artist 8 times
Broken Social Scene
Your stats: 400 scrobbles, disco
vered 14 June
Pierced Arrows
Your stats: 320 scrobbles, dis
covered 20 Feb 2
You’ve seen this artist 1 time
The Clean
Your stats: 215 scrobbles, disco
vered 3 Jan 102
Mobile phone concept drawing from “Drawing for Designers” by Alan Pipes Camera Obscura
Your stats: 98 scrobbles, disco
vered 10 May 200

43. Communication | The art of concept drawing
Concept drawing; leaving just enough
“holes”.
Your Recommended Lineup (sho
w complete line
Email Print
Don’t Miss:
P ement
av
Your stats: 500 scrobbles, disco
vered 12 May
You’ve seen this artist 8 times
Broken Social Scene
Your stats: 400 scrobbles, disco
vered 14 June
Pierced Arrows
Your stats: 320 scrobbles, dis
covered 20 Feb 2
You’ve seen this artist 1 time
The Clean
Your stats: 215 scrobbles, disco
vered 3 Jan 102
Mobile phone concept drawing from “Drawing for Designers” by Alan Pipes Camera Obscura
Drawing by Spencer Nugent, www.spencernugent.com
Your stats: 98 scrobbles, disco
vered 10 May 200

44. Communication | The art of concept drawing
Concept drawing; leaving just enough
“holes”.
Your Recommended Lineup (sho
w complete line
Email Print
Don’t Miss:
P ement
av
Your stats: 500 scrobbles, disco
vered 12 May
You’ve seen this artist 8 times
Broken Social Scene
Your stats: 400 scrobbles, disco
vered 14 June
Pierced Arrows
Your stats: 320 scrobbles, dis
covered 20 Feb 2
You’ve seen this artist 1 time
The Clean
Your stats: 215 scrobbles, disco
vered 3 Jan 102
Mobile phone concept drawing from “Drawing for Designers” by Alan Pipes Camera Obscura
Drawing by Spencer Nugent, www.spencernugent.com
Your stats: 98 scrobbles, disco
vered 10 May 200

45. Communication | The art of concept drawing
Focus on the important parts; create
rich stories around them.
Architectural concept by Benny Lee, Bread Studio

46. Communication | The art of concept drawing
Focus on the important parts; create
rich stories around them.
Architectural concept by Benny Lee, Bread Studio for Designers” by Alan Pipes
Drawing by Oscar Tusquets Blanca from “Drawing

47. Communication | Technical drawings for all
Wireframes are our technical drawings,
but what are they exactly?

48. Communication | Technical drawings for all
Wireframes are our technical drawings,
but what are they exactly?

49. Communication | Technical drawings for all
Getting technical.
Engineering drawing from 1775, Brompton GA, “Drawing for Designers” by Alan Pipes

50. Communication | Technical drawings for all
Getting technical.
Engineering drawing from 1775, Brompton GA, “Drawing for Designers” by Alan Pipes

51. Communication | Technical drawings for all
Mapmaking

52. Communication | Technical drawings for all
Mapmaking

53. Inspired by: comics, 2D animation & industrial
design
Validation

54. Validation | Our users, our characters
We love looking at people.
Disir character design for ‘Siege: Loki’ by Jamie McKelvie

55. Validation | Our users, our characters
We love looking at people.
Disir character design for ‘Siege: Loki’ by Jamie McKelvie
Character design for ‘Batman the Animated Series’ by Bruce Tim

56. Validation | Our users, our characters
From characters to storyboard
Storyboards from ‘Batman the Animated Series’

57. Validation | Our users, our characters
What’s our ‘mood lighting’?

58. Validation | Roughing it; sketch prototyping
Sketch prototype
A quick model of your design made
from cheap materials.

59. Validation | Roughing it; sketch prototyping
I <3 iPhone video.

60. Validation | Roughing it; sketch prototyping
You just don’t know until you can
touch it.

61. Validation | Roughing it; sketch prototyping
You just don’t know until you can
touch it.

62. Right, it’s almost
lunch time.

63. Being like the shark
So, how do we be like the shark? How
do we find our 3/4 view?

64. 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.

65. Being like the shark
Investigation:
• ‘Just go look’ observation
• Sketching, a conversation in…

66. Being like the shark
Communication:
• The art of concept drawing
• Technical drawing for all

67. Being like the shark
Validation
• Our users; our characters
• Roughing it;sketch prototyping

68. The makers of things
10 years ago we were pushing
“invisible pixels” around.

69. 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.

70. 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.

71. 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.

72. 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.

73. Thanks!
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.

74. Slides: www.hannahdonovan.com
Contact:
Twitter: @han
Email: han@hannahdonovan.com

75. LUNCH!