Top Web Design Tools and Resources
This list went up in June 2009. Roughly half the original tools are dead, retired, or replaced by something built into the browser. I've kept the survivors (Font Squirrel, WhatTheFont, Vecteezy, W3C Validator), removed everything that's gone (sIFR, IconBuffet, Spiffy Corners, Browsershots, HTML Tidy Online, Silk Icons, Liquidcity, stock.xchng, Firebug), and expanded the list with the tools I actually reach for in 2026.
There's no shortage of tools for web designers. The hard part has never been finding them, it's been picking which ones to commit to. Below is what I keep going back to, grouped by what they actually do. Free unless noted, and yes, I use most of these on real client work.
Design and prototyping
In 2009 this section was full of Photoshop tips. In 2026 it's basically Figma and a few honorable mentions. Pick one main tool, learn it deeply, and stop tool-hopping.
- Figma
The default for UI design, prototyping, and design system work. Free tier is plenty for solo work.
- Penpot
Open-source Figma alternative. Worth knowing about if you want to self-host or you care about that.
- Excalidraw
Hand-drawn looking wireframes. Great for early thinking before you commit to pixels.
Color tools
Adobe Kuler from the old list became Adobe Color and is still useful. The other tools below are newer and faster for most day-to-day picking.
- Coolors
Generate palettes in one click, then lock the colors you like and reshuffle the rest.
- Adobe Color
The grown-up Kuler. Color wheel work, accessibility checks, gradient builder.
- Realtime Colors
Preview a palette on a real fake homepage as you tweak it. Catches bad combinations fast.
- Leonardo Color
Adobe's accessible palette generator. Great for hitting WCAG contrast targets without guessing.
Fonts and typography
sIFR is long dead, and that's fine, because @font-face plus modern font services made it obsolete. Font Squirrel from the original list is still here. The rest is new.
- Google Fonts
Free, well-licensed, fast, and the variable fonts library is now huge.
- Font Squirrel
Commercial-friendly free fonts. Still a clean curation after all these years.
- WhatTheFont
Upload a screenshot, get the font name. The 2009 entry survived because the problem didn't change.
- Type Scale
Visualize and grab a modular type scale in seconds. Better than guessing font sizes.
- Fontjoy
ML-driven font pairing. Useful when your eye is tired and you need a starting point.
Stock photos, icons, and illustrations
stock.xchng, Silk Icons, IconBuffet, and Liquidcity are all either dead or so dated they don't help anymore. Here's what replaced them.
- Unsplash
Free high-quality photography. Has its own visual cliches by now, but still the best free starting point.
- Pexels
Solid free photo and video library, often less overshot than Unsplash.
- Vecteezy
Was on the 2009 list and earned its spot. Big vector library, mix of free and paid.
- Lucide Icons
Open-source successor to Feather Icons. The icon set this site uses.
- Heroicons
From the Tailwind team. Outline, solid, and mini variants for UI work.
- Phosphor Icons
Massive set, many weights, friendly licensing.
- unDraw
Free illustrations you can recolor to match your brand. Perfect for empty states and onboarding.
Coding and frameworks
Spiffy Corners helped you fake border-radius with images. That whole problem went away in 2010. Here's what actually runs the modern web.
- Tailwind CSS
Utility-first CSS framework. Once you get past the visual noise of class strings, the speed gain is real.
- shadcn/ui
Not a library, a recipe. Drop-in copy-paste components built on Radix and Tailwind. What I use on most builds.
- Astro
Static-first framework that ships almost no JS unless you ask for it. Great for content and marketing sites.
- Next.js
Still the default for serious React apps. App Router took some adjusting but it pays off.
- TanStack Start
Full-stack React with type-safe routing. What this site is built on, actually.
- Vite
Dev server and build tool that finally made the JS toolchain feel fast again.
Editors and AI assistants
Firebug is gone (its DNA lives in DevTools). Web Developer for Firefox still exists. The real change in this category is AI pair programming.
- VS Code
Default editor for most web work. Free, fast, and the extension ecosystem is unbeatable.
- Cursor
VS Code fork with serious AI built in. Best for thinking out loud while you code.
- Lovable
Browser-based AI builder for full-stack apps. Where this site was originally generated, actually.
- GitHub Copilot
Autocomplete on steroids. Tab to accept, learn when to ignore it.
- Claude
My go-to for design feedback, code review, and writing copy that doesn't sound like AI wrote it.
Testing and debugging
Browsershots is mostly dead. HTML Tidy Online is gone. The tools below cover what those used to do, plus a lot more.
- Chrome DevTools
Built into every modern Chromium browser. Inspect, profile, debug, audit. Learn it deeply.
- PageSpeed Insights
Real Core Web Vitals data plus Lighthouse scoring. The page Google grades you on.
- BrowserStack
Real device cloud for cross-browser and mobile testing. Free tier exists, paid plans scale.
- Playwright
Cross-browser end-to-end testing. The Cypress alternative that pulled ahead.
- WAVE Accessibility
Paste in a URL, get a visual accessibility audit. Catches the obvious WCAG misses.
- axe DevTools
Accessibility testing inside Chrome DevTools. Less guesswork than eyeballing it.
- W3C Validator
From the 2009 list. Still useful for sanity-checking your HTML.
Hosting and deployment
Wasn't its own category in 2009 because most people uploaded over FTP. In 2026 this is a category, and the tools are way better.
- Cloudflare Pages
Static and edge hosting with a generous free tier and global CDN.
- Vercel
Default home for Next.js. Smooth deploys, decent free tier, premium pricing past that.
- Netlify
The OG of git-based static hosting. Still solid for marketing sites and JAMstack work.
- Railway
Fly-style deploys for apps that need a real backend with databases, queues, and cron.
A word of warning on tool-hopping
The biggest trap with a list like this is treating it as a shopping spree. Pick one tool per category and use it until you actually hit its limits. Switching design tools every six months is how you end up good at none of them. The list above is a menu, not a checklist.
What I'd add next
The honorable mentions that didn't quite earn a spot: Framer for design-to-code, Webflow for visual builds when the client wants to edit themselves, and Notion for the writing and project tracking that happens around the actual design work.
If you'd rather skip the stack-picking and just get a fast, conversion-focused site shipped, that's what I do for home service businesses.
Get in touch