Cos’è lo UI Design? Come migliorare l’interfaccia grafica
Sapere al meglio cos’è lo UI Design, puoi farci fare un salto di qualità nella progettazione dei nostri siti web e non solo..Oggi vediamo così lo UI Design e perchè impararlo
Nel mondo digitale odierno, sono comparse sempre più nuove discipline e nuove mansioni, dovuto anche alla digitalizzazione di molte attività commerciali e non..
Infatti questa grande rivoluzione tecnologica ha portato con se tantissime opportunità, discipline e nuove posizioni lavorative.
Una delle discipline che, con l’avvento di app e web design, è lo UI Design.
Sò che a leggere questo acronimo..la prima domanda che ci poniamo è: Cos’è? Di cosa si tratta?
Ecco..Quando ho cominciato a lavorare in questo mondo digitale, anche io mi ponevo queste domande e cercavo di comprendere il loro signoficato e utilità.
Poi con il passare del tempo e dell’esperienza ho cominciato a capire cos’è lo UI Design e come utilizzarlo al meglio, tant’è che ho aperto da poco un mio profilo Instagram.
Dove ho cominciato a pubblicare dei concept e delle idee su come migliorare la UI.
Ed è per questo che ho deciso di scrivere questo articolo, per cercare di spiegare cosa è lo UI Design?
Quindi..Se sei interssato a migliorare le tue interfacce e a sapere cosa è la UI, leggi attentamente questo articolo.
Di cosa parliamo?
Lo UI Design, è l’acronimo di User Interface Design, cioè tutte quello che riguarda la progettazione di un’interfaccia di un prodotto.
Perciò è una disciplina che riguarda molto da vicino il nostro lavoro di web designer.
Infatti sapere l’importanza di ogni aspetto di un’elemento dell’interfaccia, è molto importante perchè ci permette di sfruttarlo al meglio.
Questo può portare a creare delle interfacce grafiche ordinate, pulite ma allo stesso tempo moderne e che possano attirare l’attenzione dell’utente.
Con l’avvento delle app e del mondo degli smartphone, tablet ecc..Sapere disegnare una buona interfaccia è diventato molto importante.
Ovviamente lo UI Design non coinvolge solo applicazioni, ma anche il design dei software, dei siti web, ecc..
UI non UX
Come detto, questo mondo digitale ha portato tantissime nuove discipline, che molte volte hanno nomi simili ma che sono discipline diverse tra di loro.
Questo genera un pò di confusione.
Questo capita soprattutto tra due discipline: lo UI e la UX.
Nomi simili, di discipline confinanti ma non uguali.
Infatti lo UI Design, abbiamo detto che è la progettazione dell’interfaccia grafica.
Invece lo UX Design è l’acronimo di User Experience Design.
Quindi racchiude tutti quegli aspetti che riguardano l’esperienza utente, e che servono per far sentire l’utente a suo agio, quando viene utilizza il prodotto.
Per queste due discipline esistono due figure: UI Designer e UX Designer.
Che devono collaborare tra di loro per creare un concept che poi gli sviluppatori realizzeranno, trasformando il concept in realtà, con l’utilizzo del codice.
Perciò lo Ux Designer prepara il wireframe, e consiglia come possono edssere utilizzati al meglio gli elementi.
Lo UI Designer, invece, progetta il design, andabdo a utiulizzare giusti colori, immagini e fonts
Giusto fare queste precisazioni sulle discipline, perchè molte volte le si confonde.
Che skills bisogna avere?
Per comprendere al cos’è lo UI Design, bisogna avere delle competenze e comprendere al meglio alcuni concetti.
Bisogna avere delle skills per saper realizzare l’interfaccia grafica migliore.
E per fare ciò..Non basta saper solo utilizzare al meglio i software grafici.
Per realizzare una bella interfaccia grafica bisogna saper bene utilizzare i colori.
Perchè con essi, possiamo dare più importanza ad alcuni elementi dell’interfaccaa.
Per far sì, che l’utente sia quasi ‘guidato’ perchè+ noi sappiamo dare il giusto focus ad alcuni elementi.
Altro aspetto è il saper utilizzare al meglio la giusta tipografia.
Infatrti, anche qui, non si possono dare la stessa dimensioni a tutti gli elementi tipografici dell0interfaccia.
Ma i titoli ( gli heading ),devono avere ilo giusto peso per far sì, che chi naviga il sito o l’app, sappia in maniera chiara di cosa si parla.
Questo vale soprattutto per il design di siti web.
Infine, secondo bisogna sapere anche scegliere ed utilizzare le immagini giuste.
Immagini che siano d’impatto, con colori brillanti e che sappiano ‘dialogare’ al meglio con tipografia e colori
Ad esempio, si vedono sempre più spesso interfacce con elementi tipografici in sovrapposizione ad immagini.
Come ad esempio, nelle cards o tiles.
In questo caso, bisogna scegliere delle immagini che non vadano a coprire e a rendere poco visibili gli elementi tipografici.
Infine anche cercare di scegliere immagini che non siano troppo distanti dalla palette di colori del progetto.
Per dare più armonia ed equilibrio all’interfaccia grafica.
Per quanto riguarda i linguaggi di programmazione, uno UI Designer può anche mnon conoscerli.
Perchè la mansione di realizzazione del progetto via codice, spetta più a figure come il web develoiper o app developer.
Figure che sanno utilizzare linguaggi di programmazione in maniera approfondita.
Che software utilizzare?
Per progettare una buona UI, è giusto avere i software adatti da utilizzare in questa fase del progetto.
Fino a qualche annetto fa, i web designer utilizzavano solo Adobe Photoshop per realizzare le interfacce grafiche.
Ma in questi ultimi anni sono nati software molto più adatti, ed in queste righe vediamo quali si possono utilizzare.
In passato, avevo già scritto un’articolo su quali sono i migliori software per creare mockup e concept.
Sostanzialmente..i software più utilizzati per questa fase sono tre.
Adobe XD
Il primo software che cito è Adobe XD, che fa parte dell’Adobe Creative Cloud.
Questo è un software interamente dedicato alla progettazione di interfacce web.
Dal concept fino ad arrivare alle animazioni, per rendere il concept sempre più vicino a l risultato finale.
La prima differenza con i più importanti Software dell’Adobe, è che è gratuito, non ha bisogno di sottoscrizioni di alcun abbonamento.
La seconda differenza che, secondo me, è anche la più importante è che il software mette a disposizione una miriade di plugins.
Quest’ultimi estendono le funzionalità di Adobe XD.
Permettendoci di realizzare fantastici cobcept senza troppa fatica e con un gran numero di strumenti supporto.
L’interfaccia di Adobe XD è molto intuitiva, ed è suddivisa in 3 sezioni:
- Design per la progettazione del layout di tutte le pagine del progetto.
- Prototype per il collegamento delle pagine e realizzazione di animazione per simulare, al meglio, la navigazione
- Share per condividere il lavoro, anche con colleghi di team per agevolare modifiche e flusso di lavoro.
Perciò con Adobe XD, si può realizzare un fantastico concept dinamico per fare vedere al cliente come funzionerà l’applicazione finale.
Sketch
Dopo aver citato il software dell’Adobe, passiamo a Ketch, che per quanto riguarda la progettazione di interfacce grafiche, è il diretto concorrente di Adobe XD.
Questo software permette di creare UI concept moderni, ed anche quest’ultimo ha molti plugins per estendere le funzionalità.
In realtà, Sketch uscito prima sul mercato rispetto ad Adobe XD, il che ha costretto Adobe a creare un software che potesse coprire anche questa fetta di mercato.
Sketch, a differenza del software precedente ha un costo di 99 Dollari a licenza.
Ma si può comunque usufruire di un trial per testare al meglio tutte funzionalità.
Sketch permette di creare concept sia per siti desktop e sia per progetti concepiti per devices più piccoli.
L’interfaccia del programma cambia rispetto ad Adobe, anche se pure Sketch è molto facile da imparare.
Anche perchè, sul sito ufficiale dell’applicativo, si trovano delle sezioni dedicate ai tutorial.
Per chi è alle prime armi con questo software.
Figma
L’ultimo dei software più importanti per progettare la User Interface, è Figma.
Che in questo momento sta riscuotendo un grande successo.
Questo è dovuto anche alle sue tante funzionalità dedicate a chi lavora in team.
Infatti, Figma permette di far accedere al progetto, più figure di un team.
Non solo…permette di lasciare commenti e annotazioni sulle modifiche da realizzare.
Rispetto alle altre due, Figma è una soluzione che prmette di svolgere più processi della realizzazione dell’interfaccia grafica.
Partendo dal wireframe fino ad arrivare al concept finale con la simulazioni delle animazioni che verranno realizzate.
Parlando del prezzo di acquisto..Figma ha tre piani per acquisire il software.
Il primo è un piano gratuito ma che permette solo di avere 3 progetti.
IUnvece per chi vuole cominciare ad utilizzare subito Figma ad un livello successivo, c’è il piano Professional a 15 Dollari al mese.
Questi sono i 3 software più utilizzati per lavorare al meglio con lo UI Design.
E’ bene scegliere attentamente quello più adatto alle nostre esigenze e poi partire subito con la pratica.
Da dove iniziare?
Dopo aver spiegato cos’è lo UI Design, e aver illustrato quali software utilizzare.
Si può partire..Esercitandosi, studiando e provando per migliorarsi, per arrivare sempre più a dei concept vicini al reale.
Ma per prima cosa, prima di cominciare un progetto sullo UI Design, vado a vedere i maggiori siti del settore.
Facccio, quella che chiamo, fase d’ispirazione, cioè spulciare tra i vari siti del settore per prendere esempio da designer affermati.
Quindi, la prima fase da eseguire, secondo me, è questa.
Ci può aiutare ad avere idee più chiare su quello che vogliamo realizzare, ma soprattutto possiamo prendere spunto.
Ed inserire elementi dellinterfaccia grafica, simili alle caratteristiche di quelli realizzati dai designer più bravi.
Questa fase può anche servire per chi è agli inizi e non è esperto nella progettazioni di interfacce grafiche o non sa cos’è lo UI Design.
Le fasi di progettazione
Ovviamente per creare una buona UI bisogna avdere anche ben chiare le dinamiche e le fasi per realizzare un buon progetto.
Come detto, la prima è la fase d’ispirazione, quella che mi permette di guardare cosa fanno i designer migliori, visitare i portfolio di chi, sicuramente, ne sa più di me.
Questa fase la ritengo fondamentale, ma visto che ci ho già dedicato un bel pezzo, parto dalla seconda:
Wireframe
La seconda fase è quella che rigurada la progettazione di un wireframe.
Chi sarà più esperto, saprà esattamente di cosa sto partlando.
Il wireframe è la rappresentaziuone iniziale di una struttura di un sito web o di un app.
Qui si decide la struttura di tutte le pagina, il posizionamento degli elementi all’interno della pagina.
E’ una fase che, solitamente riguasrda molto anche il supporto di UX Designer, che è più esperto e specializzato.
In questa fase comunque si sceglie anche he elementi mettere in evidenza, e quali bisogna mettere leggermente in secondo piano.
Ci sono molti siti che mettono disposizioni strumenti per creare un wireframe.
Ad esempio Balasamiq, che è sicuramente il più conosciuto ed inoltre facile da utilizzare
La scelta del font
Su questo blog ho dedicato molto spazio al font, e a quali scegliere per realizzare un bel progetto.
Nella fase di progettazione di una UI, è la mia fase dopo aver terminato il wireframe.
Per la scelta del font, mi baso parecchio sui Google Fonts.
Essi hanno un peso leggero, sono adatti per la visualizzazione di ogni devices e offrono sempre molti stili e declinazioni.
Che cosa intendo?
Che hanno posso contare di avere elementi in font light, regular, medium, bold ecc..
Questo permette di dare il giusto peso ad ogni elemento tipografico e dare una giusta dimensione al progetto.
Con elementi ben leggibili e che hanno tutti la giusta importanza.
Si fa sempre più fatica a trovare progetti di siti web con tutti gli elementi tipografici della stessa dimensione dello stesso peso.
Scelta dei colori: le palettes
Dopo aver realizzato un buon wireframe, chiaro e aver dato un posizionamento corretto agli elementi; e scelto il font.
Mi concentro sulla scelta dei colori, per realizzare una bella palette.
Solitamente, anche qui, mi appoggio molto ad alcuni siti web che mettono a disposizione bellissime palette colori.
La mia preferita è sicuramente flatuipicker, che utilizzo molto spesso e che permette di copiare i colori in Esadecimali, RGB, CMYK, HSL.
Ma per chi volesse cercare un’alternativa, io ho scritto un’articolo su come scegliere i giusti colori per il proprio progetto digitale
Inserimento delle immagini
Infine, mi dedico alla ricerca delle immagini, che devono essere di forte impatto, soprattutto per le sezioni con cui bisogna attirare l’attenzione.
Qui, secondo me, bisogna cercare immagini checaratterizzati da colori facili da abbinare salla palettes scelta.
Per non realizzare concept che abbiano immagfini e colori che non stiano bene.
E che causano un ‘pugno nell’occhio’ a chi sta guardando il progetto.
Poco tempo fa ho parlato dei migliori siti su cui trovare immagini gratuite.
Ebbene sì…Prima di riscontrare problemi sui diritti d’autore, mi oriento nella ricerca di immagini geatuite.
Se poi, successivamente, il cliente richiede foto premium (cioè a pagamento) sostituisco le precedenti con quelle fornite dal committente.
Il mio sito di fiducia per reperire immagini gratuite è Unsplash
La conclusione
In queste righe ho illustrato cos’è lo UI Design, e come migliorare l’ interfaccia grafica dei propri progetti.
Non solo dal punto di vista estetico.
Ma anche sui software da utilizzare, sulle fasi di progettazione.
Sono tutte considerazioni che ho provato su progetti a lavoro ma anche su progetti personali, che utilizzo anche come fonte di studio.
Sicuramente prima di realizzare una User Interface moderna ed elegante, ci vuole pazienza, esercitazioni ed esercitazioni per limare imprecisioni e migliorare i dettagli
