Presented at Web Unleashed 2016 by Liam Oscar Thurston, TWG FITC produces events for digital creators in Toronto, Amsterdam, NYC and beyond Save 10% off any of our events with discount code 'slideshare' Check out our events at http://fitc.ca or follow us at https://twitter.com/fitc Overview Wondering why your designers are pestering you about line height again? Nudging elements over 3 pixels… and then back again? Having to explain the difference between margin and padding for the hundredth time? Let’s have a healthy, honest, and real couples therapy session about how to understand the nags and nuances of design and how it translates to captivating front-end experiences. We’ll learn a little Design 101 for Front-End, how to negotiate and resolve conflict, and some tips and tricks about great design and front-end hand-off processes. Objective Teaching designers and front-end developers how to empathize with and understand each other. Target Audience Product designers, front-end developers, product managers, curious creatives. Assumed Audience Knowledge Intermediate understanding of design and front-end development. Five Things Audience Members Will Learn Design 101 for Front-Enders Front-End 101 for Designers Conflict resolution Empathy tools Design hand-off tips and tricks

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

2. Shit Designers & Devs Say
The Agile Manifesto (?!)
Radical Candor!
Group Therapy xoxo
COUPLES THERAPY, LET’S PARTY

3. INSTALLATION BY TREVOR WHEATLEY

4. TWG.IO

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

6. “Oh … I thought you could
cut out those assets…”
WHEN LAZY DESIGNERS SAY

7. Own it.
TM

9. “So … when are you
designing … all those
screens?”
WHEN NAGGING DEVELOPERS SAY

10. Pair up.

11. Hands you the
messiest file…
WHEN A STONED DESIGNER

12. Speak
the Same
Language

13. B
E
M

14. Block
Element
Modifier

15. blockName-elementName--modifierName

18. blockName-elementName--modifierName
BEM
userList-inviteButton--disabled

19. blockName-elementName--modifierName
BEM
userList-inviteButton--active

20. blockName-elementName--modifierName
BEM
userList-inviteButton--active
userList-userName

22. grey-light
grey-medium
grey-dark
light-grey
medium-grey
dark-grey

27. “Heyo, there seem to be
some things … missing
in this styleguide …”
WHEN A PASSIVE-AGGRESSIVE DEVELOPER SAYS

28. States: the
Obvious

30. C.I.S.S.
SMOOCH!

32. States: the
Obvious

33. When __________________,
I want to _______________,
so I can ________________.
JOB STORIES RULE
SITUATION
MOTIVATION
EXPECTED OUTCOME
BLOG.INTERCOM.COM

34. When I need help from
a group member,
I want to find their
contact info,
so I can connect with
them quickly.
JOB STORIES RULE

35. When I need help from
a group member,
I want to find their
contact info,
so I can connect with
them quickly.
JOB STORIES RULE

36. “What’s with all this …
white space?”
WHEN DEVELOPERS CALL YOU OUT

37. Your Spacing
is Inconsistent
DON’T
SPACE
OUT!

39. .spacer--sm
.spacer
.spacer--lg
.spacer

52. “Wow, these lines lengths
and photos are just …
perfect.”
WHEN SARCASTIC DEVELOPERS SAY

53. Use Real
Content.com
THIS
DOMAIN IS
AVAILABLE
!

55. “So, you used about…
50 shades of grey.”
WHEN WELL-READ DEVELOPERS SAY

56. You used 63
shades of
grey.

57. Try
starting
with 3

58. “Hey I’m thinking we
might use Zeplin …”
WHEN LAZY DESIGNERS SAY

59. Use
Zeplin.

66. “Hey, I built that component
that I saw in Zeplin…”
WHEN SPACED-OUT DEVELOPERS SAY

67. Keep your
files fresh.

68. “I’ll do some design QA
tonight…”
WHEN PASSIVE-AGGRESSIVE DESIGNERS SAY

69. “I’ll do some design QA
tonight…”
WHEN PASSIVE-AGGRESSIVE DESIGNERS SAY

70. Stay close. ALWAYS
BE
QA’IN!

71. “Damn that user testing
session was great, we
learned so much!”
WHEN PRETENTIOUS DESIGNERS SAY

72. Come
Together.

73. The Agile
Manifesto.

74. Individuals & interaction
over processes & tools
AGILE MANIFESTO

75. Working software over
comprehensive documentation
AGILE MANIFESTO

76. Customer collaboration
over contract negotiation
AGILE MANIFESTO

77. Responding to change
over following a plan
AGILE MANIFESTO

78. Radical
Candor.

79. Ruinous
Empathy
CHALLENGE
DIRECTLY
Radical
Candor
Manipulative
Insincerity
Obnoxious
Aggression
CARE
PERSONALLY
BULLSHIT
FREE
ZONE

80. “Oh … I thought you could
cut out those assets…”
WHEN LAZY DESIGNERS SAY

81. “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

82. YOUR TURN

83. Hope Fear
This week, in your role,
what is your biggest…

84. Pros Cons
Now help your partner avoid their
fear using Radical Candor
Care personally & challenge
directly

85. Shit Designers & Devs Say
The Agile Manifesto (?!)
Radical Candor!
Group Therapy xoxo
COUPLES THERAPY, WE PARTIED

86. Questions?!
Liam Oscar Thurston
@liamthurston
Creative Director

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