About the fact that one of the most important tools of a UX Designer's job is free and hides in... the browser.
As designers, we don't use the full potential of developer tools (DevTools in Chrome, Web Inspector in Safari). They are available at our fingertips, yet we use them rarely, usually only for a few basic functions.
It will show, among other things, how to:
- edit a page like a text document
- set up a simulation of the slow internet to convince decision-makers that it might be worth working on the weight of images
- turn off styling to test accessibility
- quickly show the boss how the page will look in other colours
- take an isolated screenshot of just one element and quickly paste it into Figma
- download the files you need
- and much more...
# Why does he want to talk about it?
When we talk about developer tools we usually focus on how developers and testers use them. We don't talk about how they are equally useful tools for designers.
I want to show that designers can save time by editing and testing 'in production'. This is not the only benefit. Using developer tools has a positive impact on the quality of work with developers and programmers, so that we create better products.
In my experience, designers (especially beginners, but not only) are afraid of what is involved in code, they feel it is too technical.
I'd like to disenchant this myth and show that it's easy, fun, and most importantly, useful. The mission of this talk is to lower the entry threshold for using browser developer tools.
The results of my questionnaire on the FB group "Product & UX Design PL" show that more than half of the people surveyed know only a few features of developer tools.
My presentation will not only reach beginners, but also those who want to develop their skills.
# What will the audience get out of it?
In this presentation, I will show how, with developer tools:
- communicate better with developers
- present ideas and solutions to stakeholders
- test in production without involving developers
- improve the accessibility of your projects
I will focus on these less obvious features so that advanced designers can also find something for themselves.
With complete beginners in mind, I will discuss how, without any prior preparation, designers can use the simple functions of the developer tools in their daily work.
I will describe each function using real-life examples from my work.
At the end, the audience will receive a list of useful developer tool functions created by me to practice the new skills in practice."
Principal Designer at Grafana Labs
Design Team Lead at Infor Design
Product designer at Fireart Studio