We are the Makers of Things

Slide 1

Slide 1 text

We are the makers of things Designing Without the Browser 14 Oct, 2011 • Hannah Donovan

Slide 2

Slide 2 text

My name is Hannah,

Slide 3

Slide 3 text

My name is Hannah,

Slide 4

Slide 4 text

No content

Slide 5

Slide 5 text

No content

Slide 6

Slide 6 text

No content

Slide 7

Slide 7 text

No content

Slide 8

Slide 8 text

No content

Slide 9

Slide 9 text

Last.fm Kinect

Slide 10

Slide 10 text

Last.fm Kinect

Slide 11

Slide 11 text

Last.fm Kinect

Slide 12

Slide 12 text

Last.fm Kinect Why was it hard? Recent Stations Your Personal Stations Popular Stations Tag Stations Your Personal Stations [Name] Radio [Name] Radio [Name] Radio Last.fm Kinect Library Radio Mix Radio Recommended Radio Popular Stations Your Personal Stations Artist Radio Last.fm Kinect Last.fm Kinect Tag Stations Last.fm Kinect Artist Radio Artist Radio Artist Radio Artist Radio Artist Radio Artist Artist Artist Artist Artist Artist Artist Artist Artist Artist Artist Artist icon icon icon Xbox Kinect Navigation Selecting stations Controls: User selects a tile by “holding” their hand States: Personal stations will be empty (and need a help screen) until the user has listened to x tracks; pull recent stations from user’s LFM history. Selecting these starts the staion; requires play icon Selecting these open a “folder” (should not have a play icon)

Slide 13

Slide 13 text

Slide 14

Slide 14 text

Last.fm Kinect Why was it hard? Recent Stations Your Personal Stations Popular Stations Tag Stations Your Personal Stations [Name] Radio [Name] Radio [Name] Radio Last.fm Kinect Library Radio Mix Radio Recommended Radio Popular Stations Your Personal Stations Artist Radio Last.fm Kinect Last.fm Kinect Tag Stations Last.fm Kinect Artist Radio Artist Radio Artist Radio Artist Radio Artist Radio Artist Artist Artist Artist Artist Artist Artist Artist Artist Artist Artist icon icon icon Xbox Kinect Navigation Selecting stations Controls: User selects a tile by “holding” their hand States: Personal stations will be empty (and need a help screen) until the user has listened to x tracks; pull recent stations from user’s LFM history. Selecting these starts the staion; requires play icon Selecting these open a “folder” (should not have a play icon)

Slide 15

Slide 15 text

No content

Slide 16

Slide 16 text

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

Slide 17

Slide 17 text

Flexibility today The plateau of proﬁtability Gartner’s Hype Cycle (image from BERG’s ‘Mining the Trough of Disillusionment’)

Slide 18

Slide 18 text

Flexibility today The plateau of proﬁtability Gartner’s Hype Cycle (image from BERG’s ‘Mining the Trough of Disillusionment’) = ﬂexibility

Slide 19

Slide 19 text

The story of the shark Hong Kong, April 2011

Slide 20

Slide 20 text

The story of the shark Hong Kong, April 2011

Slide 21

Slide 21 text

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

Slide 22

Slide 22 text

Recent Stations Your Personal Stations Popular Stations Tag Stations Your Personal Stations [Name] Radio [Name] Radio [Name] Radio Last.fm Kinect Library Radio Mix Radio Recommended Radio Popular Stations Your Personal Stations Artist Radio Last.fm Kinect Last.fm Kinect Tag Stations Last.fm Kinect Artist Radio Artist Radio Artist Radio Artist Radio Artist Radio icon icon icon Xbox Kinect Navigation Selecting stations Controls: User selects a tile by “holding” their hand States: Personal stations will be empty (and need a help screen) until the user has listened to x tracks; pull recent stations from user’s LFM history. Selecting these starts the staion; requires play icon Selecting these open a “folder” (should not have a play icon) The story of the shark Shark vs. my Kinect drawings?

Slide 23

Slide 23 text

Slide 24

Slide 24 text

Slide 25

Slide 25 text

The story of the shark Why does the shark win?

Slide 26

Slide 26 text

The story of the shark Why does the shark win? Why doesn’t the shark win? It’s a fucking shark.

Slide 27

Slide 27 text

The story of the shark Why does the shark win? Why doesn’t the shark win? It’s a fucking shark.

Slide 28

Slide 28 text

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

Slide 29

Slide 29 text

No content

Slide 30

Slide 30 text

Our toolkit If you grew up in ﬂatland, you had a very ill-equipped toolkit. So we’ve spent the last 10 years levelling up.

Slide 31

Slide 31 text

Our toolkit The toolkit of our future needs to be able to communicate things like: • physical space • context • scale • timing

Slide 32

Slide 32 text

And it’s going to be awesome.

Slide 33

Slide 33 text

Our toolkit It’s time to look in our Ramona Bags. Excerpt from “Scrott Pilgrim vs. The World”

Slide 34

Slide 34 text

Our toolkit It’s time to look in our Ramona Bags. Excerpt from “Scrott Pilgrim vs. The World”

Slide 35

Slide 35 text

Our toolkit

Slide 36

Slide 36 text

Investigation Inspired by: animation, architecture & industrial design

Slide 37

Slide 37 text

Investigation | The talented observer Observation, or “just go look”

Slide 38

Slide 38 text

Investigation | The talented observer Observation, or “just go look” From the Animator’s Survival Kit by Richard Williams

Slide 39

Slide 39 text

Investigation | The talented observer Stills from the DVD commentary on “Up”

Slide 40

Slide 40 text

Investigation | The talented observer Even if there’s nothing to look at, there’s always something to see.

Slide 41

Slide 41 text

Investigation | The talented observer Even if there’s nothing to look at, there’s always something to see.

Slide 42

Slide 42 text

Investigation | Sketching, a conversation in… Sketch with whatever you’ve got in your studio. (So keep fun things lying around).

Slide 43

Slide 43 text

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

Slide 44

Slide 44 text

Communication Inspired by: Industrial design, 3D animation & architecture

Slide 45

Slide 45 text

Communication | The art of concept drawing Concept drawing; leaving just enough “holes”. Your Recommended Lineup (show complete lineup) Email Print P avement Your stats: 500 scrobbles, discovered 12 May 2009 You’ve seen this artist 8 times Broken Social Scene Your stats: 400 scrobbles, discovered 14 June 2006 Pierced Arrows Your stats: 320 scrobbles, discovered 20 Feb 2008 You’ve seen this artist 1 time The Clean Your stats: 215 scrobbles, discovered 3 Jan 1020 Camera Obscura Your stats: 98 scrobbles, discovered 10 May 2009 Don’t Miss: Mobile phone concept drawing from “Drawing for Designers” by Alan Pipes

Slide 46

Slide 46 text

Slide 47

Slide 47 text

Slide 48

Slide 48 text

Slide 49

Slide 49 text

Communication | The art of concept drawing Focus on the important parts; create rich stories around them. Architectural concept by Benny Lee, Bread Studio

Slide 50

Slide 50 text

Communication | The art of concept drawing Focus on the important parts; create rich stories around them. Architectural concept by Benny Lee, Bread Studio Drawing by Oscar Tusquets Blanca from “Drawing for Designers” by Alan Pipes

Slide 51

Slide 51 text

Communication | the art of concept drawing

Slide 52

Slide 52 text

Communication | Technical drawings for all Wireframes are our go-to technical drawing, but what exactly should they communicate?

Slide 53

Slide 53 text

Communication | Technical drawings for all Wireframes are our go-to technical drawing, but what exactly should they communicate?

Slide 54

Slide 54 text

Communication | Technical drawings for all Getting technical. Engineering drawing from 1775, Brompton GA, “Drawing for Designers” by Alan Pipes

Slide 55

Slide 55 text

Communication | Technical drawings for all Getting technical. Engineering drawing from 1775, Brompton GA, “Drawing for Designers” by Alan Pipes

Slide 56

Slide 56 text

Communication | Technical drawings for all Mapmaking

Slide 57

Slide 57 text

Communication | Technical drawings for all Mapmaking

Slide 58

Slide 58 text

Validation Inspired by: comics, 2D animation & industrial design

Slide 59

Slide 59 text

Validation | Our users, our characters We love looking at people. Disir character design for ‘Siege: Loki’ by Jamie McKelvie

Slide 60

Slide 60 text

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

Slide 61

Slide 61 text

Validation | Our users, our characters From characters to storyboard Storyboards from ‘Batman the Animated Series’

Slide 62

Slide 62 text

Validation | Our users, our characters What’s our ‘mood lighting’?

Slide 63

Slide 63 text

No content

Slide 64

Slide 64 text

No content

Slide 65

Slide 65 text

Validation | Roughing it; sketch prototyping Sketch prototype A quick model of your design made from cheap materials.

Slide 66

Slide 66 text

Validation | Roughing it; sketch prototyping Sketch prototype A quick model of your design made from cheap materials.

Slide 67

Slide 67 text

Validation | Roughing it; sketch prototyping You just don’t know until you can feel it.

Slide 68

Slide 68 text

Validation | Roughing it; sketch prototyping You just don’t know until you can feel it.

Slide 69

Slide 69 text

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

Slide 70

Slide 70 text

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 ﬁnd it.

Slide 71

Slide 71 text

Being like the shark Investigation: • ‘Just go look’ observation • Sketching, a conversation in…

Slide 72

Slide 72 text

Being like the shark Communication: • The art of concept drawing • Technical drawing for all

Slide 73

Slide 73 text

Being like the shark Validation • Our users; our characters • Roughing it;sketch prototyping

Slide 74

Slide 74 text

The makers of things 10 years ago we were pushing “invisible pixels” around.

Slide 75

Slide 75 text

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.

Slide 76

Slide 76 text

The makers of things We’re working with materials that are as impactful and consequential as the stuﬀ that ﬁlms, objects and buildings are made of.

Slide 77

Slide 77 text

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 design techniques to ﬁnd our 3/4 view.

Slide 78

Slide 78 text

Slide 79

Slide 79 text

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!

Slide 80

Slide 80 text

Slides: www.hannahdonovan.com Contact: Twitter: @han Email: [email protected]