0
Designing Without the BrowserWe are the makersof things27 May, 2011 • Hannah Donovan
My name is Hannah,
My name is Hannah,
Last.fm Kinect
Last.fm Kinect
Last.fm Kinect
Last.fm KinectWhy was it hard?                                                                                            ...
Flexibility todayIncreasingly, the medium we’redesigning for is not the browser.And these mediums are (at the moment)are l...
Flexibility todayThe plateau of profitabilityGartner’s Hype Cycle (image from BERG’s ‘Mining the Trough of Disillusionment’)
Flexibility todayThe plateau of profitability = flexibilityGartner’s Hype Cycle (image from BERG’s ‘Mining the Trough of Dis...
But what about     lunch?Photo credit: Jeffrey Beall
The story of the sharkHong Kong
The story of the sharkHong Kong
From ‘The Art of Finding Nemo” by Mark Cotta Vaz (Pixar)
The story of the sharkShark vs. my Kinect drawings?                                                                       ...
The story of the sharkShark vs. my Kinect drawings?                                                                       ...
The story of the sharkShark vs. my Kinect drawings?                                                                       ...
The story of the sharkWhy does the shark win?
The story of the sharkWhy does the shark win?Why doesn’t the shark win?It’s a fucking shark.
The story of the sharkWhy does the shark win?Why doesn’t the shark win?It’s a fucking shark.
Open question:What’s our equivalentof the 3/4 view?
Our toolkitIf you grew up in flatland, you had avery ill-equipped toolkit.So we’ve spent the last 10 yearslevelling up.
Our toolkitThe toolkit of our future needs to beable to communicate things like:• physical space• context• scale• timing
And it’s going to beawesome.
Our toolkitIt’s time to look in our Ramona Bags.Excerpt from “Scrott Pilgrim vs. The World”
Our toolkitIt’s time to look in our Ramona Bags.Excerpt from “Scrott Pilgrim vs. The World”
Our toolkit
Inspired by: animation, architecture & industrialdesignInvestigation
Investigation | The talented observer Observation, or “just go look”
Investigation | The talented observer Observation, or “just go look”                                         Richard Willi...
Investigation | The talented observerStills from the DVD commentary on “Up”
Investigation | The talented observerEven if there’s nothing to look at, there’salways something to see.
Investigation | The talented observerEven if there’s nothing to look at, there’salways something to see.
Investigation | Sketching, a conversation in…Sketch with whatever you’ve got inyour studio.(So keep fun things lying aroun...
Investigation | Sketching, a conversation in…“Sketching is not putting pen to paper,it’s the mindset you do it in”  — Bill...
Inspired by: Industrial design, 3D animation &architectureCommunication
Communication | The art of concept drawingConcept drawing; leaving just enough“holes”.                                    ...
Communication | The art of concept drawingConcept drawing; leaving just enough“holes”.                                    ...
Communication | The art of concept drawingConcept drawing; leaving just enough“holes”.                                    ...
Communication | The art of concept drawingConcept drawing; leaving just enough“holes”.                                    ...
Communication | The art of concept drawingFocus on the important parts; createrich stories around them.Architectural conce...
Communication | The art of concept drawingFocus on the important parts; createrich stories around them.Architectural conce...
Communication | Technical drawings for allWireframes are our technical drawings,but what are they exactly?
Communication | Technical drawings for allWireframes are our technical drawings,but what are they exactly?
Communication | Technical drawings for allGetting technical.Engineering drawing from 1775, Brompton GA, “Drawing for Desig...
Communication | Technical drawings for allGetting technical.Engineering drawing from 1775, Brompton GA, “Drawing for Desig...
Communication | Technical drawings for allMapmaking
Communication | Technical drawings for allMapmaking
Inspired by: comics, 2D animation & industrialdesignValidation
Validation | Our users, our charactersWe love looking at people.Disir character design for ‘Siege: Loki’ by Jamie McKelvie
Validation | Our users, our charactersWe love looking at people.Disir character design for ‘Siege: Loki’ by Jamie McKelvie...
Validation | Our users, our charactersFrom characters to storyboardStoryboards from ‘Batman the Animated Series’
Validation | Our users, our charactersWhat’s our ‘mood lighting’?
Validation | Roughing it; sketch prototypingSketch prototypeA quick model of your design madefrom cheap materials.
Validation | Roughing it; sketch prototypingI <3 iPhone video.
Validation | Roughing it; sketch prototypingYou just don’t know until you cantouch it.
Validation | Roughing it; sketch prototypingYou just don’t know until you cantouch it.
Right, it’s almostlunch time.
Being like the sharkSo, how do we be like the shark? Howdo we find our 3/4 view?
Being like the sharkAs the ‘youngest’ group of designersI’ve talked about today; I don’t think wehave it yet.But we absolu...
Being like the sharkInvestigation:• ‘Just go look’ observation• Sketching, a conversation in…
Being like the sharkCommunication:• The art of concept drawing• Technical drawing for all
Being like the sharkValidation• Our users; our characters• Roughing it;sketch prototyping
The makers of things10 years ago we were pushing“invisible pixels” around.
The makers of things10 years ago we were pushing“invisible pixels” around.Today we’re building products thatpeople depend ...
The makers of thingsWe’re working with materials that areas impactful and consequential as thestuff that films, objects and ...
The makers of thingsAs product designers of a maturemedium—the web—it’s time for us tobreak out of our silos.And to learn ...
The makers of thingsAs product designers of a maturemedium—the web—it’s time for us tobreak out of our silos.And to learn ...
Thanks!Special thanks to the designers who let meinterview them & those who helped along theway: Monika Wensel, Benny Lee,...
Slides: www.hannahdonovan.comContact:Twitter: @hanEmail: han@hannahdonovan.com
LUNCH!
We Are The Makers Of Things
We Are The Makers Of Things
We Are The Makers Of Things
We Are The Makers Of Things
Upcoming SlideShare
Loading in...5
×

We Are The Makers Of Things

8,697

Published on

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.

Published in: Design
0 Comments
12 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
8,697
On Slideshare
0
From Embeds
0
Number of Embeds
3
Actions
Shares
0
Downloads
174
Comments
0
Likes
12
Embeds 0
No embeds

No notes for slide

Transcript of "We Are The Makers Of Things"

  1. 1. Designing Without the BrowserWe are the makersof things27 May, 2011 • Hannah Donovan
  2. 2. My name is Hannah,
  3. 3. My name is Hannah,
  4. 4. Last.fm Kinect
  5. 5. Last.fm Kinect
  6. 6. Last.fm Kinect
  7. 7. Last.fm KinectWhy 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&%(%)*$+
  8. 8. Flexibility todayIncreasingly, the medium we’redesigning for is not the browser.And these mediums are (at the moment)are less flexible to work with.
  9. 9. Flexibility todayThe plateau of profitabilityGartner’s Hype Cycle (image from BERG’s ‘Mining the Trough of Disillusionment’)
  10. 10. Flexibility todayThe plateau of profitability = flexibilityGartner’s Hype Cycle (image from BERG’s ‘Mining the Trough of Disillusionment’)
  11. 11. But what about lunch?Photo credit: Jeffrey Beall
  12. 12. The story of the sharkHong Kong
  13. 13. The story of the sharkHong Kong
  14. 14. From ‘The Art of Finding Nemo” by Mark Cotta Vaz (Pixar)
  15. 15. The story of the sharkShark 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&%(%)*$+
  16. 16. The story of the sharkShark 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&%(%)*$+
  17. 17. The story of the sharkShark 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&%(%)*$+
  18. 18. The story of the sharkWhy does the shark win?
  19. 19. The story of the sharkWhy does the shark win?Why doesn’t the shark win?It’s a fucking shark.
  20. 20. The story of the sharkWhy does the shark win?Why doesn’t the shark win?It’s a fucking shark.
  21. 21. Open question:What’s our equivalentof the 3/4 view?
  22. 22. Our toolkitIf you grew up in flatland, you had avery ill-equipped toolkit.So we’ve spent the last 10 yearslevelling up.
  23. 23. Our toolkitThe toolkit of our future needs to beable to communicate things like:• physical space• context• scale• timing
  24. 24. And it’s going to beawesome.
  25. 25. Our toolkitIt’s time to look in our Ramona Bags.Excerpt from “Scrott Pilgrim vs. The World”
  26. 26. Our toolkitIt’s time to look in our Ramona Bags.Excerpt from “Scrott Pilgrim vs. The World”
  27. 27. Our toolkit
  28. 28. Inspired by: animation, architecture & industrialdesignInvestigation
  29. 29. Investigation | The talented observer Observation, or “just go look”
  30. 30. Investigation | The talented observer Observation, or “just go look” Richard Williams From ‘T he Animator’s Survival Kit’ by
  31. 31. Investigation | The talented observerStills from the DVD commentary on “Up”
  32. 32. Investigation | The talented observerEven if there’s nothing to look at, there’salways something to see.
  33. 33. Investigation | The talented observerEven if there’s nothing to look at, there’salways something to see.
  34. 34. Investigation | Sketching, a conversation in…Sketch with whatever you’ve got inyour studio.(So keep fun things lying around).
  35. 35. Investigation | Sketching, a conversation in…“Sketching is not putting pen to paper,it’s the mindset you do it in” — Bill BuxtonSketch for ‘Valley of the Wind’ building by Benny Lee, Bread Studio
  36. 36. Inspired by: Industrial design, 3D animation &architectureCommunication
  37. 37. Communication | The art of concept drawingConcept 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 102Mobile phone concept drawing from “Drawing for Designers” by Alan Pipes Camera Obscura Your stats: 98 scrobbles, disco vered 10 May 200
  38. 38. Communication | The art of concept drawingConcept 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 102Mobile phone concept drawing from “Drawing for Designers” by Alan Pipes Camera Obscura Your stats: 98 scrobbles, disco vered 10 May 200
  39. 39. Communication | The art of concept drawingConcept 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 102Mobile phone concept drawing from “Drawing for Designers” by Alan Pipes Camera ObscuraDrawing by Spencer Nugent, www.spencernugent.com Your stats: 98 scrobbles, disco vered 10 May 200
  40. 40. Communication | The art of concept drawingConcept 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 102Mobile phone concept drawing from “Drawing for Designers” by Alan Pipes Camera ObscuraDrawing by Spencer Nugent, www.spencernugent.com Your stats: 98 scrobbles, disco vered 10 May 200
  41. 41. Communication | The art of concept drawingFocus on the important parts; createrich stories around them.Architectural concept by Benny Lee, Bread Studio
  42. 42. Communication | The art of concept drawingFocus on the important parts; createrich stories around them.Architectural concept by Benny Lee, Bread Studio for Designers” by Alan PipesDrawing by Oscar Tusquets Blanca from “Drawing
  43. 43. Communication | Technical drawings for allWireframes are our technical drawings,but what are they exactly?
  44. 44. Communication | Technical drawings for allWireframes are our technical drawings,but what are they exactly?
  45. 45. Communication | Technical drawings for allGetting technical.Engineering drawing from 1775, Brompton GA, “Drawing for Designers” by Alan Pipes
  46. 46. Communication | Technical drawings for allGetting technical.Engineering drawing from 1775, Brompton GA, “Drawing for Designers” by Alan Pipes
  47. 47. Communication | Technical drawings for allMapmaking
  48. 48. Communication | Technical drawings for allMapmaking
  49. 49. Inspired by: comics, 2D animation & industrialdesignValidation
  50. 50. Validation | Our users, our charactersWe love looking at people.Disir character design for ‘Siege: Loki’ by Jamie McKelvie
  51. 51. Validation | Our users, our charactersWe love looking at people.Disir character design for ‘Siege: Loki’ by Jamie McKelvie Character design for ‘Batman the Animated Series’ by Bruce Tim
  52. 52. Validation | Our users, our charactersFrom characters to storyboardStoryboards from ‘Batman the Animated Series’
  53. 53. Validation | Our users, our charactersWhat’s our ‘mood lighting’?
  54. 54. Validation | Roughing it; sketch prototypingSketch prototypeA quick model of your design madefrom cheap materials.
  55. 55. Validation | Roughing it; sketch prototypingI <3 iPhone video.
  56. 56. Validation | Roughing it; sketch prototypingYou just don’t know until you cantouch it.
  57. 57. Validation | Roughing it; sketch prototypingYou just don’t know until you cantouch it.
  58. 58. Right, it’s almostlunch time.
  59. 59. Being like the sharkSo, how do we be like the shark? Howdo we find our 3/4 view?
  60. 60. Being like the sharkAs the ‘youngest’ group of designersI’ve talked about today; I don’t think wehave it yet.But we absolutely need to find it,because what we do is important.
  61. 61. Being like the sharkInvestigation:• ‘Just go look’ observation• Sketching, a conversation in…
  62. 62. Being like the sharkCommunication:• The art of concept drawing• Technical drawing for all
  63. 63. Being like the sharkValidation• Our users; our characters• Roughing it;sketch prototyping
  64. 64. The makers of things10 years ago we were pushing“invisible pixels” around.
  65. 65. The makers of things10 years ago we were pushing“invisible pixels” around.Today we’re building products thatpeople depend on as part of their lives.
  66. 66. The makers of thingsWe’re working with materials that areas impactful and consequential as thestuff that films, objects and buildingsare made of.
  67. 67. The makers of thingsAs product designers of a maturemedium—the web—it’s time for us tobreak out of our silos.And to learn from and experiment withother designer’s techniques to find our3/4 view.
  68. 68. The makers of thingsAs product designers of a maturemedium—the web—it’s time for us tobreak out of our silos.And to learn from and experiment withother designer’s techniques to find our3/4 view.
  69. 69. Thanks!Special thanks to the designers who let meinterview them & those who helped along theway: Monika Wensel, Benny Lee, Matt Sheret,Matthew Ogle & Jamie McKelvie.
  70. 70. Slides: www.hannahdonovan.comContact:Twitter: @hanEmail: han@hannahdonovan.com
  71. 71. LUNCH!
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×