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

DevTools for Designers

9fb120a88c85d93be416ed62b8ab5e16?s=47 Paul Bakaus
February 23, 2015

DevTools for Designers

Paul is currently working on many design-specific features with the ultimate goal to make DevTools a tool for designers, as much as for developers. Here's a sneak preview of crazy new things, such as improved responsive design controls, rich live editing of animations and more and more fun with colors.


Paul Bakaus

February 23, 2015


  1. None
  2. for designers

  3. Chrome DevTools are a suite of tools dedicated to delivering

    you a real-time debugging, profiling and development environment.
  4. +PaulBakaus @pbakaus

  5. Design Develop Iterate


  7. Designers use DevTools to create, iterate and test.

  8. None
  9. DevTools today

  10. None
  11. None
  12. None
  13. None
  14. None
  15. Workspaces Live editing in DevTools

  16. In settings, add folder that makes up your project.

  17. In Sources, map the incoming files to the local workspace.

  18. – PAUL BAKAUS “Rule of thumb: A visual design practise

    is out of fashion when browser vendors have added a way to do it in CSS.”
  19. border-radius, CSS Gradients, …

  20. None
  21. None
  22. None
  23. DEMO

  24. None
  25. None
  26. None
  27. –@FRANKLANG “If you don’t have a mobile website, you don’t

    have a website.”
  28. None
  29. Office WiFi Photo Source:

  30. Conference WiFi

  31. Poo icon via http://www.visualpharm.com

  32. DEMO

  33. The first rule of upcoming features is: You don’t talk

    about upcoming features.
  34. DevTools tomorrow

  35. None
  36. Meet Max. @maxwkr

  37. Photo Source:

  38. Photo Source: http://en.wikipedia.org/wiki/Drawing_board#mediaviewer/File:Architect.png

  39. None
  40. DevTools look and feel amazing.

  41. Your site looks and feels amazing.

  42. S C R I M

  43. Smart Colorful Responsive Intuitive Material

  44. Smart Typography & Layout Audits Flex assistant

  45. Smart Typography & Layout Audits Flex assistant

  46. Smart Typography & Layout Audits Flex assistant

  47. Smart Typography & Layout Audits Flex assistant

  48. Colorful Color swatches Gradient designer Color theory

  49. None
  50. None
  51. None
  52. None
  53. None
  54. None
  55. Responsive Always-on, simplified device mode Device art & centered rulers

  56. Intuitive CSS Transform builder Layout Mode

  57. Material Material UI builder Material colors & animations

  58. Smart Colorful Responsive Intuitive Material

  59. You are awesome. Come help us.

  60. Open designers.chrome-dev.tools 1 2 Comment the shit away 3 Add

    your own ideas and mocks 4 ??? 5 Profit!
  61. +PaulBakaus @pbakaus & @ChromeDevTools Thank you!