Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Design & Front-End: Couples Therapy

498 views

Published on

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

Published in: Internet
  • Be the first to comment

Design & Front-End: Couples Therapy

  1. 1. Couples Therapy For Designers & Front-end Developers Liam Oscar Thurston @liamthurston Creative Director
  2. 2. Shit Designers & Devs Say The Agile Manifesto (?!) Radical Candor! Group Therapy xoxo COUPLES THERAPY, LET’S PARTY
  3. 3. INSTALLATION BY TREVOR WHEATLEY
  4. 4. TWG.IO
  5. 5. Sh!t Des!g~ers & Devel*per$ S@y
  6. 6. “Oh … I thought you could cut out those assets…” WHEN LAZY DESIGNERS SAY
  7. 7. Own it. TM
  8. 8. “So … when are you designing … all those screens?” WHEN NAGGING DEVELOPERS SAY
  9. 9. Pair up.
  10. 10. Hands you the messiest file… WHEN A STONED DESIGNER
  11. 11. Speak the Same Language
  12. 12. B E M
  13. 13. Block Element Modifier
  14. 14. blockName-elementName--modifierName
  15. 15. blockName-elementName--modifierName BEM userList-inviteButton--disabled
  16. 16. blockName-elementName--modifierName BEM userList-inviteButton--active
  17. 17. blockName-elementName--modifierName BEM userList-inviteButton--active userList-userName
  18. 18. grey-light grey-medium grey-dark light-grey medium-grey dark-grey
  19. 19. “Heyo, there seem to be some things … missing in this styleguide …” WHEN A PASSIVE-AGGRESSIVE DEVELOPER SAYS
  20. 20. States: the Obvious
  21. 21. C.I.S.S. SMOOCH!
  22. 22. States: the Obvious
  23. 23. When __________________, I want to _______________, so I can ________________. JOB STORIES RULE SITUATION MOTIVATION EXPECTED OUTCOME BLOG.INTERCOM.COM
  24. 24. 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
  25. 25. 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
  26. 26. “What’s with all this … white space?” WHEN DEVELOPERS CALL YOU OUT
  27. 27. Your Spacing is Inconsistent DON’T SPACE OUT!
  28. 28. .spacer--sm .spacer .spacer--lg .spacer
  29. 29. “Wow, these lines lengths and photos are just … perfect.” WHEN SARCASTIC DEVELOPERS SAY
  30. 30. Use Real Content.com THIS DOMAIN IS AVAILABLE !
  31. 31. “So, you used about… 50 shades of grey.” WHEN WELL-READ DEVELOPERS SAY
  32. 32. You used 63 shades of grey.
  33. 33. Try starting with 3
  34. 34. “Hey I’m thinking we might use Zeplin …” WHEN LAZY DESIGNERS SAY
  35. 35. Use Zeplin.
  36. 36. “Hey, I built that component that I saw in Zeplin…” WHEN SPACED-OUT DEVELOPERS SAY
  37. 37. Keep your files fresh.
  38. 38. “I’ll do some design QA tonight…” WHEN PASSIVE-AGGRESSIVE DESIGNERS SAY
  39. 39. “I’ll do some design QA tonight…” WHEN PASSIVE-AGGRESSIVE DESIGNERS SAY
  40. 40. Stay close. ALWAYS BE QA’IN!
  41. 41. “Damn that user testing session was great, we learned so much!” WHEN PRETENTIOUS DESIGNERS SAY
  42. 42. Come Together.
  43. 43. The Agile Manifesto.
  44. 44. Individuals & interaction over processes & tools AGILE MANIFESTO
  45. 45. Working software over comprehensive documentation AGILE MANIFESTO
  46. 46. Customer collaboration over contract negotiation AGILE MANIFESTO
  47. 47. Responding to change over following a plan AGILE MANIFESTO
  48. 48. Radical Candor.
  49. 49. Ruinous Empathy CHALLENGE DIRECTLY Radical Candor Manipulative Insincerity Obnoxious Aggression CARE PERSONALLY BULLSHIT FREE ZONE
  50. 50. “Oh … I thought you could cut out those assets…” WHEN LAZY DESIGNERS SAY
  51. 51. “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
  52. 52. YOUR TURN
  53. 53. Hope Fear This week, in your role, what is your biggest…
  54. 54. Pros Cons Now help your partner avoid their fear using Radical Candor Care personally & challenge directly
  55. 55. Shit Designers & Devs Say The Agile Manifesto (?!) Radical Candor! Group Therapy xoxo COUPLES THERAPY, WE PARTIED
  56. 56. Questions?! Liam Oscar Thurston @liamthurston Creative Director
  57. 57. Couples Therapy For Designers & Front-end Developers Liam Oscar Thurston @liamthurston Creative Director

×