What?
I had the opportunity to speak at the WaysConf 2023 conference. My topic was 'Your Ace Up Your Sleeve is in the Browser: Devtools for Designers'.
Some of the most important Product Design tools are free and they live... in the browser.
When talking about developer tools, we tend to focus on how developers and testers use them. We rarely talk about how they're useful for designers. It's high time we changed that!
I wanted to show how designers can save time by editing and testing "on production", and this is just the tip of the iceberg. What's more, using developer tools improves the collaboration between designers, PMs, and coding folks. When we work closely together, we create better products.
Video not loading?Watch conference talk in YouTube
Why?
As designers, we don't use the full potential of developer tools (DevTools in Chrome, Web Inspector in Safari). They're right at our fingertips, yet we use them quite rarely, often limiting ourselves to just a few basic functions.
Among other things, I showed how DevTools can be used to:
- Edit a page like a text document
- Set up a simulation of slow internet connection, e.g. to convince decision-makers that it might be worth working on the weight of images
- Turn off styling to test accessibility
- Quickly show how the page could look with other colours
- Take an isolated screenshot of just one element and quickly paste it into Figma
- Easily download the files you need
- And much more...
My goal was to fight the myth that DevTools are too technical and too complicated. I aimed to show they're fun, easy to use, and, most importantly, useful.
Bonus
I've also prepared a take-home gift: short recordings with 15 use cases to learn and use. Check it yourself and give it a try!