Un buon sviluppatore front end deve essere ferrato sui concetti e componenti dell’UI/UX, acronimi di User Interface e User Experience. Il front end web developer non è esente dai ruoli che può ricoprire un UI UX designer.
UX designer, cosa fa?
Un UX/UI designer progetta l’esperienza utente e l’interfaccia utente all’interno di una pagina web. Si assicura che il sito sia user-friendly, facile da usare e intuitivo. Ci sono tanti fattori che un ruolo di questo tipo deve tenere in considerazione, come scalabilità, accessibilità, riusabilità e prestazioni dell’interfaccia grafica.
Nei progetti di grosso calibro è facile che il programmatore front end e l’UX designer siano due figure separate. In genere però l’uno non esclude l’altro, in quanto sviluppare il layout di un sito web, richiede parte di queste conoscenze.
Strettamente correlato a UX/UI design è l’Atomic Design che è considerato come un modello mentale per concepire al meglio un’interfaccia utente connessa con il resto dei componenti della grafica.
Il concetto di Atomic Design aiuta a creare solidi sistemi di progettazione, consentendo un’implementazione di qualità elevata, coerente e rapida. Pensando in grande, possiamo immaginare i nostri componenti della UI come atomi. Gli atomi sono i mattoni del nostro universo, nella progettazione di UI UX gli atomi sono gli elementi più comuni (bottoni, input, etichette, ecc…). Attraverso questi atomi, possiamo comporre elementi più grandi che assomigliano a molecole. Nello sviluppo dell’interfaccia utente, possiamo pensare a questi atomi come a componenti di base dell’interfaccia utente. Ognuno ha la sua singola responsabilità definita e focalizzata.
Ad esempio, se realizziamo il prototipo di un’interfaccia, dobbiamo pensare ai componenti e alle proprietà che questi hanno, i quali messi insieme formano una molecola. Immaginiamo la nostra molecola come un form di ricerca, composto da input dell’utente + etichetta identificativa + bottone di invio. Questi saranno i nostri “atomi”.
Queste molecole avranno un ruolo chiave nel momento in cui vengono contestualizzate. Inserite all’interno di un organismo, la nostra pagina web, o perlomeno la struttura di quest’ultima.
Come implementiamo l’Atomic Design utilizzando JS puro o framework come Laravel, Symfony o Angular?
Basta ragionare come abbiamo appena fatto. Componenti UI UX come riga o input sono i nostri atomi. Se combinati formeranno delle molecole, come una navbar basata su schede.
La maggior parte delle librerie, che andrai a creare, dell’UX UI design include sia atomi che molecole. Il motivo è che gli sviluppatori spesso cercano pezzi funzionali prefabbricati che possono essere utilizzati immediatamente. L’Atomic UI permette di combinare atomi e molecole dell’UI, per rendere la propria interfaccia modulare ed efficiente. Quindi, quando ti avvicini al design della tua libreria atomica, dovresti pensare ai componenti che costruisci come atomi modulari e composizione di atomi (molecole).
Rendere riusabili i tuoi componenti è un modo perfetto per gestire la libreria e creare un’interfaccia profonda. Ecco alcuni suggerimenti:
- Riduci al minimo le dipendenze globali o ridondanti per i componenti: Evita di accoppiare un componente di basso livello a parti più grandi della libreria o all’intera libreria. Questo va contro la gerarchia naturale degli Atomi. Spacchetta la libreria con Bit.
- Lo stile non dovrebbe avere componenti accoppiati: Evita i metodi di styling che vanno contro la componibilità e la riusabilità. Preferisci invece le tecniche che trasformano i temi di stile in atomi, proprio come qualsiasi altro componente.
- Crea e testa in maniera isolata: Crea e testa ogni componente separatamente dalla libreria, per assicurarti che funzioni come un’unità autonoma che può essere eseguita ovunque e in altri progetti.
Per evitare di dover dividere la tua libreria, usa Bit per isolare ogni componente con le sue dipendenze e collegarlo ad un compilatore.
La cosa bella dell’Atomic Design è che è il modo più efficace per costruire un’interfaccia solida: da pezzi più piccoli, riusabili e indipendenti.
Come funziona il mondo reale. È anche il modo in cui funziona il UI&UX design e, fortunatamente, come funziona il mondo dello sviluppo software. Quando implementi Atomi Design, implementi davvero i principi di modularità, riusabilità, responsabilità singola e tutto ciò che può aiutarti a creare software migliore e più gestibile. Sarà anche più semplice la prossima volta che vorrai riutilizzare i componenti esistenti per creare qualcosa di nuovo.
Se questo articolo ti ha incuriosito, non perderti la nostra guida di web design per programmatori, che spiega in maniera davvero semplice come disegnare un sito web applicando le regole di UX/UI design!
