'

The Fuzzy Line Between Design + Development

Понравилась презентация – покажи это...





Слайд 0

Hello! I’m Amanda @amandadorrell


Слайд 1

I’m Amanda Product design & front-end development


Слайд 2

Timely • • • 25 team members 8 Techbots Work remote


Слайд 3

#timelylife


Слайд 4


Слайд 5


Слайд 6


Слайд 7

#timelylife


Слайд 8

#timelylife


Слайд 9

#efficientlife


Слайд 10

Lean mean dev team


Слайд 11

Lean mean dev team + designer


Слайд 12

Lean mean dev team + designer ?


Слайд 13

“There’s this massive chasm between design and development”  - Brad Frost


Слайд 14

Design Development


Слайд 15

Static psds with measurements


Слайд 16


Слайд 17

but now • • • • • Responsive State changes Interactions Animations Web-based products


Слайд 18


Слайд 19


Слайд 20

Disconnect


Слайд 21

Us them vs


Слайд 22

However…


Слайд 23

We’re on the same team


Слайд 24

We’re on the same team With the same goals


Слайд 25

Goal: To make a quality product


Слайд 26

How do we get there? http://natlib.govt.nz/records/30665403


Слайд 27

Collaboration


Слайд 28

Design Development


Слайд 29

Design Development


Слайд 30

Get involved ASAP


Слайд 31

Get involved ASAP Decisions without a dev?


Слайд 32

Decisions Browser support


Слайд 33


Слайд 34


Слайд 35

caniuse.com


Слайд 36

caniuse.com


Слайд 37

Wire-framing


Слайд 38

text bacon ipsum because I want to and I can bacon ipsum because I want to and I can text 100 0 text text text


Слайд 39


Слайд 40

Frameworks


Слайд 41

Frameworks (Or lack of )


Слайд 42

Anything that moves


Слайд 43

Anything that moves • • • • Drop-downs Hovers Interactions Animations


Слайд 44


Слайд 45


Слайд 46

Styleguides


Слайд 47

github.com/styleguide


Слайд 48

github.com/styleguide


Слайд 49

yelp.com/styleguide


Слайд 50


Слайд 51

revert.io


Слайд 52

Styleguide


Слайд 53

MVP Styleguide


Слайд 54


Слайд 55

Revert styleguide: Speed up development useful for future additions constant iteration easy to test consistent design non-bloated CSS Showing to stakeholders


Слайд 56


Слайд 57

Visual inventory


Слайд 58


Слайд 59

Be Proactive


Слайд 60

Research & Share http://natlib.govt.nz/records/23223018


Слайд 61

Performance http://natlib.govt.nz/records/30665403


Слайд 62

Performance • • • • • Videos Animations Large images Fonts JS & CSS http://natlib.govt.nz/records/30665403


Слайд 63

The Checklist


Слайд 64

The Checklist Interactive items


Слайд 65

The Checklist Interactive items State changes


Слайд 66

The Checklist Interactive items State changes Really long text


Слайд 67

The Checklist Interactive items State changes Really long text Empty data


Слайд 68

The Checklist Interactive items State changes Really long text Empty data Different users


Слайд 69

The Checklist Interactive items State changes Really long text Empty data Different users Performance


Слайд 70

Transparency


Слайд 71

http://xkcd.com/1425/


Слайд 72

“ Surely it’s just an if statement ”


Слайд 73

Communication http://natlib.govt.nz/records/30665403


Слайд 74

Intentions Behind decisions


Слайд 75


Слайд 76


Слайд 77


Слайд 78


Слайд 79


Слайд 80


Слайд 81


Слайд 82

Do Not Compromise on intentions


Слайд 83

Remember your goal


Слайд 84

Outcome Surprise designs Last minute decisions Gaping holes “Just add this” Impossible to implement designs


Слайд 85

Outcome Surprise designs Last minute decisions Gaping holes “Just add this” Impossible to implement designs


Слайд 86

Outcome Surprise designs Last minute decisions Gaping holes “Just add this” Impossible to implement designs


Слайд 87

Outcome Surprise designs Last minute decisions Gaping holes “Just add this” Impossible to implement designs


Слайд 88

Outcome Surprise designs Last minute decisions Gaping holes “Just add this” Impossible to implement designs


Слайд 89

Outcome Surprise designs Last minute decisions Gaping holes “Just add this” Impossible to implement designs


Слайд 90

Thank you! @amandadorrell


Слайд 91


×

HTML:





Ссылка: