We are the Makers of Things

Transcript

1. We are the makers of things Designing Without the Browser

   14 Oct, 2011 • Hannah Donovan

2. My name is Hannah,

3. My name is Hannah,

4. None
5. None
6. None
7. None
8. None

9. Last.fm Kinect

10. Last.fm Kinect

11. Last.fm Kinect

12. 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)

13. 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)

14. 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)
15. None

16. 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.

17. Flexibility today The plateau of profitability Gartner’s Hype Cycle (image

    from BERG’s ‘Mining the Trough of Disillusionment’)

18. Flexibility today The plateau of profitability Gartner’s Hype Cycle (image

    from BERG’s ‘Mining the Trough of Disillusionment’) = flexibility

19. The story of the shark Hong Kong, April 2011

20. The story of the shark Hong Kong, April 2011

21. From ‘The Art of Finding Nemo” by Mark Cotta Vaz

    (Pixar)

22. 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?

23. 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?

24. 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? SHARK WINS. GAME OVER.

25. The story of the shark Why does the shark win?

26. The story of the shark Why does the shark win?

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

27. The story of the shark Why does the shark win?

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

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

29. None

30. 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.

31. Our toolkit The toolkit of our future needs to be

    able to communicate things like: • physical space • context • scale • timing

32. And it’s going to be awesome.

33. Our toolkit It’s time to look in our Ramona Bags.

    Excerpt from “Scrott Pilgrim vs. The World”

34. Our toolkit It’s time to look in our Ramona Bags.

    Excerpt from “Scrott Pilgrim vs. The World”

35. Our toolkit

36. Investigation Inspired by: animation, architecture & industrial design

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

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

    From the Animator’s Survival Kit by Richard Williams

39. Investigation | The talented observer Stills from the DVD commentary

    on “Up”

40. Investigation | The talented observer Even if there’s nothing to

    look at, there’s always something to see.

41. Investigation | The talented observer Even if there’s nothing to

    look at, there’s always something to see.

42. Investigation | Sketching, a conversation in… Sketch with whatever you’ve

    got in your studio. (So keep fun things lying around).

43. 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

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

45. 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

46. 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

47. 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 Drawing by Spencer Nugent, www.spencernugent.com

48. 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 Drawing by Spencer Nugent, www.spencernugent.com

49. Communication | The art of concept drawing Focus on the

    important parts; create rich stories around them. Architectural concept by Benny Lee, Bread Studio

50. 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

51. Communication | the art of concept drawing

52. Communication | Technical drawings for all Wireframes are our go-to

    technical drawing, but what exactly should they communicate?

53. Communication | Technical drawings for all Wireframes are our go-to

    technical drawing, but what exactly should they communicate?

54. Communication | Technical drawings for all Getting technical. Engineering drawing

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

55. Communication | Technical drawings for all Getting technical. Engineering drawing

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

56. Communication | Technical drawings for all Mapmaking

57. Communication | Technical drawings for all Mapmaking

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

59. Validation | Our users, our characters We love looking at

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

60. 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

61. Validation | Our users, our characters From characters to storyboard

    Storyboards from ‘Batman the Animated Series’

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

63. None
64. None

65. Validation | Roughing it; sketch prototyping Sketch prototype A quick

    model of your design made from cheap materials.

66. Validation | Roughing it; sketch prototyping Sketch prototype A quick

    model of your design made from cheap materials.

67. Validation | Roughing it; sketch prototyping You just don’t know

    until you can feel it.

68. Validation | Roughing it; sketch prototyping You just don’t know

    until you can feel it.

69. Being like the shark So, how do we be like

    the shark? How do we find our 3/4 view?

70. 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.

71. Being like the shark Investigation: • ‘Just go look’ observation

    • Sketching, a conversation in…

72. Being like the shark Communication: • The art of concept

    drawing • Technical drawing for all

73. Being like the shark Validation • Our users; our characters

    • Roughing it;sketch prototyping

74. The makers of things 10 years ago we were pushing

    “invisible pixels” around.

75. 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.

76. 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.

77. 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 find our 3/4 view.

78. 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 find our 3/4 view.

79. 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!

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