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.

Transcript

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
6. Foto by WILLEM COHEN, DE NIEUWE ZAAK
7. Designers use DevTools to create, iterate and test.
9. DevTools today
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, …
23. DEMO
27. –@FRANKLANG “If you don’t have a mobile website, you don’t have a website.”
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
36. Meet Max. @maxwkr
37. Photo Source:
38. Photo Source: http://en.wikipedia.org/wiki/Drawing_board#mediaviewer/File:Architect.png
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
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!