The Medium is the Deliverable

SXSW 2015 Future 15 panel session. Full overview: http://schedule.sxsw.com/2015/events/event_IAP30897

Transcript

1. #mitd #ibmdesign @kevinSuttle The Medium is the Deliverable Kevin Suttle Front-end Developer. Design Lead. IBM Design
2. @kevinSuttle #mitd #ibmdesign
3. #mitd #ibmdesign @kevinSuttle A bit of background •Background in UI Design/Engineering and Information Architecture, across devices •Worked on projects for Apple, Exxon/Esso, Procter & Gamble, Honda, and more •Featured author for Forbes, O’Reilly Media, UX Magazine, Adobe Developer Connection, and Medium •Presented at SXSW, SmashingConf, FITC, Adobe MAX, OSCON, RIA Unleashed, and more •Named an Adobe Community Professional •Over a decade's worth of product design experience kevinsuttle.com
4. #mitd #ibmdesign @kevinSuttle
5. #mitd #ibmdesign @kevinSuttle
6. #mitd #ibmdesign @kevinSuttle
7. #mitd #ibmdesign @kevinSuttle
8. #mitd #ibmdesign @kevinSuttle ibm.com/design/language
9. ibm.com/design We're hiring.
10. #mitd #ibmdesign @kevinSuttle bluemix.net
11. IBM Design :: IBM Confidential :: ©2014 IBM Corporation IBM Bluemix Bluemix is a Platform as a Service (PaaS) offering for developers to compose apps and services in the cloud.
12. #mitd #ibmdesign @kevinSuttle Painters know canvas and paint Sculptors know stone and sand Designers know Photoshop?
13. #mitd #ibmdesign @kevinSuttle Disconnection from our medium means a disconnection from our users.
14. #mitd #ibmdesign @kevinSuttle Literally everything we do ends up on the Web, which means it ends up on mobile, taxi TVs, watches, gas pump TVs, refrigerators, car dashboards, watches, eyeglasses...
15. #mitd #ibmdesign @kevinSuttle
16. #mitd #ibmdesign @kevinSuttle
17. #mitd #ibmdesign @kevinSuttle
18. #mitd #ibmdesign @kevinSuttle “No one would do [x] on their phones.” - Some know-it-all jackass
19. #mitd #ibmdesign @kevinSuttle
20. #mitd #ibmdesign @kevinSuttle The best interface is the one you have with you.
21. #mitd #ibmdesign @kevinSuttle
22. #mitd #ibmdesign @kevinSuttle The best interface is the one you have with you. The best interface is the one you have in front of you at the time.
23. #mitd #ibmdesign @kevinSuttle Knowing our medium is directly proportional to 
 the effectiveness of our designs.
24. #mitd #ibmdesign @kevinSuttle Static comps are useful for showing one possible layout, 
 exactly one time, on one device.
25. #mitd #ibmdesign @kevinSuttle “Worse still are the expectations that static visuals set in the minds of clients, particularly when designers use these visuals as a method to get sign-off for a design.” - Andy Clarke
26. #mitd #ibmdesign @kevinSuttle static design absentee list speed/performance transitions between states animation affordances the effects of responsive layouts what will happen when text sizes are changed font fallbacks internationalization browser inconsistencies asynchronous content a ton more you won’t even think about until it’s broken or looks like crap
27. #mitd #ibmdesign @kevinSuttle “You can use an eraser on the drafting table or a sledge hammer on the construction site.” - Frank Lloyd Wright
28. #mitd #ibmdesign @kevinSuttle
29. #mitd #ibmdesign @kevinSuttle The fallacy of “Phone, tablet, and desktop.”
30. #mitd #ibmdesign @kevinSuttle
31. #mitd #ibmdesign @kevinSuttle Screen resolution doesn't indicate much at all.
32. #mitd #ibmdesign @kevinSuttle Screen size doesn't indicate how a device is used.
33. #mitd #ibmdesign @kevinSuttle
34. #mitd #ibmdesign @kevinSuttle Screen size doesn't indicate viewing distance.
35. #mitd #ibmdesign @kevinSuttle Breakpoints are defined by content, not the other way around.
36. #mitd #ibmdesign @kevinSuttle “The content informs the interaction decisions and tells you when a design will break. How can Lorem Ipsum do that?” - Steve Fisher/Alaine Mackenzie
37. #mitd #ibmdesign @kevinSuttle “...we need to shed the notion that we create layouts from a canvas in. We need to flip it on its head, and create layouts from the content out.” - Mark Boulton
38. #mitd #ibmdesign @kevinSuttle “Perhaps the inability to “control” a page is a limitation, a bug of the web. When we come from the WYSIWYG world, our initial instinct is to think so. I admit that it was my first response, and a belief that was a long time in going. But I no longer feel that it is a limitation, I see it as a strength of a new medium.” - John Allsop A Dao of Web Design (2000)
39. #mitd #ibmdesign @kevinSuttle Get in the browser earlier. Understand the limitations and freedoms of the medium for which we all design.
40. #mitd #ibmdesign @kevinSuttle Do this by making your deliverables mobile-first, and responsive.
41. #mitd #ibmdesign @kevinSuttle Mobile-first design is not about screen size. It's about keeping focus on the content people care about.
42. #mitd #ibmdesign @kevinSuttle - Brad Frost “[hi-fis] are a crutch – Writing book chapter-length annotations is a incredibly poor substitute for actually communicating and collaborating with clients and colleagues.”
43. #mitd #ibmdesign @kevinSuttle “spending a lot of time generating a bunch of [high fidelity] fixed-width, non-interactive wireframes doesn’t make much sense. [...] These documents end up limiting the design and technical possibilities.” - Brad Frost
44. #mitd #ibmdesign @kevinSuttle To the user, the interface is the product.
45. #mitd #ibmdesign @kevinSuttle To the user, the interface is the product. To the user, the API is the product.
46. #mitd #ibmdesign @kevinSuttle The most realistic, informed prototypes are the ones that use live data APIs.
47. #mitd #ibmdesign @kevinSuttle We should not be thinking in terms of pages anymore.
48. #mitd #ibmdesign @kevinSuttle
49. #mitd #ibmdesign @kevinSuttle
50. #mitd #ibmdesign @kevinSuttle Challenges for current Devs Become more effective at - communicating the needs of your medium (write, present a lot more) - gaining empathy for non-developers - learning to become a liaison for design <--> engineering - getting involved on day 1
51. #mitd #ibmdesign @kevinSuttle Non-devs Become more effective at communicating design by - illustrating transitions, interaction, and responsiveness - sharing a vocabulary with developers - gaining empathy for developers - planning for the unpredictability of the Web - considering future-proofing and scale - getting devs involved on day 1
52. #mitd #ibmdesign @kevinSuttle Product managers - align on what success means, and how you'll measure it - get everyone in the browser earlier - plan for the build -> measure -> learn -> iterate loop - include experiments constantly - experience and crave a real user testing your product, hope it fails
53. #mitd #ibmdesign @kevinSuttle The less real your design is, the less you can trust user tests.
54. #mitd #ibmdesign @kevinSuttle Get out of the building. Put your product into someone’s hands. Watch them struggle using it.
55. #mitd #ibmdesign @kevinSuttle The message today is not “go learn how to code.”
56. #mitd #ibmdesign @kevinSuttle The message today is not “go learn how to code.” But that’s also not not the message.
57. #mitd #ibmdesign @kevinSuttle :)
58. #mitd #ibmdesign @kevinSuttle Code is a design tool. The Web is your medium and your deliverable. The medium is where your users are. Go meet them.
59. #mitd #ibmdesign @kevinSuttle Thank you.