We Are The Makers Of Things

We are the makers of things

Designing Without the Browser

27 May, 2011 • Hannah Donovan

My name is Hannah,

My name is Hannah,

Last.fm Kinect

Last.fm Kinect

Last.fm Kinect

Last.fm Kinect

Why was it hard?

!"#"$%&'%(%)*$+

,*-.&/".+*$(0&'%(%)*$+

/*1-0(.&'%(%)*$+ 2(3&'%(%)*$+

,*-.&/".+*$(0&'%(%)*$+

45(6"7&!(8)*45(6"7&!(8)* 45(6"7&!(8)*

9(+%:;6&<)$"#%

9)=.(.>&!(8)*?)@&!(8)*

!"#*66"$8"8&!(8)*

/*1-0(.&'%(%)*$+

,*-.&/".+*$(0&'%(%)*$+

A.%)+%&!(8)*

9(+%:;6&<)$"#%

9(+%:;6&<)$"#%

2(3&'%(%)*$+

9(+%:;6&<)$"#%

A.%)+%&!(8)*A.%)+%&!(8)*

A.%)+%&!(8)*A.%)+%&!(8)*

A.%)+%&!(8)*

A.%)+%A.%)+% A.%)+%

)#*$)#*$

)#*$

B=*@&<)$"#%&5(C)3(%)*$'"0"#%)$3&+%(%)*$+

D*$%.*0+E&F+".&+"0"#%+&(&%)0"&=>&GH*08)$3I&%H").&H($8

'%(%"+E&/".+*$(0&+%(%)*$+&J)00&="&"61%>&K($8&$""8&(&H"01&+#.""$L&-$%)0&%H"&-+".&H(+&0)+%"$"8&%*&@&%.(#M+N&1-00&."#"$%&+%(%)*$+&;.*6&-+".O+&9P?&H)+%*.>:

'"0"#%)$3&%H"+"&+%(.%+%H"&+%()*$N&."Q-)."+

10(>&)#*$

'"0"#%)$3&%H"+"*1"$&(&G;*08".I

K+H*-08&$*%&H(C"&(&10(>&)#*$L

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.

Flexibility today

The plateau of profitability

Gartner’s Hype Cycle (image from BERG’s ‘Mining the Trough of Disillusionment’)

Flexibility today

The plateau of profitability

Gartner’s Hype Cycle (image from BERG’s ‘Mining the Trough of Disillusionment’)

= flexibility

Photo credit: Jeffrey Beall

But what aboutlunch?

The story of the shark

Hong Kong


Hong Kong

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

!"#"$%&'%(%)*$+

,*-.&/".+*$(0&'%(%)*$+

/*1-0(.&'%(%)*$+ 2(3&'%(%)*$+

,*-.&/".+*$(0&'%(%)*$+

45(6"7&!(8)*45(6"7&!(8)* 45(6"7&!(8)*

9(+%:;6&<)$"#%

9)=.(.>&!(8)*?)@&!(8)*

!"#*66"$8"8&!(8)*

/*1-0(.&'%(%)*$+

,*-.&/".+*$(0&'%(%)*$+

A.%)+%&!(8)*

9(+%:;6&<)$"#%

9(+%:;6&<)$"#%

2(3&'%(%)*$+

9(+%:;6&<)$"#%

A.%)+%&!(8)*A.%)+%&!(8)*

A.%)+%&!(8)*A.%)+%&!(8)*

A.%)+%&!(8)*

A.%)+%A.%)+% A.%)+%

)#*$)#*$

)#*$

B=*@&<)$"#%&5(C)3(%)*$'"0"#%)$3&+%(%)*$+

D*$%.*0+E&F+".&+"0"#%+&(&%)0"&=>&GH*08)$3I&%H").&H($8

'%(%"+E&/".+*$(0&+%(%)*$+&J)00&="&"61%>&K($8&$""8&(&H"01&+#.""$L&-$%)0&%H"&-+".&H(+&0)+%"$"8&%*&@&%.(#M+N&1-00&."#"$%&+%(%)*$+&;.*6&-+".O+&9P?&H)+%*.>:

'"0"#%)$3&%H"+"&+%(.%+%H"&+%()*$N&."Q-)."+

10(>&)#*$

'"0"#%)$3&%H"+"*1"$&(&G;*08".I

K+H*-08&$*%&H(C"&(&10(>&)#*$L


Shark vs. my Kinect drawings?

!"#"$%&'%(%)*$+

,*-.&/".+*$(0&'%(%)*$+

/*1-0(.&'%(%)*$+ 2(3&'%(%)*$+

,*-.&/".+*$(0&'%(%)*$+

45(6"7&!(8)*45(6"7&!(8)* 45(6"7&!(8)*

9(+%:;6&<)$"#%

9)=.(.>&!(8)*?)@&!(8)*

!"#*66"$8"8&!(8)*

/*1-0(.&'%(%)*$+

,*-.&/".+*$(0&'%(%)*$+

A.%)+%&!(8)*

9(+%:;6&<)$"#%

9(+%:;6&<)$"#%

2(3&'%(%)*$+

9(+%:;6&<)$"#%

A.%)+%&!(8)*A.%)+%&!(8)*

A.%)+%&!(8)*A.%)+%&!(8)*

A.%)+%&!(8)*

A.%)+%A.%)+% A.%)+%

)#*$)#*$

)#*$

B=*@&<)$"#%&5(C)3(%)*$'"0"#%)$3&+%(%)*$+

D*$%.*0+E&F+".&+"0"#%+&(&%)0"&=>&GH*08)$3I&%H").&H($8

'%(%"+E&/".+*$(0&+%(%)*$+&J)00&="&"61%>&K($8&$""8&(&H"01&+#.""$L&-$%)0&%H"&-+".&H(+&0)+%"$"8&%*&@&%.(#M+N&1-00&."#"$%&+%(%)*$+&;.*6&-+".O+&9P?&H)+%*.>:

'"0"#%)$3&%H"+"&+%(.%+%H"&+%()*$N&."Q-)."+

10(>&)#*$

'"0"#%)$3&%H"+"*1"$&(&G;*08".I

K+H*-08&$*%&H(C"&(&10(>&)#*$L



!"#"$%&'%(%)*$+

,*-.&/".+*$(0&'%(%)*$+

/*1-0(.&'%(%)*$+ 2(3&'%(%)*$+

,*-.&/".+*$(0&'%(%)*$+

45(6"7&!(8)*45(6"7&!(8)* 45(6"7&!(8)*

9(+%:;6&<)$"#%

9)=.(.>&!(8)*?)@&!(8)*

!"#*66"$8"8&!(8)*

/*1-0(.&'%(%)*$+

,*-.&/".+*$(0&'%(%)*$+

A.%)+%&!(8)*

9(+%:;6&<)$"#%

9(+%:;6&<)$"#%

2(3&'%(%)*$+

9(+%:;6&<)$"#%

A.%)+%&!(8)*A.%)+%&!(8)*

A.%)+%&!(8)*A.%)+%&!(8)*

A.%)+%&!(8)*

A.%)+%A.%)+% A.%)+%

)#*$)#*$

)#*$

B=*@&<)$"#%&5(C)3(%)*$'"0"#%)$3&+%(%)*$+

D*$%.*0+E&F+".&+"0"#%+&(&%)0"&=>&GH*08)$3I&%H").&H($8

'%(%"+E&/".+*$(0&+%(%)*$+&J)00&="&"61%>&K($8&$""8&(&H"01&+#.""$L&-$%)0&%H"&-+".&H(+&0)+%"$"8&%*&@&%.(#M+N&1-00&."#"$%&+%(%)*$+&;.*6&-+".O+&9P?&H)+%*.>:

'"0"#%)$3&%H"+"&+%(.%+%H"&+%()*$N&."Q-)."+

10(>&)#*$

'"0"#%)$3&%H"+"*1"$&(&G;*08".I

K+H*-08&$*%&H(C"&(&10(>&)#*$L



SHARK WINS. GAME OVER.


Why does the shark win?



Why doesn’t the shark win? It’s a fucking shark.



Why doesn’t the shark win? It’s a fucking shark.

What’s our equivalent of the 3/4 view?

Open question:

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.

Our toolkit

The toolkit of our future needs to be able to communicate things like:

• physical space

• context

• scale

• timing

And it’s going to be awesome.

Our toolkit

It’s time to look in our Ramona Bags.

Excerpt from “Scrott Pilgrim vs. The World”

Our toolkit

It’s time to look in our Ramona Bags.

Excerpt from “Scrott Pilgrim vs. The World”

Our toolkit

InvestigationInspired by: animation, architecture & industrial design

Investigation | The talented observer

Observation, or “just go look”


Observation, or “just go look”

From ‘The Animator’s Survival Kit’ by Richard Williams


Stills from the DVD commentary on “Up”


Even if there’s nothing to look at, there’s always something to see.


Even if there’s nothing to look at, there’s always something to see.

Investigation | Sketching, a conversation in…

Sketch with whatever you’ve got in your 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 Buxton

Sketch for ‘Valley of the Wind’ building by Benny Lee, Bread Studio

CommunicationInspired by: Industrial design, 3D animation & architecture

Communication | The art of concept drawing

Concept drawing; leaving just enough “holes”.

Your Recommended Lineup (show complete lineup)Email Print

PavementYour stats: 500 scrobbles, discovered 12 May 2009You’ve seen this artist 8 times

Broken Social SceneYour stats: 400 scrobbles, discovered 14 June 2006

Pierced ArrowsYour stats: 320 scrobbles, discovered 20 Feb 2008You’ve seen this artist 1 time

The CleanYour stats: 215 scrobbles, discovered 3 Jan 1020

Camera ObscuraYour stats: 98 scrobbles, discovered 10 May 2009

Don’t Miss:

You might also like:

ShareThe WalkmenTags: indie, folk, indie rock, indietronicaSimilar to: French Kicks, Jonathan Fire*Eater, Spoon, White Rabbits

The Walkmen is an American indie rock band, with members based in New York City and Philadelphia. Read more…

Mobile phone concept drawing from “Drawing for Designers” by Alan Pipes









Don’t Miss:




Mobile phone concept drawing from “Drawing for Designers” by Alan Pipes









Don’t Miss:




Mobile phone concept drawing from “Drawing for Designers” by Alan PipesDrawing by Spencer Nugent, www.spencernugent.com

http://www.spencernugent.com










Don’t Miss:




Mobile phone concept drawing from “Drawing for Designers” by Alan PipesDrawing by Spencer Nugent, www.spencernugent.com




Focus on the important parts; create rich stories around them.

Architectural concept by Benny Lee, Bread Studio


Focus on the important parts; create rich stories around them.

Architectural concept by Benny Lee, Bread StudioDrawing by Oscar Tusquets Blanca from “Drawing for Designers” by Alan Pipes

Communication | Technical drawings for all

Wireframes are our technical drawings, but what are they exactly?


Wireframes are our technical drawings, but what are they exactly?


Getting technical.

Engineering drawing from 1775, Brompton GA, “Drawing for Designers” by Alan Pipes


Getting technical.

Engineering drawing from 1775, Brompton GA, “Drawing for Designers” by Alan Pipes


Mapmaking


Mapmaking

ValidationInspired by: comics, 2D animation & industrial design

Validation | Our users, our characters

We love looking at people.

Disir character design for ‘Siege: Loki’ by Jamie McKelvie


We love looking at people.

Disir character design for ‘Siege: Loki’ by Jamie McKelvieCharacter design for ‘Batman the Animated Series’ by Bruce Tim


From characters to storyboard

Storyboards from ‘Batman the Animated Series’


What’s our ‘mood lighting’?

Validation | Roughing it; sketch prototyping

Sketch prototype

A quick model of your design made from cheap materials.


I <3 iPhone video.


You just don’t know until you can touch it.


You just don’t know until you can touch it.

Right, it’s almost lunch time.

Being like the shark

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


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.


Investigation:

• ‘Just go look’ observation

• Sketching, a conversation in…


Communication:

• The art of concept drawing

• Technical drawing for all


Validation

• Our users; our characters• Roughing it;sketch prototyping

The makers of things

10 years ago we were pushing “invisible pixels” around.


10 years ago we were pushing “invisible pixels” around.

Today we’re building products that people depend on as part of their lives.


We’re working with materials that are as impactful and consequential as the stuff that films, objects and buildings are made of.


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.


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.

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.

Thanks!

Slides: www.hannahdonovan.comContact:Twitter: @hanEmail: [email protected]

http://www.hannahdonovan.com

http://www.hannahdonovan.com

mailto:[email protected]

mailto:[email protected]

LUNCH!