Tweet
Tweet

Slide 1

Slide 1 text

#mitd #ibmdesign @kevinSuttle The Medium is the Deliverable Kevin Suttle Front-end Developer. Design Lead. IBM Design

Slide 2

Slide 2 text

@kevinSuttle #mitd #ibmdesign

Slide 3

Slide 3 text

#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

Slide 4

Slide 4 text

#mitd #ibmdesign @kevinSuttle

Slide 5

Slide 5 text

#mitd #ibmdesign @kevinSuttle

Slide 6

Slide 6 text

#mitd #ibmdesign @kevinSuttle

Slide 7

Slide 7 text

#mitd #ibmdesign @kevinSuttle

Slide 8

Slide 8 text

#mitd #ibmdesign @kevinSuttle ibm.com/design/language

Slide 9

Slide 9 text

ibm.com/design We're hiring.

Slide 10

Slide 10 text

#mitd #ibmdesign @kevinSuttle bluemix.net

Slide 11

Slide 11 text

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.

Slide 12

Slide 12 text

#mitd #ibmdesign @kevinSuttle Painters know canvas and paint Sculptors know stone and sand Designers know Photoshop?

Slide 13

Slide 13 text

#mitd #ibmdesign @kevinSuttle Disconnection from our medium means a disconnection from our users.

Slide 14

Slide 14 text

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

Slide 15

Slide 15 text

#mitd #ibmdesign @kevinSuttle

Slide 16

Slide 16 text

#mitd #ibmdesign @kevinSuttle

Slide 17

Slide 17 text

#mitd #ibmdesign @kevinSuttle

Slide 18

Slide 18 text

#mitd #ibmdesign @kevinSuttle “No one would do [x] on their phones.” - Some know-it-all jackass

Slide 19

Slide 19 text

#mitd #ibmdesign @kevinSuttle

Slide 20

Slide 20 text

#mitd #ibmdesign @kevinSuttle The best interface is the one you have with you.

Slide 21

Slide 21 text

#mitd #ibmdesign @kevinSuttle

Slide 22

Slide 22 text

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

Slide 23

Slide 23 text

#mitd #ibmdesign @kevinSuttle Knowing our medium is directly proportional to 
 the effectiveness of our designs.

Slide 24

Slide 24 text

#mitd #ibmdesign @kevinSuttle Static comps are useful for showing one possible layout, 
 exactly one time, on one device.

Slide 25

Slide 25 text

#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

Slide 26

Slide 26 text

#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

Slide 27

Slide 27 text

#mitd #ibmdesign @kevinSuttle “You can use an eraser on the drafting table or a sledge hammer on the construction site.” - Frank Lloyd Wright

Slide 28

Slide 28 text

#mitd #ibmdesign @kevinSuttle

Slide 29

Slide 29 text

#mitd #ibmdesign @kevinSuttle The fallacy of “Phone, tablet, and desktop.”

Slide 30

Slide 30 text

#mitd #ibmdesign @kevinSuttle

Slide 31

Slide 31 text

#mitd #ibmdesign @kevinSuttle Screen resolution doesn't indicate much at all.

Slide 32

Slide 32 text

#mitd #ibmdesign @kevinSuttle Screen size doesn't indicate how a device is used.

Slide 33

Slide 33 text

#mitd #ibmdesign @kevinSuttle

Slide 34

Slide 34 text

#mitd #ibmdesign @kevinSuttle Screen size doesn't indicate viewing distance.

Slide 35

Slide 35 text

#mitd #ibmdesign @kevinSuttle Breakpoints are defined by content, not the other way around.

Slide 36

Slide 36 text

#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

Slide 37

Slide 37 text

#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

Slide 38

Slide 38 text

#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)

Slide 39

Slide 39 text

#mitd #ibmdesign @kevinSuttle Get in the browser earlier. Understand the limitations and freedoms of the medium for which we all design.

Slide 40

Slide 40 text

#mitd #ibmdesign @kevinSuttle Do this by making your deliverables mobile-first, and responsive.

Slide 41

Slide 41 text

#mitd #ibmdesign @kevinSuttle Mobile-first design is not about screen size. It's about keeping focus on the content people care about.

Slide 42

Slide 42 text

#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.”

Slide 43

Slide 43 text

#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

Slide 44

Slide 44 text

#mitd #ibmdesign @kevinSuttle To the user, the interface is the product.

Slide 45

Slide 45 text

#mitd #ibmdesign @kevinSuttle To the user, the interface is the product. To the user, the API is the product.

Slide 46

Slide 46 text

#mitd #ibmdesign @kevinSuttle The most realistic, informed prototypes are the ones that use live data APIs.

Slide 47

Slide 47 text

#mitd #ibmdesign @kevinSuttle We should not be thinking in terms of pages anymore.

Slide 48

Slide 48 text

#mitd #ibmdesign @kevinSuttle

Slide 49

Slide 49 text

#mitd #ibmdesign @kevinSuttle

Slide 50

Slide 50 text

#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

Slide 51

Slide 51 text

#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

Slide 52

Slide 52 text

#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

Slide 53

Slide 53 text

#mitd #ibmdesign @kevinSuttle The less real your design is, the less you can trust user tests.

Slide 54

Slide 54 text

#mitd #ibmdesign @kevinSuttle Get out of the building. Put your product into someone’s hands. Watch them struggle using it.

Slide 55

Slide 55 text

#mitd #ibmdesign @kevinSuttle The message today is not “go learn how to code.”

Slide 56

Slide 56 text

#mitd #ibmdesign @kevinSuttle The message today is not “go learn how to code.” But that’s also not not the message.

Slide 57

Slide 57 text

#mitd #ibmdesign @kevinSuttle :)

Slide 58

Slide 58 text

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

Slide 59

Slide 59 text

#mitd #ibmdesign @kevinSuttle Thank you.