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.
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.
Si parte dalla creazione di un kit composto da:
- Palette colori (colore background, colori bottoni, colori che comporranno la nostra interfaccia)
- Font da utilizzare
- Stili di caratteri (font, dimensione caratteri… il body avrà la sua impostazione mentre il titolo e sottotitolo una diversa)
- 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.
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.