1. Usa una griglia
Lo sviluppo web è governato da regole, solitamente il CSS Box Model. Quando un design non segue un sistema di spaziatura coerente, lo sviluppatore deve interpretare ogni distanza separatamente, moltiplicando il rischio di micro-differenze.
Una griglia 8pt, un sistema di colonne e regole di spacing note riducono radicalmente le ambiguità e accelerano sia la realizzazione che il QA finale.
- Attieniti a un sistema di spaziatura coerente, ad esempio una griglia 8pt.
- Definisci chiaramente le larghezze dei container, ad esempio 1280px o 1440px.
- Non mescolare misure arbitrarie: 20px accanto a 22px generano incertezza.
2. Asset: esportabili vs CSS
Aiutami a mantenere il sito veloce. L'handoff non riguarda solo le forme visive: riguarda anche il peso della pagina finale. Ogni scelta sugli asset ha ripercussioni su performance, SEO e manutenzione.
SVG per icone e loghi, foto ottimizzate, gradienti CSS invece di immagini pesanti. Sono dettagli che fanno la differenza tra un sito che i clienti dell'agenzia amano e uno che li frustra.
- Icone e loghi dovrebbero essere SVG, non PNG.
- Prepara foto con aspect ratio standard come 16:9 o 4:3.
- Ombre e sfumature non dovrebbero essere appiattite nelle immagini se possono restare stili CSS.
- Riduci gli asset duplicati e fornisci sempre la dimensione nativa richiesta.
3. Stati responsivi
Inviare solo una vista desktop è come inviare metà progetto. Il 60-70% del traffico arriva spesso da mobile, e senza indicazioni chiare lo sviluppatore deve improvvisare su colonne, menu, padding e dimensione dei caratteri.
Non serve un mockup per ogni singola larghezza, ma servono almeno desktop, mobile e i casi tablet in cui il layout cambia davvero. Definire come collassano le sezioni evita due o tre cicli di revisione inutili.
- Desktop 1440px come vista principale.
- Mobile 375px o 390px per menu e stacking delle colonne.
- Tablet solo se il layout cambia drasticamente.
- Se una sezione ha quattro colonne su desktop e due su mobile, rendilo esplicito.
4. Hover e stati di interazione
Definisci cosa succede ai pulsanti e agli input quando cambiano stato. Hover, focus, active, disabled: ogni stato non definito viene implementato dal developer in base alla propria interpretazione, e raramente coincide con ciò che il designer aveva in mente.
Una pagina UI kit in Figma con pulsanti, input e tipografia funziona come unica fonte di verità. Un kit ben fatto elimina dozzine di domande e garantisce coerenza visiva su tutte le pagine.
- Includi stati hover, focus e active per tutti i componenti interattivi.
- Definisci lo stile dei link nel testo, non solo nei pulsanti.
- Prevedi lo stato disabled per form e pulsanti di invio.
Prossimo passo
Serve uno sviluppatore che parli la lingua del design?
Converto design Figma in temi WordPress con precisione ossessiva.
Inizia un progetto