UI Design: User interface design

Scopri come usare lo UI Design per progettare le interfacce grafiche utente e renderle coerenti all’identità del tuo brand.

Digital Design | 17 Febbraio 2021

Cos'è l'UI Design?

UI Design, o User interface design è la disciplina basata sulla progettazione grafica delle interfacce utente di macchine e software.

Lo UI Design parte dalla creazione di materiali ed informazioni che andranno a comporre la nostra interfaccia.

UI Design: Da dove partire?

Si parte dalla creazione di un kit composto da:

1- Palette colori (colore background, colori bottoni, colori che comporranno la nostra interfaccia)
2- Font da utilizzare
3- Stili di caratteri (font, dimensione caratteri… il body avrà la sua impostazione mentre il titolo e sottotitolo una diversa)
4- le componenti, ovvero tutti quegli oggetti che vengono riproposti in tutte le nostre pagine es: bottoni. Creare un solo bottone e renderlo componente fa si che non si debba tutte le volte ricrearne uno nuovo, ma basterà salvarlo come componente e trascinarlo nella tavola disegno tutte le volte che vogliamo. I componenti sono totalmente personalizzabili.

Le 3 fasi principali per completare una procedura di UI Design.

1 – Osservazione

È un modo per rivelare quali parti di un sito web o di un’app causano insicurezze agli utenti e riducono le conversioni.
Durante lo studio di analisi un revisore utilizzerà vari metodi e strumenti per analizzare le problematiche dell’interfaccia.
Si potrebbe parlare di un inventario dei contenuti, in quanto si tratta di valutare in maniera qualitativa tutti i contenuti fotografici e grafici presenti nel futuro sito/app.
Se il sito è già online andremmo ad analizzare tramite analytics quale contenuto è più debole, migliorandolo con l’aiuto di campagne mirate.

L’osservazione tuttavia permette di fare luce anche su altri aspetti quali la valutazione della concorrenza, la proposta di valore e l’usabilità, attraverso lo studio dei punti di forza e di debolezza dei concorrenti attuali e potenziali, lo stabilimento degli aspetti chiave di un prodotto (brand, experience e product) e l’identificazione dei problemi di
un progetto e le rispettive soluzioni.

2 – Progettazione – Personas

Le “personas” sono veri e propri identikit di clienti ideali.
Rappresentano i bisogni, i comportamenti, gli interessi e le aspirazioni degli utenti reali e si definiscono sulla base delle informazioni che si raccolgono da varie fonti.
Le informazioni aiutano il designer a creare uno UI Design unico, pensato su misura del target.

2 - Progettazione - Casi d'uso

Descrizioni di come gli utenti si muovono all’interno dell’app o sito web e di come rispondono. Vengono rappresentati come una sequenza di semplici passaggi, che iniziano con l’obiettivo dell’utente e terminano quando l’obiettivo viene raggiunto. Questo aiuterà il designer a progettare in maniera semplice e funzionale il sito.

3 - Disegno

Una mappa del sito è un diagramma delle pagine di un sito Web, organizzato gerarchicamente. Non è altro che la semplificazione della struttura e della navigazione del sito web. Questa fase è fondamentale prima del processo “creativo” del Designer, ovvero i wireframe.

I wireframes sono lo strumento che viene utilizzato per comunicare le idee di design in tema di architettura del sito.

Per creare i wireframes vengono utilizzati programmi specifici (MockFlow, Sketch, Adobe XD…) oppure carta e penna.

Il mockup

Rispetto al wireframe il mockup riporta tutti i contenuti delle pagine e gli stili

Immagini
Fotografie
Icone
Testi
Bottoni

Il mockup è dunque il risultato finale e completo del nostro sito/app.

4 – Parola d’ordine: mobile first!

La tendenza è quella di navigare sempre più da smartphone, per questo motivo negli ultimi anni i designer hanno sostituito la progettazione desktop, come fase principale del progetto, con la vista mobile.

Gli elementi del sito verranno riadattati e spostati nello spazio tenendo conto della misura dello schermo, così come i caratteri e le spaziature.

Da dove partire?

Ci sono degli aspetti in particolare che vanno tenuti in considerazione per rendere coerente il design all’identità del brand.

Lo UI Design spinge a prendere le scelte più adatte a livello di linguaggio e di stile a questo proposito, occupandosi del font e dello stile dei caratteri (dimensioni, colori…), delle palette dei colori (principali e secondari) di ogni componente e degli elementi grafici quali icone e bottoni vari.