Do you walk through UI changes using DevTools and screen recordings?
Designers often struggle to explain small UI tweaks to developers using just words or screenshots. A request like "make the button pop" or "this feels off" can be interpreted in many ways. Without clear direction, developers are forced to guess, which leads to delays, frustration, and wasted effort on both sides.
Sharing short recordings of you live-editing a website in the browser’s DevTools significantly reduces design–dev iteration time.
Show, don't tell
Instead of describing your design tweaks, demonstrate them. Use your browser's DevTools (e.g. Chrome or Edge) to live-edit the UI.
You can adjust paddings, margins, font sizes, colors, and layout styles directly in the browser. While doing this, record your screen and voice so others can see exactly what you changed and why.
This method gives the developer precise information in context, reducing ambiguity and miscommunication.
Tip: Emails are suitable for small content changes. Learn more on Do you ask for small content changes using from X to Y?
| To: | Chloe |
| Cc: | SSW YakShaver Team |
| Subject: | ✨ Navigation and Header Layout Adjustment |
Figure: Bad example – Vague request with no specific guidance. The developer is left guessing what the designer means
Video: Good example - The designer demonstrates and explains the change, giving the dev everything they need to implement it
When to use DevTools recordings
This technique is best for small, visual changes like:
- Adjusting padding/margins
- Tweaking text, colors, or spacing
- Changing alignment or hierarchy
- Proposing alternate layout ideas
Why this technique works
- Clarity – The dev sees the exact change in place, eliminating guesswork
- Efficiency – Avoids multiple rounds of clarification
- Precision – CSS values and HTML structure are visible – no ambiguity
- Collaboration – You're making the dev's life easier (and your own)
Tips to record
- Narrate your intent – Speak while recording: “I’m increasing the font-size from 24px to 32px to improve readability.”
- Keep recordings short – Aim for 1–3 minutes. Focus on one issue per video
- Speak their language – Editing in DevTools doesn’t require deep coding knowledge, but learning the basics helps a lot
- Be direct – Developers love it when designers provide specific, actionable feedback
Tools for smooth recordings
- Browser DevTools (F12) – Use the "Elements" and "Styles" panels to adjust HTML and CSS on the fly
- YakShaver – An AI tool that records your screen and voice (e.g. using Microsoft Teams), and generates a task automatically. Super useful for quick handovers
- Loom / Zoom / OBS – Any screen recorder works if you just need the recording file
What about complex changes?
If your changes are significant (e.g. new components or complex interactions), consider instead:
- Creating a wireframe in Figma and handing over mockups to developers
- Prototyping the functionality with AI-assisted code
- Do you ask for small content changes using from X to Y?
- Communication - Do you go beyond text chat and do professional video calls?
- Do you use Chrome DevTools Device Mode to design and test your mobile views?
- Do you consider factors before making a CSS change?
- Do you keep developers away from tasks involving design or the overall look and feel?
- Do you know the best way to share and collaborate on design work?
- Do you ask for small content changes using from X to Y?
- Communication - Do you go beyond text chat and do professional video calls?
- Do you use Chrome DevTools Device Mode to design and test your mobile views?
- Do you consider factors before making a CSS change?
- Do you keep developers away from tasks involving design or the overall look and feel?
- Do you know the best way to share and collaborate on design work?