Seven tools every web designer should know

Tool lists rot fast: today’s essential app is tomorrow’s acquisition casualty. So this is not a list of software. It is a list of capabilities — seven things a working web designer must be able to do, whatever the logo on the toolbar says.

Learn the capability and every tool becomes easy. Learn only the tool and every redesign of the tool makes you a beginner again.

Inspect anything

The browser’s developer tools are the closest thing our field has to x-ray vision: spacing, type, performance, accessibility tree — all of it, on any site, free. Designers who inspect learn ten times faster than designers who screenshot.

Make it a habit: every time a site impresses you, open the inspector before you admire it. Admiration teaches taste; inspection teaches technique.

Prototype in the medium

Figma, Penpot, or raw code — the instrument matters less than the habit of testing ideas where they will live. Interactive prototypes answer questions static frames cannot even ask.

You need exactly enough fidelity to test the risky assumption and no more. Most prototypes should be embarrassing; embarrassment means you spent the time on the question, not the polish.

Learn capabilities, not applications. Applications get acquired; capabilities compound.— Studio onboarding doc, page one

Measure what matters

A performance panel, an accessibility checker, a contrast meter and a screen reader: this is the unglamorous toolkit that separates professionals from decorators.

Set budgets early — weight, requests, scores — and treat breaching them like breaking the grid. Constraints, again, are where the good decisions hide.

Software will keep churning. The designer who inspects, prototypes, versions and measures will stay dangerous through every cycle.

Pick the capability you are weakest at and spend one weekend on it. Monday-you will feel the difference immediately.