We are the Makers of Things

Slides from my talk at Web Directions South, Sydney 2011. More info here: http://south11.webdirections.org/program/design#designing-without-the-browser

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,
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)
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:
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’?
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: han@hannahdonovan.com