Una piccola introduzione Cos'è l'UI design e perché parte sempre dal mobile
L'UI design è la progettazione visuale dell'interfaccia di un sito o un'app, fatta su Figma con grafica ad alta fedeltà, palette accessibile, typography coerente, micro-interazioni e versioni responsive (mobile, tablet, desktop), pensata mobile-first perché 60-70% del traffico arriva da smartphone.
Errore tipico: design pensato prima per desktop, poi 'adattato' al mobile in fase di sviluppo. Risultato: sito che funziona bene da computer, disastro da smartphone. Bottoni piccolissimi, form impossibili da compilare, scroll infinito senza gerarchia. Mobile-first è la norma dal 2020.
Da Vicenza dal 2008 con oltre 180 progetti seguiti, abbiamo consegnato 100+ progetti di UI design. Per startup tech, B2B manifatturiero, e-commerce, app mobile, ONLUS. Mobile-first di default, accessibilità WCAG AA inclusa, coordinati col team dev.
Esempi tipici Tre esempi di intervento, in settori diversi
Esempio · settore distribuzione B2B Sito di un distributore di componenti (settore industriale)
UI design per sito B2B con catalogo prodotti tecnico, 27 schermate ad alta fedeltà, mobile-first. Card prodotto, filtri di catalogo, schede tecniche scaricabili. Accessibilità WCAG AA verificata, coordinato con team dev su Astro+Tailwind.
27 schermate consegnate
Esempio · settore SaaS B2B Sito di una software house (settore tecnologico)
UI design per app web di gestione progetti, mobile-first, dashboard responsive. 18 schermate principali con stati di interazione completi. Coordinamento dev su componenti React riusabili.
18 schermate principali
Esempio · web agency Vicenza Sito di una web agency (settore servizi tecnologici)
UI design per sito multi-servizio: oltre 100 pagine generate da template comuni. Stile tech ed elegante con bordi marcati, palette istituzionale, mobile-first. Implementazione su Astro+Tailwind v4.
100+ pagine sul template
Cosa includiamo Cosa trovi nel nostro UI design
Interfaccia ad alta fedeltà, responsive, accessibile, pronta per dev.
Layout mobile-first
Si parte dal piccolo schermo.
Disegniamo prima la versione mobile (375px), poi tablet (768px), poi desktop (1280px+). Gerarchia di contenuto pensata per pollice e scroll, non per mouse e click. Bottoni dimensionati per dito (44px minimo), form a un campo per riga, navigazione semplificata.
- Mobile (375px) come prima vista
- Tablet (768px) responsive
- Desktop (1280px+) progressivamente
- Gerarchia per scroll
UI ad alta fedeltà
Interfaccia finita, non bozza.
Ogni schermata con grafica finale: palette, typography, immagini, componenti del design system. Stati di interazione completi (default, hover, focus, disabled, loading, errore). Pronta per dev, niente reinterpretazioni o pezzi mancanti.
- Schermate ad alta fedeltà
- Stati di interazione completi
- Componenti del design system
- Variazioni responsive
Accessibilità WCAG AA
Default, non add-on.
Contrasti verificati con strumenti automatici (axe, Stark), focus visibile su tutti gli elementi interattivi, navigazione da tastiera coerente, alternative testuali per immagini, etichette form esplicite. EAA 2025 ready di base.
- Contrasti WCAG AA verificati
- Focus visibile su tutti gli stati
- Etichette form esplicite
- Alternative testuali immagini
Micro-interazioni e animazioni
Dettaglio che fa qualità.
Animazioni di apparizione, transizioni tra stati, feedback di validazione, indicatori di caricamento. Documentate per dev, replicabili 1:1 in codice (CSS transition, Framer Motion, Lottie). Niente animazione descritta a parole.
- Animazioni di apparizione
- Transizioni tra stati
- Feedback di validazione
- Documentazione per dev
Il problema Cosa va male nell'UI design fatto male
Pattern che vediamo prendendo in carico siti progettati senza metodo:
- Desktop pensato prima: poi mobile è disastro, bottoni minuscoli e form rotti
- Stati di interazione mancanti: hover, focus, errore aggiunti dopo, in modo inconsistente
- Contrasti rotti: testo grigio chiaro su sfondo bianco, illeggibile per parte degli utenti
- Iconografia mista: icone scaricate da fonti diverse, stili che non parlano tra loro
- Niente design system: ogni pagina è un'isola, dev impazzisce
- Animazioni descritte a parole: dev fa quello che riesce, design diverso dall'idea
- Niente coordinamento col dev: design bellissimo che diventa codice mediocre
Il nostro approccio: mobile-first di default, stati completi, contrasti WCAG AA, animazioni documentate, coordinamento dev dal giorno uno.
I vantaggi Cosa ti porti a casa con un UI design fatto bene
Quello che ti porti a casa
Risultati concreti per imprenditore e team di sviluppo:
- Esperienza mobile fluida: 60-70% del traffico funziona davvero
- Accessibilità WCAG AA inclusa: EAA 2025 compliance ready
- Stati di interazione completi: niente più bug visivi a sviluppo finito
- Coordinamento col dev: dev riceve specifiche chiare, niente reinterpretazioni
- Conversion rate più alto: form fluidi, bottoni visibili, gerarchia chiara
- Brand coerente: stessa esperienza su sito, app, fiera, packaging
- Asset duraturo: file Figma riusabile per restyling futuri
Come lavoriamo Le 4 fasi del nostro UI design
1. Discovery e wireframe
Settimane 1-2.
- Brief di progetto
- Wireframe mobile-first
- Validazione struttura
- Iterazione veloce
2. UI mobile
Settimane 3-4.
- Schermate mobile ad alta fedeltà
- Stati di interazione
- Accessibilità WCAG AA
- Micro-interazioni
3. UI tablet e desktop
Settimane 5-6.
- Adattamento tablet
- Adattamento desktop
- Componenti riusabili
- Test su vari schermi
4. Handoff dev
Settimana 7.
- File Figma organizzato
- Documentazione interazioni
- Coordinamento sviluppatori
- QA implementazione
Strumenti Strumenti che usiamo per l'UI design
Industry-standard, sincronizzati col codice:
- Figma per design e prototipazione
- Tailwind CSS per la sincronizzazione codice
- Stark per verifica accessibilità WCAG AA
- Lottie per micro-animazioni esportabili
- Framer Motion per animazioni complesse in dev
Tecnologie Stack UI design e dev
Figma
Astro
WordPress
Figma
Astro
WordPress Risultati Cosa garantiamo come output
Quello che ti consegniamo a fine progetto:
- File Figma con tutte le schermate
- Versioni mobile, tablet, desktop
- Stati di interazione completi
- Accessibilità WCAG AA verificata
- Coordinamento dev per la fase di implementazione
- Riferimenti reali on-demand durante lo scoping
Quanto costa un progetto di UI design? +
Servizio su misura: il preventivo dipende dalla complessità dei requisiti, dalle integrazioni con sistemi terzi (CRM, gestionale, API esterne), dal volume di test richiesto e dal livello di SLA in manutenzione. Prima cosa che facciamo è una discovery call gratuita di 30-45 minuti per capire scope e contesto, poi mandiamo un preventivo scritto entro 48-72 ore. Niente listini standard.
Quanto tempo richiede un progetto UI completo? +
Per pacchetto base (10-15 schermate, 3 breakpoint): 5-7 settimane. Per UI completo con micro-interazioni e responsive avanzato: 8-10 settimane.
Lavorate su sito web e app mobile? +
Sì, entrambi. Per sito web di solito Astro o WordPress. Per app mobile design pensato per iOS e Android (linee guida specifiche, gesture, navigazione nativa). Stesso processo, stessa qualità.
Includete l'accessibilità di default? +
Sì, WCAG AA è il default. Contrasti verificati, focus visibile, etichette form esplicite, alternative testuali. Per audit completo o WCAG AAA esiste servizio dedicato dove valutiamo l'intero sito.
Coordinate il design col team che svilupperà? +
Sì, è il punto centrale. File Figma strutturato per dev, variabili sincronizzate con Tailwind o CSS, componenti documentati. Coordinamento diretto con sviluppatori per evitare design che resta bello solo in Figma.
Posso aggiungere schermate dopo la consegna? +
Sì, il progetto è pensato per crescere. Possiamo gestire la manutenzione evolutiva come servizio mensile, oppure consegnare il file Figma strutturato in modo che il team interno possa estenderlo da solo.