1. Usa una griglia
Lo sviluppo web è governato da regole, solitamente il CSS Box Model.
- Attieniti a un sistema di spaziatura coerente, ad esempio una griglia 8pt.
- Definisci chiaramente le larghezze dei container, ad esempio 1280px o 1440px.
2. Asset: esportabili vs CSS
Aiutami a mantenere il sito veloce.
- 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.
3. Stati responsivi
Inviare solo una vista desktop è come inviare metà progetto.
Non serve un mockup per ogni singola larghezza, ma servono almeno desktop, mobile e i casi tablet in cui il layout cambia davvero.
- Desktop 1440px come vista principale.
- Mobile 375px o 390px per menu e stacking delle colonne.
- Tablet solo se il layout cambia drasticamente.
4. Hover e stati di interazione
Definisci cosa succede ai pulsanti e agli input quando cambiano stato.
Una pagina UI kit in Figma con pulsanti, input e tipografia funziona come unica fonte di verità.
Prossimo passo
Serve uno sviluppatore che parli la lingua del design?
Converto design Figma in temi WordPress con precisione ossessiva.
Inizia un progetto