Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Tooling for Designer–Developer Collaboration

Sponsored · SiteGround - Reliable hosting with speed, security, and support you can count on. →
Avatar for Jeff Jewiss Jeff Jewiss
May 06, 2016
Programming
0
36

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
Tweet

Other Decks in Programming

See All in Programming
開発者から情シスまで - 多様なユーザー層に届けるAPI提供戦略 / Postman API Night Okinawa 2026 Winter
Avatar for tasshi tasshi
0
200
高速開発のためのコード整理術
Avatar for sutetotanuki sutetotanuki
1
400
Architectural Extensions
Avatar for Denys Poltorak denyspoltorak
0
290
Oxlintはいいぞ
Avatar for Yuji Yamaguchi yug1224
5
1.3k
要求定義・仕様記述・設計・検証の手引き - 理論から学ぶ明確で統一された成果物定義
Avatar for Kuniwak orgachem
PRO
1
140
AgentCoreとHuman in the Loop
Avatar for Har1101 har1101
5
240
CSC307 Lecture 06
Avatar for Javier Gonzalez-Sanchez javiergs
PRO
0
690
今から始めるClaude Code超入門
Avatar for 448jp | OKI Yoshiya 448jp
8
8.9k
The Past, Present, and Future of Enterprise Java
Avatar for ivargrimstad ivargrimstad
0
580
Rust 製のコードエディタ “Zed” を使ってみた
Avatar for NearMeの技術発表資料です nearme_tech
PRO
0
180
izumin5210のプロポーザルのネタ探し #tskaigi_msup
Avatar for izumin5210 izumin5210
1
130
AI時代のキャリアプラン「技術の引力」からの脱出と「問い」へのいざない / tech-gravity
Avatar for MinoDriven minodriven
21
7.3k

Featured

See All Featured
Build your cross-platform service in a week with App Engine
Avatar for Jose L jlugia
234
18k
From π to Pie charts
Avatar for Rasagy Sharma rasagy
0
120
Highjacked: Video Game Concept Design
Avatar for Ryan Kendrick rkendrick25
PRO
1
290
Beyond borders and beyond the search box: How to win the global "messy middle" with AI-driven SEO
Avatar for David Carrasco davidcarrasco
1
53
Leveraging Curiosity to Care for An Aging Population
Avatar for Cassini Nazir cassininazir
1
160
Java REST API Framework Comparison - PWX 2021
Avatar for Matt Raible mraible
34
9.1k
Utilizing Notion as your number one productivity tool
Avatar for Mfonobong Umondia mfonobong
3
220
The Art of Delivering Value - GDevCon NA Keynote
Avatar for David Neal reverentgeek
16
1.8k
Game over? The fight for quality and originality in the time of robots
Avatar for Wayne Barker wayneb77
1
120
Why Mistakes Are the Best Teachers: Turning Failure into a Pathway for Growth
Avatar for Umar Saidu Auna auna
0
53
Building Experiences: Design Systems, User Experience, and Full Site Editing
Avatar for Michelle Schulp Hunt marktimemedia
0
410
I Don’t Have Time: Getting Over the Fear to Launch Your Podcast
Avatar for Joe Casabona jcasabona
34
2.6k

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