Upgrade to Pro — share decks privately, control downloads, hide ads and more …

The Medium is the Deliverable

Kevin Suttle
March 15, 2015

The Medium is the Deliverable

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

Kevin Suttle

March 15, 2015
Tweet

More Decks by Kevin Suttle

Other Decks in Design

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.