We Are The Makers Of Things
Upcoming SlideShare
Loading in...5
×
 

Like this? Share it with your network

Share

We Are The Makers Of Things

on

  • 8,935 views

Slides from my Web Directions @Media London talk, 27 May 2011....

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.

Statistics

Views

Total Views
8,935
Views on SlideShare
7,524
Embed Views
1,411

Actions

Likes
12
Downloads
172
Comments
0

29 Embeds 1,411

http://www.webdirections.org 1353
http://lanyrd.com 14
http://www.madietiens.co.cc 7
http://brandcrastination.com 6
url_unknown 3
https://twitter.com 2
http://www.novadoba.estranky.cz 2
http://www.mongodb.org 2
http://www.istikbal.gr 2
http://www.muharremtac.com 1
http://www.comtel.in 1
http://posterous.com 1
http://demo.foxytheme.com 1
http://demysex.org.mx 1
http://matemagiayprobabilidad.blogspot.com 1
http://www.demysex.org.mx 1
http://m10.indicthreads.com 1
http://englishcompanion.ning.com 1
http://red.ifor.es 1
http://www.bloggen.be 1
http://ahmpkuns.blogspot.com 1
http://www.deserthorseinc.com 1
http://www.onlydoo.com 1
http://lineaserpentinata.blogspot.com 1
http://www.rpolillo.it 1
http://koleksisoalan.blogspot.com 1
http://www.jlorihuela.com 1
http://enalm.blogspot.com 1
http://webcache.googleusercontent.com 1
More...

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

We Are The Makers Of Things Presentation Transcript

  • 1. Designing Without the BrowserWe are the makersof things27 May, 2011 • Hannah Donovan
  • 2. My name is Hannah,
  • 3. My name is Hannah,
  • 4. Last.fm Kinect
  • 5. Last.fm Kinect
  • 6. Last.fm Kinect
  • 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. 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. Flexibility todayThe plateau of profitabilityGartner’s Hype Cycle (image from BERG’s ‘Mining the Trough of Disillusionment’)
  • 10. Flexibility todayThe plateau of profitability = flexibilityGartner’s Hype Cycle (image from BERG’s ‘Mining the Trough of Disillusionment’)
  • 11. But what about lunch?Photo credit: Jeffrey Beall
  • 12. The story of the sharkHong Kong
  • 13. The story of the sharkHong Kong
  • 14. From ‘The Art of Finding Nemo” by Mark Cotta Vaz (Pixar)
  • 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. 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. 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. The story of the sharkWhy does the shark win?
  • 19. The story of the sharkWhy does the shark win?Why doesn’t the shark win?It’s a fucking shark.
  • 20. The story of the sharkWhy does the shark win?Why doesn’t the shark win?It’s a fucking shark.
  • 21. Open question:What’s our equivalentof the 3/4 view?
  • 22. Our toolkitIf you grew up in flatland, you had avery ill-equipped toolkit.So we’ve spent the last 10 yearslevelling up.
  • 23. Our toolkitThe toolkit of our future needs to beable to communicate things like:• physical space• context• scale• timing
  • 24. And it’s going to beawesome.
  • 25. Our toolkitIt’s time to look in our Ramona Bags.Excerpt from “Scrott Pilgrim vs. The World”
  • 26. Our toolkitIt’s time to look in our Ramona Bags.Excerpt from “Scrott Pilgrim vs. The World”
  • 27. Our toolkit
  • 28. Inspired by: animation, architecture & industrialdesignInvestigation
  • 29. Investigation | The talented observer Observation, or “just go look”
  • 30. Investigation | The talented observer Observation, or “just go look” Richard Williams From ‘T he Animator’s Survival Kit’ by
  • 31. Investigation | The talented observerStills from the DVD commentary on “Up”
  • 32. Investigation | The talented observerEven if there’s nothing to look at, there’salways something to see.
  • 33. Investigation | The talented observerEven if there’s nothing to look at, there’salways something to see.
  • 34. Investigation | Sketching, a conversation in…Sketch with whatever you’ve got inyour studio.(So keep fun things lying around).
  • 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. Inspired by: Industrial design, 3D animation &architectureCommunication
  • 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. 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. 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. 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. Communication | The art of concept drawingFocus on the important parts; createrich stories around them.Architectural concept by Benny Lee, Bread Studio
  • 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. Communication | Technical drawings for allWireframes are our technical drawings,but what are they exactly?
  • 44. Communication | Technical drawings for allWireframes are our technical drawings,but what are they exactly?
  • 45. Communication | Technical drawings for allGetting technical.Engineering drawing from 1775, Brompton GA, “Drawing for Designers” by Alan Pipes
  • 46. Communication | Technical drawings for allGetting technical.Engineering drawing from 1775, Brompton GA, “Drawing for Designers” by Alan Pipes
  • 47. Communication | Technical drawings for allMapmaking
  • 48. Communication | Technical drawings for allMapmaking
  • 49. Inspired by: comics, 2D animation & industrialdesignValidation
  • 50. Validation | Our users, our charactersWe love looking at people.Disir character design for ‘Siege: Loki’ by Jamie McKelvie
  • 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. Validation | Our users, our charactersFrom characters to storyboardStoryboards from ‘Batman the Animated Series’
  • 53. Validation | Our users, our charactersWhat’s our ‘mood lighting’?
  • 54. Validation | Roughing it; sketch prototypingSketch prototypeA quick model of your design madefrom cheap materials.
  • 55. Validation | Roughing it; sketch prototypingI <3 iPhone video.
  • 56. Validation | Roughing it; sketch prototypingYou just don’t know until you cantouch it.
  • 57. Validation | Roughing it; sketch prototypingYou just don’t know until you cantouch it.
  • 58. Right, it’s almostlunch time.
  • 59. Being like the sharkSo, how do we be like the shark? Howdo we find our 3/4 view?
  • 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. Being like the sharkInvestigation:• ‘Just go look’ observation• Sketching, a conversation in…
  • 62. Being like the sharkCommunication:• The art of concept drawing• Technical drawing for all
  • 63. Being like the sharkValidation• Our users; our characters• Roughing it;sketch prototyping
  • 64. The makers of things10 years ago we were pushing“invisible pixels” around.
  • 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. The makers of thingsWe’re working with materials that areas impactful and consequential as thestuff that films, objects and buildingsare made of.
  • 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. 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. 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. Slides: www.hannahdonovan.comContact:Twitter: @hanEmail: han@hannahdonovan.com
  • 71. LUNCH!