Design, Device, Delight

Slide 1

Slide 1 text

Design, Device, Delight For slides: @innerhtml

Slide 2

Slide 2 text

Then Now “Code” by useiconic.com “Golden-Ratio” by Jae Aquino For slides: @innerhtml

Slide 3

Slide 3 text

Design to delight “Happy” by Michael Hourigan

Slide 4

Slide 4 text

Delightful design is… • personalized (Carolyn Chandler, Brian Henkel) • responsive to orientation, tap & gesture • culturally relevant (Will Sullivan) • ﬂuid in interaction & animation (Cory Hudson) • predictably worthwhile (Brandon Harris) • graceful amidst network interruptions • accepting of intermittent partial attention (Cate Hudson)

Slide 5

Slide 5 text

Design together “Group-Think” by Jose Morbán

Slide 6

Slide 6 text

– Some developer (probably) “Keep your friends close and your designers closer”

Slide 7

Slide 7 text

– Some designer (probably) “Keep your friends close and your designers developers closer”

Slide 8

Slide 8 text

Sharing context • Early and frequent collaboration • Design considering development • Implement considering user experience • Having trouble? Colocate!

Slide 9

Slide 9 text

Scale, fade, blur

Slide 10

Slide 10 text

Scale, fade, blur

Slide 11

Slide 11 text

Design for reality “Devices” by Kelig Le Luron

Slide 12

Slide 12 text

Device reality • Physical size & orientation • Pixel dimensions & density • Network & disk IO • Processor(s) speed • Available memory (main & video) • Device platform

Slide 13

Slide 13 text

http://webbyawards.com/winners/2014/mobile-apps/all-devices/best-user-experience

Slide 14

Slide 14 text

No content

Slide 15

Slide 15 text

Tiles intersecting the viewport Pre-painted to cover scrolling TiledBackingStore Source: https://trac.webkit.org/browser/trunk/Source/ WebCore/platform/graphics/TiledBackingStore.cpp

Slide 16

Slide 16 text

No content

Slide 17

Slide 17 text

Design for time “Watch” by Julien Deveaux

Slide 18

Slide 18 text

Menu icons available immediately? Shenanigans!

Slide 19

Slide 19 text

Avoid chasing unicorns • Beware of immediate content updates • Plan for graceful introduction of resources over time • Preload carefully

Slide 20

Slide 20 text

Collaborate & share context Innovate within constraints Plan for time

Slide 21

Slide 21 text

Attributions Creative Commons – Attribution (CC BY 3.0) Golden Ratio designed by Jae Aquino from the Noun Project http://thenounproject.com/term/golden-ratio/9361/ ! Creative Commons – Attribution (CC BY 3.0) Code designed by useiconic.com from the Noun Project http://thenounproject.com/term/code/45869/ ! Creative Commons – Attribution (CC BY 3.0) Happy designed by Michael Hourigan from the Noun Project http://thenounproject.com/term/happy/3540/ ! Creative Commons – Attribution (CC BY 3.0) Group Think designed by Jose Morbán from the Noun Project http://thenounproject.com/term/happy/3540/ ! Creative Commons – Attribution (CC BY 3.0) Devices designed by Kelig Le Luron from the Noun Project http://thenounproject.com/term/devices/38380/ ! Creative Commons – Attribution (CC BY 3.0) Watch designed by Julien Deveaux from the Noun Project http://thenounproject.com/term/watch/48017/

Slide 22

Slide 22 text

jobs.netﬂix.com For slides: @innerhtml