L’obiettivo è costruire un stack leggero che non ti rallenti. Meno click, meno plugin, zero dipendenze inutili. Qui sotto trovi gli strumenti che uso/consiglio nel 2025, organizzati per fase, con indicazioni chiare su quando usarli e quando evitarli.

1) Design & wireframe

Figma per wireframe, componenti e token (spaziatura, colori, tipografia). Mantieni un solo file “UI Kit” e istanzia tutto da lì: riduce errori e tempi. Per immagini raster usa mockup semplici e limita gli effetti: quello che non serve in pagina è peso in più.

Consiglio pratico: esporta solo SVG per icone e PNG/JPG ottimizzati per il resto. Evita PDF multipagina per la consegna di layout: meglio tavole ordinate con naming coerente.

2) Tipografia e icone

• Font: variable fonts (Inter, Source Sans 3, Lora) per gestire pesi con un solo file. Carica subset latin e imposta font-display: swap per non bloccare il rendering.

• Icone: set puliti e coerenti (Lucide/Heroicons). Niente “zoo” di pacchetti diversi.

Snippet utile (font):

3) Palette e asset

Colori: definisci 8–10 token max (primary, primary-600, neutral-700, success, warning, error). Per le immagini, prepara tre taglie (sm, md, lg) e usa loading="lazy" ovunque non sia ATF (above the fold).

Utility da tenere a portata: compressione immagini (es. Squoosh/Tiny), ottimizzazione SVG (SVGOMG), generatore favicons. Bastano questi tre.

4) Front-end “base”

• CSS: Tailwind per velocità e consistenza. Se preferisci CSS classico, PostCSS + Autoprefixer e una piccola scala tipografica in :root.

• Componenti: shadcn/ui come base (accessibilità già curata) e pochi componenti custom.

• Animazioni: GSAP per micro-interazioni e transizioni di pagina, con timings morbidi (200–400ms).

• JS leggero: se il progetto è contenuto, valuta htmx o Alpine per interazioni minime; se serve app più strutturata, React + Vite.

Regola d’oro: niente librerie “perché sì”. Se vanilla JS basta, usa quello.

5) Build e formattazione

Vite come bundler, ESLint + Prettier per coerenza del codice, alias per percorsi (@/), e split per rotta quando ha senso. Attiva sourcemap solo in dev.

6) PHP/Backend minimale (per siti custom)

• Composer essenziale: vlucas/phpdotenv (config), phpmailer/phpmailer (mail), ezyang/htmlpurifier (sanifica HTML), monolog/monolog (log).

• Router semplice con middlewares (auth, CSRF, rate-limit API).

• Sicurezza: CSRF token nei form, validazioni lato server (mai solo JS), escape sistematico in output.

7) Performance & qualità

• Lighthouse/PageSpeed per auditing.

• Accessibilità: test con axe DevTools e controllo contrasti WCAG.

• Immagini: JPEG progressivi, WebP dove disponibile, dimensioni dichiarate (width/height) per evitare layout shift.

• Font: massimo 2 famiglie, 2–3 pesi reali. Il resto lo fai con dimensioni/spacing, non con il “grassetto creativo”.

Checklist rapida:

• CLS < 0.1, LCP < 2.5s, TBT basso su mobile medio.

• CSS critico inline per la prima sezione, resto differito.

• rel="preconnect" verso host esterni realmente usati.

8) SEO e dati strutturati

Titoli univoci, meta description scritte per l’utente (non per il bot), sitemap aggiornata, robots pulito. Open Graph e Twitter Card per la condivisione. Se hai pagine “servizio”, aggiungi schema WebSite/Organization/BreadcrumbList/Article dove serve. Niente keyword stuffing: copertina chiara, H1 unico, gerarchia H2/H3 pulita.

9) Release e hosting

• Versionamento: Git (main + feature branches).

• Deploy: build → test → deploy (anche via GitHub Actions con rsync/FTP). Escludi vendor se installi server-side.

• Config: .env per segreti; backup DB e /public/news/upload con cron giornaliero.

• Monitoring: log errori, rotazione log, alert email su 500/slow query anomale.

Conclusione

Scegli una volta, usa sempre. Un toolkit coerente fa risparmiare ore su ogni progetto e tiene alto lo standard: tipografia pulita, componenti accessibili, immagini leggere, deploy prevedibile. Il risultato è un sito veloce, chiaro, stabile. È quello che vogliono gli utenti (e i motori di ricerca).