We Are The Makers Of Things

Designing Without the BrowserWe are the makersof things27 May, 2011 • Hannah Donovan

My name is Hannah,

Last.fm Kinect

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&%(%)*$+

Flexibility todayIncreasingly, the medium we’redesigning for is not the browser.And these mediums are (at the moment)are less ﬂexible to work with.

Flexibility todayThe plateau of proﬁtabilityGartner’s Hype Cycle (image from BERG’s ‘Mining the Trough of Disillusionment’)

Flexibility todayThe plateau of proﬁtability = ﬂexibilityGartner’s Hype Cycle (image from BERG’s ‘Mining the Trough of Disillusionment’)

But what about lunch?Photo credit: Jeﬀrey Beall

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? 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&%(%)*$+

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&%(%)*$+

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.

Open question:What’s our equivalentof the 3/4 view?

Our toolkitIf you grew up in ﬂatland, 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 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 Williams From ‘T he Animator’s Survival Kit’ by

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 | Sketching, a conversation in…Sketch with whatever you’ve got inyour 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 BuxtonSketch for ‘Valley of the Wind’ building by Benny Lee, Bread Studio

Inspired by: Industrial design, 3D animation &architectureCommunication

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

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

Communication | The art of concept drawingFocus on the important parts; createrich stories around them.Architectural concept by Benny Lee, Bread Studio

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

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 Designers” by Alan Pipes

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 Character design for ‘Batman the Animated Series’ by Bruce Tim

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.

Right, it’s almostlunch time.

Being like the sharkSo, how do we be like the shark? Howdo we ﬁnd 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 absolutely need to ﬁnd it,because what we do is important.

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 on as part of their lives.

The makers of thingsWe’re working with materials that areas impactful and consequential as thestuﬀ that ﬁlms, objects and buildingsare made of.

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 ﬁnd our3/4 view.

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.

Slides: www.hannahdonovan.comContact:Twitter: @hanEmail: han@hannahdonovan.com

LUNCH!

http://www.webdirections.org	1233
http://lanyrd.com	13
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

We Are The Makers Of Things

by Hannah Donovan on May 30, 2011

Accessibility

Categories

Upload Details

Usage Rights

29 Embeds 1,290

Statistics

We Are The Makers Of Things Presentation Transcript