The Fuzzy Line Between Design + Development


The Presentation inside:

Slide 0

Hello! I’m Amanda @amandadorrell


Slide 1

I’m Amanda Product design & front-end development


Slide 2

Timely • • • 25 team members 8 Techbots Work remote


Slide 3

#timelylife


Slide 4


Slide 5


Slide 6


Slide 7

#timelylife


Slide 8

#timelylife


Slide 9

#efficientlife


Slide 10

Lean mean dev team


Slide 11

Lean mean dev team + designer


Slide 12

Lean mean dev team + designer ?


Slide 13

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


Slide 14

Design Development


Slide 15

Static psds with measurements


Slide 16


Slide 17

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


Slide 18


Slide 19


Slide 20

Disconnect


Slide 21

Us them vs


Slide 22

However…


Slide 23

We’re on the same team


Slide 24

We’re on the same team With the same goals


Slide 25

Goal: To make a quality product


Slide 26

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


Slide 27

Collaboration


Slide 28

Design Development


Slide 29

Design Development


Slide 30

Get involved ASAP


Slide 31

Get involved ASAP Decisions without a dev?


Slide 32

Decisions Browser support


Slide 33


Slide 34


Slide 35

caniuse.com


Slide 36

caniuse.com


Slide 37

Wire-framing


Slide 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


Slide 39


Slide 40

Frameworks


Slide 41

Frameworks (Or lack of )


Slide 42

Anything that moves


Slide 43

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


Slide 44


Slide 45


Slide 46

Styleguides


Slide 47

github.com/styleguide


Slide 48

github.com/styleguide


Slide 49

yelp.com/styleguide


Slide 50


Slide 51

revert.io


Slide 52

Styleguide


Slide 53

MVP Styleguide


Slide 54


Slide 55

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


Slide 56


Slide 57

Visual inventory


Slide 58


Slide 59

Be Proactive


Slide 60

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


Slide 61

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


Slide 62

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


Slide 63

The Checklist


Slide 64

The Checklist Interactive items


Slide 65

The Checklist Interactive items State changes


Slide 66

The Checklist Interactive items State changes Really long text


Slide 67

The Checklist Interactive items State changes Really long text Empty data


Slide 68

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


Slide 69

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


Slide 70

Transparency


Slide 71

http://xkcd.com/1425/


Slide 72

“ Surely it’s just an if statement ”


Slide 73

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


Slide 74

Intentions Behind decisions


Slide 75


Slide 76


Slide 77


Slide 78


Slide 79


Slide 80


Slide 81


Slide 82

Do Not Compromise on intentions


Slide 83

Remember your goal


Slide 84

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


Slide 85

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


Slide 86

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


Slide 87

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


Slide 88

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


Slide 89

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


Slide 90

Thank you! @amandadorrell


Slide 91


×

HTML:





Ссылка: