Curated · No fluff
The toolkit.
Every tool, book, reference, and resource on this page has been used in real production work. Nothing is here because it pays to be here. Everything is here because it genuinely helps.
01 / 07
Design
Tools
The design tools worth knowing as a developer. These aren't just for full-time designers — they're for anyone who builds interfaces and wants to understand why something looks the way it does, not just how to implement it.
Figma
The industry standard for UI design and prototyping. As a developer, learning to read Figma files — inspect spacing, extract tokens, understand constraints — is a career-defining skill. The dev mode is built for you.
Design · PublishingFramer
Bridges design and code better than any other tool right now. Built for developers who want to design — or designers who want to ship. The component system speaks React. If you know Next.js, you'll feel at home.
Design · DevelopmentWebflow
Visual web development with clean semantic output. Understanding Webflow's layout model deepens your CSS intuition. Excellent for client sites where you need to hand off something they can manage.
★ Top Pick UX Research · AnalyticsHotjar
Heatmaps, session recordings, and user feedback in one. Watching real users interact with your product is the fastest UX education available. One session recording will teach you more than ten UX articles.
Analytics · A/B TestingPostHog
Open-source product analytics with feature flags, A/B testing, session replay, and funnels. Built for developers — you can self-host, query with SQL, and wire it directly into your Next.js app in minutes.
Usability TestingMaze
Rapid usability testing without needing a UX researcher. Connect your Figma prototype, send it to real users, and get quantitative results — task success rates, click maps, time-on-task. Powerful for validating before you build.
02 / 07
Performance
Tools
Performance IS UX. These are the tools that turn raw metrics into actionable improvements — and help you make the case to stakeholders that speed isn't a nice-to-have, it's a conversion driver.
PageSpeed Insights
Google's official tool for measuring Core Web Vitals on real devices. Run this on any URL and you get LCP, CLS, and INP scores from real user data. The field data section is the most honest performance signal available.
Lighthouse · Freeweb.dev / Measure
Google's Lighthouse-based audit with deeper explanations than DevTools alone. Every recommendation links to a detailed guide on exactly how to fix it. Bookmark the /learn section — it's the best free UX + performance education online.
WebPageTest
The most advanced free performance testing tool. Test from real devices and locations worldwide, get waterfall charts, video comparisons, and filmstrip views of exactly what users see while your page loads. Invaluable for LCP debugging.
Bundle Size · FreeBundlephobia
Before installing any npm package, check its minified + gzipped size and how it affects your bundle. UX principle: every kilobyte you add is a millisecond a user waits. Check before you install, not after you ship.
Real User MonitoringVercel Analytics
Real User Monitoring built into your Vercel deployment. Tracks Core Web Vitals from actual visitors — not lab simulations. The p75 and p90 score views show you how the slowest users experience your site, which is where UX pain lives.
Image Optimization · FreeSquoosh
Google's browser-based image compression tool. Convert to WebP or AVIF, compare quality side-by-side, and dramatically reduce file size without visible degradation. Images are the single biggest LCP offender on most sites — fix them here.
03 / 07
Accessibility
Tools
Accessibility isn't a compliance task you hand to QA. It's a design and development discipline that improves the experience for every user, not just those with disabilities. These tools make it testable and fixable.
WAVE by WebAIM
The most visual accessibility auditing tool available. Overlay icons directly on your page showing missing alt text, empty buttons, poor contrast, missing labels, and ARIA issues. Run it on every new page you ship before it goes live.
Browser Extension · Freeaxe DevTools
The gold standard browser extension for accessibility testing. Used by teams at Google, Microsoft, and Apple. Zero false positives — every issue it surfaces is a genuine WCAG violation. Install this once and run it on everything.
Color Contrast · FreeColor.review
The most beautiful contrast ratio checker available. Real-time preview of foreground/background combinations against WCAG AA and AAA thresholds. Bookmark this as your go-to whenever you're choosing text or icon colors.
WCAG AA/AAA · FreeWebAIM Contrast Checker
The industry-standard contrast tool. Enter any two hex values and get immediate WCAG AA and AAA pass/fail for normal text, large text, and UI components. Simple, fast, and what your auditor will use.
Reference · FreeWCAG Quick Reference
The official W3C filterable WCAG 2.1 quick reference. Filter by level (A, AA, AAA) and technique type. Stop Googling individual guidelines — bookmark this and use it as your definitive accessibility spec.
Free Download
The UX Audit Checklist for Developers
20 things to check on any website or app before you ship — written for developers who want to catch UX problems without a design background. Covers visual hierarchy, form UX, error states, loading behavior, accessibility, and performance signals.
What's inside — 20 checks across 5 categories
- Visual Hierarchy: Does the most important element on the page draw the eye first, every time?
- Form UX: Do all inputs have persistent visible labels — not just placeholder text?
- Error States: Does every error message explain what happened and exactly what to do next?
- Loading States: Does every async action show a skeleton or spinner before content renders?
- Empty States: Does every list and dashboard have a designed zero-state with a clear next action?
- + 15 more checks across accessibility, performance, mobile, and copy…
05 / 07
The
Reading List
Six books that will permanently change how you think about interfaces. Not design theory textbooks — practical, direct, and written for people who build things. Start with the first two.
Don't Make Me Think, Revisited
The most important UX book ever written — and at 216 pages, the fastest read. Krug's central principle: don't make users think. Every interaction should be so intuitive it requires zero mental effort. Developers read this in a weekend and ship better work on Monday.
The Design of Everyday Things
The vocabulary of UX — affordances, signifiers, feedback, constraints, mappings. After reading this you'll never look at a door handle, a form, or an error message the same way. The mental models chapter alone is worth the cover price.
Refactoring UI
Written for developers who need to make their own UI look better, right now. Practical and visual — every tip has before/after screenshots. Covers spacing, hierarchy, color, typography, and component design without a single word of theory.
Rocket Surgery Made Easy
How to run usability tests yourself — cheaply, quickly, and without a research background. A morning of testing with three users will surface more actionable UX issues than weeks of internal review. This book shows you exactly how.
UX for Lean Startups
How to validate UX decisions fast with limited resources. Ideal for developers working on products without a dedicated UX team — shows you how to research, test, and iterate without slowing down your sprint cycle.
Accessibility for Everyone
The most readable introduction to web accessibility written for developers and designers. Covers the why and the how — disability, assistive technology, WCAG, and practical implementation — without being a legal document or a checklist.
06 / 07
All Free
Tools
A complete quick-reference table of every free tool worth bookmarking. No sign-up required for most. Open them in a tab right now and run them on whatever you're currently building.
| Tool | What it does | Best for | Cost | Link |
|---|---|---|---|---|
| PageSpeed Insights | Core Web Vitals from real user data | LCP, CLS, INP baseline | Free | pagespeed.web.dev ↗ |
| Lighthouse (DevTools) | Full performance + UX + SEO audit | Pre-deploy checks | Free | Chrome DevTools ↗ |
| WebPageTest | Waterfall, filmstrip, video comparison | Deep LCP debugging | Free | webpagetest.org ↗ |
| WAVE | Visual accessibility overlay audit | Pre-launch a11y sweep | Free | wave.webaim.org ↗ |
| axe DevTools | WCAG violation detection (zero false positives) | Ongoing a11y testing | Freemium | deque.com ↗ |
| Color.review | Contrast ratio checker with live preview | Choosing text colors | Free | color.review ↗ |
| Squoosh | Browser-based image compression | LCP image optimization | Free | squoosh.app ↗ |
| Bundlephobia | npm package size impact check | Before installing packages | Free | bundlephobia.com ↗ |
| Responsively App | Preview any URL across multiple viewports simultaneously | Responsive UX testing | Free | responsively.app ↗ |
| Google Fonts | Free, high-quality variable fonts | Typography upgrades | Free | fonts.google.com ↗ |
| Coolors | Color palette generator and explorer | Quick palette decisions | Freemium | coolors.co ↗ |
| WCAG Quick Reference | Official filterable WCAG 2.1 guidelines | Accessibility spec lookup | Free | w3.org ↗ |
Disclosure: Some links on this page may be affiliate links, meaning UXPays may earn a small commission if you sign up for a paid plan. This never influences which tools are recommended — everything here is used in real production work and recommended on merit. Free tools are always noted. If something costs money, it's because it's genuinely worth it.
07 / 07
Community
& Learning
Where developers and designers share work, ask hard questions, and stay current. The fastest way to level up is to be around people who are already there.
web.dev / learn
Google's structured learning platform for CSS, HTML, accessibility, forms, performance, and more. The most authoritative free frontend education on the internet. Treat it as a course, not a reference.
Nielsen Norman Group
The most research-backed UX publication in existence. Every article is grounded in user studies and usability testing. When you need to justify a UX decision to a stakeholder, NNG almost certainly has a study you can cite.
Smashing Magazine
Long-form, practitioner-written articles on UX, accessibility, CSS, performance, and design systems. The depth here is unmatched for free content. Filter by UX and bookmark the accessibility section.
DEV Community
The most active developer writing community online. Follow the #ux, #webdev, #accessibility, and #css tags to see what practicing developers are actually building and thinking about. Also a great place to publish your own UX insights.