design & front-end: couples therapy

87
Couples Therapy For Designers & Front-end Developers Liam Oscar Thurston @liamthurston Creative Director

Upload: fitc

Post on 14-Feb-2017

212 views

Category:

Internet


1 download

TRANSCRIPT

Page 1: Design & Front-End: Couples Therapy

Couples Therapy For Designers

& Front-end Developers

Liam Oscar Thurston @liamthurston Creative Director

Page 2: Design & Front-End: Couples Therapy

Shit Designers & Devs Say The Agile Manifesto (?!) Radical Candor! Group Therapy xoxo

COUPLES THERAPY, LET ’S PART Y

Page 3: Design & Front-End: Couples Therapy

INSTALLATION BY TREVOR WHE ATLEY

Page 4: Design & Front-End: Couples Therapy

T WG . I O

Page 5: Design & Front-End: Couples Therapy

Sh!t Des!g~ers & Devel*per$ S@y

Page 6: Design & Front-End: Couples Therapy

“Oh … I thought you could cut out those assets…”

WHEN LAZY DESIGNERS SAY

Page 7: Design & Front-End: Couples Therapy

Own it. TM

Page 8: Design & Front-End: Couples Therapy
Page 9: Design & Front-End: Couples Therapy

“So … when are you designing … all those screens?”

WHEN NAGGING DEVELOPERS SAY

Page 10: Design & Front-End: Couples Therapy

Pair up.

Page 11: Design & Front-End: Couples Therapy

Hands you the messiest file…

WHEN A STONED DESIGNER

Page 12: Design & Front-End: Couples Therapy

Speakthe SameLanguage

Page 13: Design & Front-End: Couples Therapy

B E M

Page 14: Design & Front-End: Couples Therapy

Block Element Modifier

Page 15: Design & Front-End: Couples Therapy

blockName-elementName--modifierName

Page 16: Design & Front-End: Couples Therapy
Page 17: Design & Front-End: Couples Therapy
Page 18: Design & Front-End: Couples Therapy

blockName-elementName--modifierName

BEM

userList-inviteButton--disabled

Page 19: Design & Front-End: Couples Therapy

blockName-elementName--modifierName

BEM

userList-inviteButton--active

Page 20: Design & Front-End: Couples Therapy

blockName-elementName--modifierName

BEM

userList-inviteButton--active

userList-userName

Page 21: Design & Front-End: Couples Therapy
Page 22: Design & Front-End: Couples Therapy

grey-light grey-medium grey-dark

light-grey medium-grey dark-grey

Page 23: Design & Front-End: Couples Therapy
Page 24: Design & Front-End: Couples Therapy
Page 25: Design & Front-End: Couples Therapy
Page 26: Design & Front-End: Couples Therapy
Page 27: Design & Front-End: Couples Therapy

“Heyo, there seem to be some things … missing in this styleguide …”

WHEN A PASSIVE-AGGRESSIVE DEVELOPER SAYS

Page 28: Design & Front-End: Couples Therapy

States: the Obvious

Page 29: Design & Front-End: Couples Therapy
Page 30: Design & Front-End: Couples Therapy

C.I.S.S.

SMOOCH!

Page 31: Design & Front-End: Couples Therapy
Page 32: Design & Front-End: Couples Therapy

States: the Obvious

Page 33: Design & Front-End: Couples Therapy

When __________________,

I want to _______________,

so I can ________________.

JOB STORIES R ULE

SITUATION

MOTIVATION

EXPECTED OUTCOME

B LO G . I N T E R C O M .C O M

Page 34: Design & Front-End: Couples Therapy

When I need help from a group member,

I want to find their contact info,

so I can connect with them quickly.

JOB STORIES R ULE

Page 35: Design & Front-End: Couples Therapy

When I need help from a group member,

I want to find their contact info,

so I can connect with them quickly.

JOB STORIES R ULE

Page 36: Design & Front-End: Couples Therapy

“What’s with all this … white space?”

WHEN DEVELOPERS CALL YOU OUT

Page 37: Design & Front-End: Couples Therapy

Your Spacing is Inconsistent

DON’T SPACE

OUT!

Page 38: Design & Front-End: Couples Therapy
Page 39: Design & Front-End: Couples Therapy

.spacer--sm

.spacer

.spacer--lg

.spacer

Page 40: Design & Front-End: Couples Therapy
Page 41: Design & Front-End: Couples Therapy
Page 42: Design & Front-End: Couples Therapy
Page 43: Design & Front-End: Couples Therapy
Page 44: Design & Front-End: Couples Therapy
Page 45: Design & Front-End: Couples Therapy
Page 46: Design & Front-End: Couples Therapy
Page 47: Design & Front-End: Couples Therapy
Page 48: Design & Front-End: Couples Therapy
Page 49: Design & Front-End: Couples Therapy
Page 50: Design & Front-End: Couples Therapy
Page 51: Design & Front-End: Couples Therapy
Page 52: Design & Front-End: Couples Therapy

“Wow, these lines lengths and photos are just … perfect.”

WHEN SARCASTIC DEVELOPERS SAY

Page 53: Design & Front-End: Couples Therapy

Use Real Content.com

THIS

DOMAIN IS

AVAILABLE!

Page 54: Design & Front-End: Couples Therapy
Page 55: Design & Front-End: Couples Therapy

“So, you used about… 50 shades of grey.”

WHEN WELL-RE AD DEVELOPERS SAY

Page 56: Design & Front-End: Couples Therapy

You used 63 shades of grey.

Page 57: Design & Front-End: Couples Therapy

Try starting with 3

Page 58: Design & Front-End: Couples Therapy

“Hey I’m thinking we might use Zeplin …”

WHEN LAZY DESIGNERS SAY

Page 59: Design & Front-End: Couples Therapy

Use Zeplin.

Page 60: Design & Front-End: Couples Therapy
Page 61: Design & Front-End: Couples Therapy
Page 62: Design & Front-End: Couples Therapy
Page 63: Design & Front-End: Couples Therapy
Page 64: Design & Front-End: Couples Therapy
Page 65: Design & Front-End: Couples Therapy
Page 66: Design & Front-End: Couples Therapy

“Hey, I built that component that I saw in Zeplin…”

WHEN SPACED-OUT DEVELOPERS SAY

Page 67: Design & Front-End: Couples Therapy

Keep your files fresh.

Page 68: Design & Front-End: Couples Therapy

“I’ll do some design QA tonight…”

WHEN PASSIVE-AGGRESSIVE DESIGNERS SAY

Page 69: Design & Front-End: Couples Therapy

“I’ll do some design QA tonight…”

WHEN PASSIVE-AGGRESSIVE DESIGNERS SAY

Page 70: Design & Front-End: Couples Therapy

Stay close. ALWAYS BE

QA’IN!

Page 71: Design & Front-End: Couples Therapy

“Damn that user testing session was great, we learned so much!”

WHEN PRETENTIOU S DESIGNERS SAY

Page 72: Design & Front-End: Couples Therapy

Come Together.

Page 73: Design & Front-End: Couples Therapy

The Agile Manifesto.

Page 74: Design & Front-End: Couples Therapy

Individuals & interaction over processes & tools

AGILE MANIFESTO

Page 75: Design & Front-End: Couples Therapy

Working software over comprehensive documentation

AGILE MANIFESTO

Page 76: Design & Front-End: Couples Therapy

Customer collaboration over contract negotiation

AGILE MANIFESTO

Page 77: Design & Front-End: Couples Therapy

Responding to change over following a plan

AGILE MANIFESTO

Page 78: Design & Front-End: Couples Therapy

Radical Candor.

Page 79: Design & Front-End: Couples Therapy

Ruinous Empathy

CHALLENGE DIRECTLY

Radical Candor

Manipulative Insincerity

Obnoxious Aggression

CARE PERSONALLY

BULLSHIT

FREE ZONE

Page 80: Design & Front-End: Couples Therapy

“Oh … I thought you could cut out those assets…”

WHEN LAZY DESIGNERS SAY

Page 81: Design & Front-End: Couples Therapy

“Oh … I thought you could cut out those assets…”

WHEN LAZY DESIGNERS SAY

SOLUTIONS PROS CONS

I can do it now I’ll do it tomorrow You should do it

It’s done It’s done late I don’t do it

I don’t have time Project delays You do it

Page 82: Design & Front-End: Couples Therapy

YOUR TURN

Page 83: Design & Front-End: Couples Therapy

Hope Fear

This week, in your role, what is your biggest…

Page 84: Design & Front-End: Couples Therapy

Pros Cons

Now help your partner avoid their fear using Radical Candor

Care personally & challenge directly

Page 85: Design & Front-End: Couples Therapy

Shit Designers & Devs Say The Agile Manifesto (?!) Radical Candor! Group Therapy xoxo

COUPLES THERAPY, WE PARTIED

Page 86: Design & Front-End: Couples Therapy

Questions?! Liam Oscar Thurston @liamthurston Creative Director

Page 87: Design & Front-End: Couples Therapy

Couples Therapy For Designers

& Front-end Developers

Liam Oscar Thurston @liamthurston Creative Director