We Are The Makers Of Things
13 likes•19,411 views
The document discusses the evolution of design beyond traditional browsers, emphasizing the need for flexibility in adapting to new mediums. It highlights the importance of developing a robust toolkit for designers that can effectively communicate aspects like physical space and timing. The author encourages exploration and sketching as essential practices in refining design concepts.
We Are The Makers Of Things
- 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,
- 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.
- 75. LUNCH!