CONTATTACI

Blog

designer con gilet giallo che fa il giocoliere con pianeti e navicelle

Che cos’è l’Atomic Design: guida agli UI components

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!

Articoli correlati

Il linguaggio HTML (Hypertext Markup Language) è uno dei più conosciuti e diffusi: lo si trova infatti praticamente in tutte le pagine web esistenti. È una scelta popolare tra i principianti che si…

Seguici su Facebook

Vuoi entrare nel mondo della programmazione?

Scopri di più sui nostri corsi!

Chiamaci al numero verde

Contattaci su WhatsApp

Contattaci senza impegno per informazioni sul corso

Pagamento rateale

Valore della rata: A PARTIRE DA 115 €/mese.

Esempio di finanziamento 

Importo finanziato: € 2440 in 24 rate da € 115 – TAN fisso 9,55% TAEG 12,57% – importo totale del credito € 2841.

Il costo totale del credito comprende: interessi calcolati al TAN indicato, oneri fiscali (imposta di bollo sul contratto 16,00 euro*) addebitati sulla prima rata, costo mensile di gestione pratica € 3,90, spesa di istruttoria € 0,00, spesa per invio rendicontazione periodica cartacea € 0,98 (o spesa per invio rendicontazione periodica cartacea € 0,00), imposta di bollo su rendicontazione periodica € 0,00. Modalità di rimborso obbligatoria: addebito diretto su c/c. La scadenza delle rate è determinata dal giorno della liquidazione del contratto; la data di scadenza delle rate è prevista il giorno 15 del mese. L’importo di ciascuna rata comprende una quota di capitale crescente e interessi decrescente secondo un piano di ammortamento “alla francese”. Offerta valida dal 01/01/2024 al 31/12/2024.

Messaggio pubblicitario con finalità promozionale. Per le informazioni precontrattuali richiedere sul punto vendita il documento “Informazioni europee di base sul credito ai consumatori” (SECCI) e copia del testo contrattuale. Salvo approvazione di Sella Personal Credit S.p.A. Aulab S.r.l. opera quale intermediario del credito NON in esclusiva.

*In fase di richiesta del finanziamento verrà proposta la facoltà di selezionare, in alternativa all’imposta di bollo sul contratto di 16,00 euro, l’imposta sostitutiva, pari allo 0,25% dell’importo finanziato.

Pagamento rateale

Valore della rata: A PARTIRE DA 210 €/mese.

Esempio di finanziamento  

Importo finanziato: € 4500 in 24 rate da € 210,03 – TAN fisso 9,68% TAEG 11,97% – importo totale del credito € 5146,55.

Il costo totale del credito comprende: interessi calcolati al TAN indicato, oneri fiscali (imposta di bollo sul contratto 16,00 euro*) addebitati sulla prima rata, costo mensile di gestione pratica € 3,90, spesa di istruttoria € 0,00, spesa per invio rendicontazione periodica cartacea € 0,98 (o spesa per invio rendicontazione periodica cartacea € 0,00), imposta di bollo su rendicontazione periodica € 0,00. Modalità di rimborso obbligatoria: addebito diretto su c/c. La scadenza delle rate è determinata dal giorno della liquidazione del contratto; la data di scadenza delle rate è prevista il giorno 15 del mese. L’importo di ciascuna rata comprende una quota di capitale crescente e interessi decrescente secondo un piano di ammortamento “alla francese”. Offerta valida dal 01/01/2024 al 31/12/2024.

Messaggio pubblicitario con finalità promozionale. Per le informazioni precontrattuali richiedere sul punto vendita il documento “Informazioni europee di base sul credito ai consumatori” (SECCI) e copia del testo contrattuale. Salvo approvazione di Sella Personal Credit S.p.A. Aulab S.r.l. opera quale intermediario del credito NON in esclusiva.

* In fase di richiesta del finanziamento verrà proposta la facoltà di selezionare, in alternativa all’imposta di bollo sul contratto di 16,00 euro, l’imposta sostitutiva, pari allo 0,25% dell’importo finanziato.

Contattaci senza impegno per informazioni sul corso

Scopriamo insieme se i nostri corsi fanno per te. Compila il form e aspetta la chiamata di uno dei nostri consulenti.