UI Design: la guida introduttiva

Con il continuo avanzare del digitale accompagnati da tutti i software, siti internet, app, gestionali; È stata introdotta una nuova disciplina che è quella della UI Design, cioè della User Interface Design, che è la progettazione visiva di un app, di un sito web ecc…

E’ l’aspetto visuale del prodotto digitale che coinvolge tutti i componenti..Si parte dai colori, tipografia fino ad arrivare alla progettazione di ogni componente come header, footer e via dicendo.

E perché è così importante?

Beh..Diciamo che è importantissimo saper utilizzare il colore e la tipografia per veicolare al meglio il messaggio, a che target è indirizzato il prodotto. E la UI Design è proprio l’insieme di tutti questi concetti.

Ormai qualsiasi studio, agenzia hanno figure che si occupano solo della UI Design, questo perché il progetto digitale deve risultare armonioso nei colori e all’occhio, ma soprattutto deve essere intuitivo.

L’utente non può sentirsi disorientato ma deve capire esattamente in che sezione dell’applicativo si trovi. Inoltre non può navigare un’applicazione o un sito con colori troppo accesi e che gli creerebbero solo disturbi.

Un bottone con il colore corretto ed un testo esplicativo fanno tutta la differenza del mondo. Ricordiamoci che poi questi progetti devono convertire, cioè devo portare a una vendita di un prodotto, 

Alla registrazione di un’utente, alla sottoscrizione di un abbonamento; quindi avere determinati componenti colorati correttamente con il giusto copy, può fare la differenza.

Ma cosa serve per realizzare una buona interfaccia utente? lo descriviamo in questo articolo. Quindi se sei interessato, ti consiglio di continuare la lettura.

Come detto, nelle righe precedenti, UI Design, è l’acronimo è di User Interface Design, ed in italiano s’intende la progettazione di un’interfaccia grafica per un prodotto digitale come può essere un’app, un sito web, un portale, un’e-commerce e via dicendo.

Il design di un’interfaccia grafica è tutto quello che si vede a schermo:

• Elementi visivi
• Layout
• Colori
• Tipografia
• Interazione

La UI Design permette di creare delle interfacce grafiche belle, ma anche intuitive che guidano l’utente e che non lo disorientano. Quante volte abbiamo abbandonato un sito che era difficile da navigare?

Tantissime volte, quasi non le contiamo!

Ecco, una buona UI Design evita anche questo, di annoiare l’utente che si deve impegnare per capire dove trovare ciò che gli serve.

Una buona interfaccia grafica ha i bottoni che hanno un certo copy, un colore che comunica al meglio ciò a cui serve. Oppure una buona UI Design ha un font elegante, che si accoppia perfettamente con i colori e che sia leggibile anche su schermi dalle piccole dimensioni.

Ma entriamo nel dettaglio nei principi fondamentali per una buona UI.

Griglie e Layout sono le basi della UI Design

Le griglie sono elementi fondamentali per impaginare ed allineare correttamente testi, bottoni ed altri elementi.

Un buon designer sa utilizzare perfettamente una griglia, può creare interfacce più dinamiche.

Lo strumento che viene in aiuto per utilizzare le griglie è Bootstrap, di cui ho scritto un’articolo qualche mese fa; l’uso delle griglie e di colonne danno un forte aiuto in fase di progettazione di un’interfaccia. La griglia

Permette di lavorare sul posizionamento di elementi, e se utilizzata correttamente può catturare l’attenzione dell’utente con allineamenti che sembrano improbabili ma che hanno uno studio approfondito dietro.

Utilizzo dei colori per dare dimensione al progetto

Come detto, saper creare una color palette per la propria app, è utilissimo per catturare l’attenzione dell’utente, guidarlo all’interno dell’app e invogliarlo a compiere un azione con ‘Call to Action’.

La scelta dei colori, insieme a quella della tipografia, sono forse gli elementi base su cui poi costruire il design del progetto ed il design system.

Se si ha già un brand forte e riconoscibile, con determinati colori; il designer deve cercare di stare in linea e creare una palette che sia coerente ma che dia ioli giusto contrasto tra tutti i componenti.

Un designer deve conoscere cosa comunica un colore. Se si usa un color rosso per i messaggi di errore, è perché rosso significa pericolo, allerta e soprattutto è un colore molto forte e che balza subito all’occhio di un’utente.

Per una buona UI non servono tanti colori, infatti è risaputo che, un’interfaccia grafica, deve avere pochi colori Google, Apple, Facebook, Twitter e le big company hanno un loro design system che descrive accuratamente e viene utilizzato per tutti gli applicativi e sistemi.ma ben distinti e chiari. e devo seguire certi standard e regole progettuali.

Queste aziende dettano anche trends sull’uso di colori, ed ogni anno escono con design system rinnovati e con palette di colori innovativi.

Quindi la scelta del colore è la base di tutta la progettazione di un’interfaccia grafica.

La voce della UI è la tipografia

Avere un font sans-serif, corsivo fa differenza..Soprattutto se si vuol comunicare e veicolare un messaggio.

In certi settori alcuni font vengono utilizzati meno. Ed in alcuni casi, come Google, i design system di grandi aziende hanno dei font predefiniti; anche saper utilizzare i giusti ‘pesi’ e i font-size corretti aiuta ad avere una buona gerarchia dei vari elementi.

Avere Titolo, Sottotitolo e paragrafo della stessa dimensione, non aiuta la lettura dell’utente; il copy scritto in modo errato non porterà l’utente all’azione finale.

La tipiografia, insieme alla scelta dei colori, è la parte fondamentale e di partenza per progettare interfacce utente.

Ma come utilizzare la tipografia nella UI?

Innanzitutto, consigliamo di utilizzare un font che abbiamo più stili e ‘pesi’ a disposizione.

Cosa s’intende?

Che si devono scegliere dei font che non abbiano solo la versione Regular e Bold.

Dobbiamo scegliere dei font come il Montserrat, Roboto, inter, Open Sans.

Che hanno anche le versione Bold, Semi Bold, Medium, Light ecc..Questo ci aiutetà a dare delle gerarchie ai vari elementi tipografici.

Eh sì..perchè non tutti gli elementi hanno lo stesso peso e la stssa importanza e noi designers dobbiamo essere in grado di creare la giusta gerarchia.

Ad esempio, un’articolo ha un testo, un sottotitolo, un paragrafo, dei link.

E non tutti hanno lo stesso stile, evidenziarli tutti con il giusto peso, aiyt anche l’utente a dare la giusta importanza a tutti gli elementi.

Inoltre un buon designer sa lavorare anche con le dimensioni del font.

Infatti tra i vari elementi non ci deve essere troppo distacco nelle dimensioni, ma ci deve essewre una scalòa graduale tra un elemento e un’altro.

Al di là del fatto che ci sono vari declinazioni dei vari elementi, ad esempio il titolo può essere un h1, h2, h3, h5, h6..Che hanno diverse dimensione.

Immagini e icone per comunicare al meglio

Anche immagini e icone sono importanti. Le prime perché accompagnano il messaggio da veicolare, le seconde accompagnano l’utente verso l’azione, che è quello che interessa a noi. E come detto, questo è importante.

Non solo..io credo sia molto pertinente essere informati sulle varie tipologie di copyright. Perché, se il progetto è per un committente, e si prende un immagine coperta da diritti, si rischiano grosse multe.

Per le immagini esistono un sacco di siti web dove reperire un sacco di immagini, io consiglio sempre Unsplash perchè pubblica sempre belle immagini e in alta definizione.

Questo tipo di immagini free, possono essere utili soprattutto in fase di prime progettazioni, quando il cliente non ha ancora fornito le sue, ma con l’avanzare del progetto.

E’ importante saper scegliere le immagini cercando di basarsi sui colori della palette.

Potrebbe essere utile, soprattutto per non creare contrasti spiacevoli o troppo forti tra i vari componenti della pagina; ad esempio uno dei contrasti più rischiosi e sconsigliati è tra verde e rosso.

Questi discorsi valgono anche per le icone.

Infatti anche cole icone bisogna stare a colori e forme.

Prima regola che molto importante: utilizzare le icone con lo stesso stile! Infatti trovo poco armonioso usare icone ‘bordate’ quando per il resto si utilizza delle icone con sfondo colorato.

E soprattutto, cosa ancora più importante: devono essere ben leggibili su dispositivi e schermi piccoli.

Sul web si trovano tantissimi pacchetti di icone già pronte sia per la progettazione, sia per lo sviluppo web. Sono icone che, appena installate, sono già utilizzabili.

I componenti sono i mattoni nella UI Design

Se le griglie e le colonne sono le fondamenta del progetto digitale, i componenti sono i mattonicini che poi andranno a comporre l’interfaccia.

Oltre a permettere l’interazione tra utente e macchina.

Saper progettare un componente è fondamentale, un designer deve sapere che elementi ci sono in un header, in un footer.

Ma deve sapere anche tutti i vari comportamenti un componente, quando ‘dialoga’ con l’utente.

A riguardo, un esempio lampante è il bottone che è presente in molti casi, in cui l’utente deve eseguire un’azione, come l’invio di un form.

Ecco, l’utente, quando con il cursore passa sopra il bottone, quest’ultimo ha un comportamento.

Cambia colore, o lascia un’ombra dietro di sè, ecco questa è un’interazione.

Ed è importante che un’utente che le conosca molto bene, se no rischia di creare un’interfaccia che non risponde correttamente agli input dell’utente.

Oltre alle interazione, è giusto studiare bene come è composto il componente, prerchè può essere che, all’interno, contenga altri componenti più piccoli.

Un’esempio è l’header che può, a suo volta contenere i seguenti elementi.

• Logo
• Menu di Navigazione
• Barra di Ricerca
• Icone

Solo qui, ci sono componente che hanno uno scopo e un comportamento.

L’accessibilità è fondamentale nella UI Design

Il concetto di Accessibilità nella UI Design si intende un progetto web che è accessibile facilmente da tutti gli utenti.

Per accessibile non si tende solo che è facilmente rintracciabile sul web, ma che sia facilmente utilizzabile e navigabile da tutti gli utenti..cosa si intende?

Si intende che deve essere facilmente navigabile anche da utenti che hanno delle invalidità; come ad esempio, utenti con problemi di cecità, utenti che hanno invalidità fisiche e quindi fanno fatica  a utilizzare strumenti come il mouse.

Come poter si può progettare un prodotto digitale accessibile?

Beh…Ad esempio, per un’utente conn problemi di vista, si possono utilizzare colori che contrastano correttamente e che aiutano l’utente a distinguere bene tutti i componenti della pagina.

Invece nel caso di utenti con problemi neurologici ( come epilessia ), evitare animazioni troppo invasive, colori troppo luminosi oppure animazioni che lampeggiano e potrebbero causare problemi anche mettere i testi corretti, i sottotitoli, o i testi se un’immagine è mancante.

Il design è importante, ma anche lo sviluppo

Un UI Designer non è uno sviluppatore web ma, per agevolare il lavoro degli sviluppatori, è opportuno che sappia dei concetti fondamentali dell’html, css, ma anche sapere i concetti basi del Responsive Design.

Per progettare il design delle pagine che siano adattabili a tutti i device.

Giusto specificare che la priorità per un designer è la UI ma, in seconda battuta, deve dare un pò di supporto anche allo sviluppatore che è incaricato di lavorare con i linguaggi di programmazione.

Non è una skill obbligatoria ma, sicuramente permette di avere una marcia in piàù.

Un designer dovrebbe conoscere le basi dei seguenti linguaggi:

• HTML5: che è il linguaggio più facile e permette di inserire un elemento in pagina, e creare la struttura della pagina
• CSS3: che è il linguaggio che permette di dare un aspetto all’elemento inserito nella pagina con l’html

Poi, secondo me, è giusto sappia alcuni concetti di Bootstrap, che abbiamo già citato nei paragrafi precedente dell’articolo.

Per rendere il progetto web ancora più completo, si utilizzano frameweork come Angular, React per sempre design, struttura dei dati; ma qui ci si addentra in concetti molto più avanzati.

La UI deve essere responsive

A partire dall’introduzione sui mercati degli smartphone, i siti internet si adattano a tutti gli schermi dei vari device.

E il designer affiancato dagli sviluppatori deve progettare il sito in funzione della visibilità su tutti gli schermi.

Ormai, attraverso il linguaggio CSS3, si può gestire la visualizzazione del sito web su tutti i device.

Le proprietà che permettono tutto ciò sono le @media query.

Ma il saper progettare siti web responsive design parte anche dal saper usare le giuste proporzioni nel ridimensionare i componenti e la tipografia, in modo tale da aver la giusta visibilità.

Solitamente, i web designer utilizzano il framework Bootstrap per realizzare siti web e portali mobile-first senza perdere troppo tempo sullo sviluppo.

Invece, per quanto riguarda, la progettazione del design, il software Figma ha a disposizione molti plugin che permetto di creare il prototipo di un’interfaccia utente che sia resposive.

Ormai tutti i siti devono essere accessibili, leggibili perchè, tra le altre cose, Google premia e da visibiltà ai siti che hanno versione mobile-first ben accessibile.

Parlare di responsive design, non vuol dire solo parlare di UI che siano perfettamente adattabili ma anche che abbiano un codiuce snello, immagini non troppo pesanti.

Perchè il sito di essere responsive ma anche veloce, scattante anche sui dispositivi più piccoli..

Avere una navigazione che sia lenta su dispositivi può portare l’utente ad abbandonare il sito.

Realizzare un sito web o un progetto digitale responsive, ma nelle fasi successive del progetto si potranno notare i benefici.

Soprattutto nella fase di manutenzione.

Infatti quando il Responsive Design non era lontanamente un’idea, le azienda che volevano essere visibili su vari device, dovevamo avere più versioni dello stesso sito.

Invece, ora, con l’introduzione di tante nuove proprietà CSS, i developer possono lavorare su un solo sito e gestire la visibilità del sito web con una sola versione.

Non dover sviluppare, un sito web per ogni device, vuol dire anche risparmio sui budget.

I software sono il mezzo per creare UI

In questo articolo abbiamo parlato di tutti gli aspetti della UI ma non abbiamo trattato ancora di uno dei temi che interessa più a designer e creativi: i software

Sicuramente il più utilizzato e popolare è Figma, che dalla sua parte, può contare su una numerosa community di utenti che condivide continuamente esempi di prototipi, UI Kit, plugins.

Figma è il software che è riuscito a battere la concorrenza di Adobe, leader del settore, anche grazie al fatto che ha una versione gratuita e che è già su web.

Cosa vuol dire?

Semplicemente che con Figma si progetta tutto da browser, senza per forza scaricare il software sul proprio computer.

Quindi è tutto salvato in cloud, i progetti sono al sicuro..E si lavora sempre con una buona velocità.

Altra features che gioca a favore di Figma, è che si possono collegare più utenti nello stesso momento e sullo progetto.

Questo è ottimo per chi lavora in team oppure per chi non lavora nello stesso luogo fisico dei propri colleghi o lavoratori.

Ulteriore pregio di Figma è che si possono creare degli ottimi Design System in modo intuitivo e scalabile.

Da un paio di anni, sono state introdotte le variabili che permettono al designer di cambiare colori e font delle interfacce senza selezionare, uno ad uno, i componenti.

E gli altri software?

Figma è il più utilizzato ed è il software, per eccellenza, quando si deve creare una UI ma, come si è visto dall’immagine nel paragrafo precedente, bisogna saper utilizzare altri software.

Ad esempio, per lavorare con le immagini per ridimensionamenti, fotoritocchi e ottimizzazione, manco a dirlo..Si usa Adobe Photoshop

Che è da sempre, il software professionale per editare immagini e, sicuramente, i designer lo possono utilizzare per ridimensionare e alleggerire le immagini oltre al renderle più luminose, contrastanti ecc..

Altro software che può, marginalmente, tornare utile a un UI Designer è Adobe Illustrator che lavora con immagini vettoriale quindi illustrazioni, icone, loghi ecc..Ad esempio è utile se si vuole creare un pacchetto di icone da zeroi, che siano coerenti con il progetto.

L’alternativa più economica ad Adobe Photoshop e Illustrator è Canva, ormai un vero e proprio competitor dei due software di Adobe.

Canva è conosciuto, soprattutto perchè per la sua facilità di utilizzo, infatti è adatto ad un pubblico alle prime esperienze con grafica e design.

Permette di creare grafiche partendo da dei template che possono essere giuà modificati, questo lo remde un software alla portata di tutti.

Quindi può servire per creare immagini creative in pochi istanti

Per la parte di pianificazione di task del progetto, si consiglia Notion, strumento gratuito che ti permette di creare delle task e organizzare il flusso del progetto.

Invece, per chi è uno designer, molto attento anche al brainstorming, alla pianificazione e alla gestione consigliamo Miro che è una specie di lavagna digitale dove buttar giù idee, mappe cncettuali diagrammi e molto altro.

Le conclusioni

In questo articoli, abbiamo fatto una panoramica della UI Design, che è destinata a prendere sempre più importante per creare interfacce grafiche per progetti digitali.

Attenzione! Questa è una guida introduttiva su concetti, software, utilizzo colori e altro per partire e creare UI moderne, non è una guida definitiva.

E’ adatta per chi è al primo approccio, che è un graphic designeR più specializzato nella grafica più tradizionale si vuole affacciare alla UI.

Ormai la grafica per come era conosciuta, qualche decennio fa, si sta evolvendo rapidamente, e avere una conoscenza della UI, sta diventando sempre più importante.