BuddiUI - Design system

Perché ho creato il design system

Buddi UI è il design system mobile creato per Buddiqo, per tradurre la sua interfaccia web basata su Nuxt UI in un sistema nativo per mobile.

Invece di adattare l'interfaccia visivamente, il progetto ristruttura i componenti per rispettare gli standard di usabilità mobile — ridefinendo touch target, scale di spaziatura e logica di layout. Il risultato è una foundation scalabile e token-driven che garantisce consistenza tra le piattaforme, migliorando chiarezza e accessibilità per gli utenti mobile.

Progettare per il contesto

Nuxt UI offre una base solida e coerente per le interfacce web. Spaziatura, logica dei componenti e gestione degli stati erano già strutturati e affidabili.

Molti componenti erano stati progettati con le interazioni desktop in mente — hover state, input compatti, scale tipografiche ottimizzate per schermi grandi. Tradurli direttamente su mobile ha esposto un gap contestuale che un adattamento superficiale non avrebbe potuto risolvere.

Proporzioni e pattern di interazione

Per il mobile, ho ridefinito le proporzioni dei componenti e ricalibrato le scale tipografiche per migliorare leggibilità e comfort ergonomico — facendo in modo che le interfacce risultassero intenzionali, non semplicemente ridotte.

Adattamento del modello di interazione

Le interfacce desktop si basano principalmente su stati pointer-based come l'hover. In un contesto mobile, l'interazione deve essere esplicita e tattile — ogni elemento deve comunicare feedback attraverso il solo touch.

L'obiettivo era preservare la consistenza logica ridefinendo i pattern di interazione.

Foundation del sistema e struttura dei token

Per garantire scalabilità, il sistema mobile è stato strutturato attorno a semantic design token. Invece di valori hardcoded, le variabili assicurano consistenza tra i componenti e permettono estensioni future.

Sistema colori

Il sistema colori mantiene la continuità con la foundation di Nuxt UI, introducendo una struttura di token più chiara per il mobile. I primitive token definiscono la palette grezza, i semantic token descrivono il comportamento dei colori — questa separazione garantisce flessibilità senza aumentare la complessità.

I livelli di superficie sono stati definiti con cura per creare profondità e gerarchia nei layout mobile. Le combinazioni di colore principali sono state verificate rispetto agli standard WCAG 2.1 AA per garantire contrasto sufficiente per testo ed elementi interattivi.

Componenti

I componenti di Buddi UI sono stati costruiti per essere flessibili senza diventare complessi. Ogni componente include varianti strutturate e proprietà chiaramente definite, per una configurazione rapida che mantiene la consistenza del sistema.

Variazioni di dimensione, boolean property, slot text e instance swap per le icone rendono i componenti adattabili senza compromettere la logica del sistema.

Validato attraverso interfacce reali

Il sistema è stato validato assemblando schermate e flussi mobile completi. Progettare layout interi ha permesso di identificare edge case, inconsistenze di spaziatura e conflitti tra stati in anticipo — raffinando i componenti oltre i soli esempi isolati.

Conclusione

Buddi UI rappresenta una traduzione strutturata di un sistema web esistente in un framework mobile-first. Ridefinendo proporzioni, logica di interazione e token architecture, il sistema mantiene consistenza migliorando chiarezza, scalabilità e usabilità in tutti i contesti.)