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

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
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
それ、本当に安全？ ファイルアップロードで見落としがちなセキュリティリスクと対策
Avatar for ikechi penpeen
7
3.9k
AIと一緒にレガシーに向き合ってみた
Avatar for nyafunta9858 nyafunta9858
0
240
Architectural Extensions
Avatar for Denys Poltorak denyspoltorak
0
290
dchart: charts from deck markup
Avatar for Anthony Starks ajstarks
3
990
そのAIレビュー、レビューしてますか？ / Are you reviewing those AI reviews?
Avatar for r-kagaya rkaga
6
4.6k
2026年 エンジニアリング自己学習法
Avatar for yumechi(Motoki Hirao) yumechi
0
140
カスタマーサクセス業務を変革したヘルススコアの実現と学び
Avatar for Tomoyuki Hamaguchi _hummer0724
0
710
要求定義・仕様記述・設計・検証の手引き - 理論から学ぶ明確で統一された成果物定義
Avatar for Kuniwak orgachem
PRO
1
130
MDN Web Docs に日本語翻訳でコントリビュート
Avatar for uutan1108 ohmori_yusuke
0
650
CSC307 Lecture 07
Avatar for Javier Gonzalez-Sanchez javiergs
PRO
0
550
AI時代の認知負荷との向き合い方
Avatar for OptFit Corp. optfit
0
160
OSSとなったswift-buildで Xcodeのビルドを差し替えられるため 自分でXcodeを直せる時代になっている ダイアモンド問題編
Avatar for yimajo yimajo
3
620

Featured

See All Featured
Principles of Awesome APIs and How to Build Them.
Avatar for Keavy McMinn keavy
128
17k
AI: The stuff that nobody shows you
Avatar for John Nunemaker jnunemaker
PRO
2
260
Art, The Web, and Tiny UX
Avatar for Lynn Fisher lynnandtonic
304
21k
Reality Check: Gamification 10 Years Later
Avatar for Sebastian Deterding codingconduct
0
2k
DevOps and Value Stream Thinking: Enabling flow, efficiency and business value
Avatar for Helen Beal helenjbeal
1
96
Performance Is Good for Brains [We Love Speed 2024]
Avatar for Tammy Everts tammyeverts
12
1.4k
Fantastic passwords and where to find them - at NoRuKo
Avatar for Phil Nash philnash
52
3.6k
Lightning Talk: Beautiful Slides for Beginners
Avatar for Ines Montani inesmontani
PRO
1
440
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
Avatar for Dan Newman danielanewman
231
22k
How to build an LLM SEO readiness audit: a practical framework
Avatar for Nick Samuel nmsamuel
1
640
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
Avatar for Eileen M. Uchitelle eileencodes
141
34k
JAMstack: Web Apps at Ludicrous Speed - All Things Open 2022
Avatar for David Neal reverentgeek
1
340

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