I rarely blog about my main job (in this case outreach lead for DevTools) here, but when I do, it’s because what I’m working on is so hot I just can’t help it. Within the DevTools team, we’ve always been in a dialogue with developers, but never established the same type of relationship with designers. In truth, they too use DevTools more and more often: To create new prototypes, test on live sites or iterate on ideas.
At the Awwwards Conf in Barcelona, I talked to countless of designers and showed them a vision of the future that could be, and we’re excited about. We rarely do this (#1 Rule of upcoming features: You don’t talk about upcoming features!), but it is the best way to foster dialogue and create real collaboration. If you are a web designer using DevTools (or wanting to), or generally interested in visual iteration, you should probably keep reading.
Design-focussed features already in DevTools or coming to DevTools soon are the new eye dropper as part of the color picker, source maps support for CSS to enable you to work with CSS preprocessors such as Sass/less, displaying rendered fonts, live editing of CSS through workspaces and a whole set of tools around CSS transforms and animations. And one of the most powerful new iteration features is of course the Device Mode, allowing you to preview how your design looks at different breakpoints.
Animating the web
Our current work-in-progress, the new animation controls, where definitely most fun to look at. We’re still working on a few rough corners, but in the above video, our engineer Sam Li shows us all of the upcoming capabilities: Global slowdown of all animations on page, a beautiful bezier curve editor with onion skinning and great preset, plus a visual timeline that not only shows all currently active animations, but lets you pause, rewind and modify each in real-time.
As part of our new reach into design, two goals are of particular importance to us: DevTools should look and feel amazing, and your sites should look and feel amazing. To achieve said goal, we went back to the drawing board and hired our first designer on team – say hi to Max! Our new design story is smart, colorful, responsive, intuitive and material. In short, scrim:
So what’s in it for me?
Smarter DevTools come with real-time typography and layout audits that automatically prevent common mistakes such as mixed fonts or tiny margins, and a powerful flex assistant that makes working with Flexbox as intuitive as it should be.
Colorful DevTools give you a dramatically improved edge-to-edge color picker that supports HSLA/RGB input, built-in, extensible swatches featuring the full Material Design palette out-of-the-box and a connected, in-site gradient designer.
Responsive DevTools make designing for mobile the default. They streamline the Device Mode to a point where we’ll turn it on by default. Along with a simplified interface that hides in the background when you don’t need it, it also features rich device art around emulated devices and centered rulers that integrate the media queries.
Intuitive DevTools enable unprecedented creative freedom by letting you edit elements as they are – right on the page. The new layout mode allows to you modify margins and paddings during inspection along with countless other properties, and comes with special modes to edit more complex properties such as CSS transforms.
Material DevTools make the world more colorful by offering the entire Material palette as built-in feature, and it’s never been easier to create a modern look and feel through built in animation presets and bezier curves.
Come help us!
The ideas above are all things we’d love to build, but are not yet fleshed out – by design. We’d like to hear from you what your actual needs are, and have setup a public Trello board for easy collaboration. Like one of the ideas? Add your vote! Find something fishy? Comment away. Think we should build something completely different first? Tell us on Trello or directly on Twitter.