Upgrade to Pro — share decks privately, control downloads, hide ads and more …
Sign up for free

Tooling for Designer–Developer Collaboration

Sponsored · Your Podcast. Everywhere. Effortlessly. Share. Educate. Inspire. Entertain. You do you. We'll handle the rest. →
Avatar for Jeff Jewiss Jeff Jewiss
May 06, 2016
Programming
40
0

Tooling for Designer–Developer Collaboration

In search of better tools and process to enable team members to do better work.

Avatar for Jeff Jewiss

Jeff Jewiss

May 06, 2016

Other Decks in Programming

See All in Programming
SalesForceを内製化！？ ~ HR事業を支える顧客管理基盤のインフラを大公開 ~
Avatar for Kobujee_53 oku053
0
180
RAG の “R” を Swift で覗いてみる 〜「意味から探す」検索の仕組み〜
Avatar for Nao-RandD nao_randd
0
160
SREの越境 / SRE Collaboration
Avatar for y-ohgi y0hgi
2
310
AWSに止められる覚悟してますか？
Avatar for モリゾー morizo_1984
2
530
[Rails World 2026] Durable orchestration on Rails: from continuation to workflow
Avatar for Vladimir Dementyev palkan
1
750
TechTown - Creating Composable Callables in Contemporary C++
Avatar for Björn Fahller rollbear
0
130
Railsバージョンを4倍にした話
Avatar for OPTiM optim
0
350
When benchmarks go bad - what I learned from measuring performance wrong
Avatar for Holly Cummins hollycummins
0
220
JAWS-UG 東京支部が始める、JAWS-UG支部コラボ / JAWS-UG lunchtime LT Collaboration
Avatar for y-ohgi y0hgi
0
270
Herb in Rails 8.2: Your ERB views, now HTML-aware @ Kaigi on Rails 2026, Tokyo, Japan
Avatar for Marco Roth marcoroth
2
220
なぜCTOを降りてFDEを選んだのか？〜なぜプロダクト企業がFDEで顧客の現場に踏み込むのか〜
Avatar for ryuta sakamoto gonta
1
210
Web Framework Benchmark Battle 2026, Any%
Avatar for Akira Matsuda a_matsuda
2
2k

Featured

See All Featured
Save Time (by Creating Custom Rails Generators)
Avatar for Garrett Dimon garrettdimon
PRO
33
5.2k
Believing is Seeing
Avatar for Spiro Bolos oripsolob
1
240
Designing for Timeless Needs
Avatar for Cassini Nazir cassininazir
1
530
Kristin Tynski - Automating Marketing Tasks With AI
Avatar for Tech SEO Connect techseoconnect
PRO
0
550
Agile that works and the tools we love
Avatar for Rasmus Luckow-Nielsen rasmusluckow
331
22k
The B2B funnel & how to create a winning content strategy
Avatar for Katarina Dahlin katarinadahlin
PRO
1
570
The Mindset for Success: Future Career Progression
Avatar for Greg Gifford greggifford
PRO
0
540
How to Talk to Developers About Accessibility
Avatar for Jason CranfordTeague jct
2
580
How To Stay Up To Date on Web Technology
Avatar for Chris Coyier chriscoyier
790
250k
Ethics towards AI in product and experience design
Avatar for Skipper Chong Warson skipperchong
2
430
No one is an island. Learnings from fostering a developers community.
Avatar for Antonio thoeni
21
3.9k
The Pragmatic Product Professional
Avatar for Laura Van Doore lauravandoore
37
7.5k

Transcript

  1. Tooling for Designer–Developer Collaboration ExplodeConf - 2016

  2. Jeff Jewiss @jeffjewiss

  3. None
  4. None
  5. None
  6. None

  7. The Goal Well designed websites and apps Works on necessary

    devices and screen sizes Bridge the gap between designers and developers

  8. BFFs

  9. Expectations Must solve a problem for users Design systems have

    the highest leverage The browser is the platform
  10. None

  11. Why is working together hard? Where to look for inspiration

    Tools of the trade (systems design) CSS as a collaboration medium

  12. Why is this so hard?

  13. None
  14. None
  15. None
  16. None
  17. None
  18. None
  19. None
  20. None
  21. None
  22. None

  23. We Need Boundaries

  24. None
  25. None
  26. None

  27. Role Models

  28. None
  29. None
  30. None
  31. None
  32. None
  33. None
  34. None
  35. None
  36. None

  37. Prototyping

  38. Paper/rough sketches User Flows Proof of Concept Spike

  39. None

  40. Get to Code Faster Prototypes are amazing for communicating intent

    They rarely take into account constraints of the browser Creating a flow for every screen size is unrealistic

  41. Grid Systems

  42. None
  43. None
  44. None
  45. None
  46. None

  47. http://philipwalton.com/articles/side-effects-in-css/

  48. http://philipwalton.com/articles/side-effects-in-css/

  49. http://philipwalton.com/articles/side-effects-in-css/

  50. Flexbox

  51. None

  52. Styleguides

  53. None

  54. What makes a good styleguide? No elements left out Team

    buy-in Live – generated from code
  55. None
  56. None
  57. None

  58. https://github.com/chrislopresto/ember-freestyle/

  59. CSS Is Hard

  60. None

  61. Deleting unused css is hard and time consuming. And more

    often than not - it’s not work people are excited to do. So what happens? People keep writing more and more css. http://mrmrs.io/writing/2016/03/24/scalable-css/
  62. None

  63. http://thesassway.com/beginner/the-inception-rule

  64. thesassway.com/beginner/the-inception-rule

  65. CSS COMPONENTS

  66. BEM OOCSS SMACCS ITCSS SUITCSS

  67. None
  68. None

  69. CSS STATS

  70. None
  71. None
  72. None
  73. None
  74. None
  75. None

  76. CSS FUNCTIONAL

  77. None

  78. http://philipwalton.com/articles/side-effects-in-css/

  79. http://philipwalton.com/articles/side-effects-in-css/

  80. None

  81. Writing new css should be the exception, not the rule.

    http://mrmrs.io/writing/2016/03/24/scalable-css/
  82. None
  83. None
  84. None
  85. None
  86. None
  87. None
  88. None

  89. Recap Set boundaries Find role models Leverage design systems and

    process Get to code, write CSS at scale

  90. THANK YOU! Jeff Jewiss @jeffjewiss

  91. Q & A