👋 Ciao e benvenuto nel mio blog!
Io sono Davide Massarella e sono un designer. Mi occupo di progettazione di UI e UX e sono un art director presso una fintech europea da diverso tempo.
Tra università e carriera, ho avuto modo di sperimentare in tutti questi anni diversi tool e software di UI e UX design e mi piacerebbe portartene alcuni per darti una panoramica su cosa offre il mercato ad oggi.
Che tu sia alle prime armi o già un designer navigato, è bene restare sempre aggiornato sui software più recenti per uno UI designer.
Ho visto persone usare ancora Photoshop per creare le interfacce, capisci cosa intendo?
Avere il giusto set di strumenti nel proprio bagaglio è essenziale, sia per questioni di praticità, sia per ottimizzare i processi e anche per entrare in contatto con più clienti.
Dico sempre che non è il tool a fare il designer perchè chiaramente le competenze e la capacità di calarsi nel contesto è propria del designer, non certo dello strumento che utilizza. Resta però importante conoscere abbastanza bene anche lo strumento, per potersi muovere nella maniera più agevole e ottimale possibile.
In fondo, siamo qui per ideare e progettare, non per perdere 2 ore a trovare funzionalità o reimpararci le shortcut, no?
Quindi, se sogni di creare il prossimo sito web o app incredibile, è essenziale padroneggiare sia la UI che l’UX. In questo articolo, ci immergeremo nei migliori strumenti di progettazione UI/UX che renderanno il tuo lavoro più divertente e le tue creazioni più straordinarie.
Sì, sto per svelarti i segreti del successo nel mondo del design digitale!
Vabbè, anche meno, ma volevo creare un po’ di hype…
Io come sempre ho il mio buon sigaro da fumare mentre scrivo, ti consiglio di accomodarti e di partire subito con la ciccia per cui sei qui.
Perché Hai Bisogno di uno Strumento per UI/UX Design?
La domanda è assolutamente lecita mio amico Fritz, in effetti si possono disegnare rettangoli e altre forme anche su Paint.
I software che ti andrò ad elencare sono fondamentali per aiutarti a creare applicazioni digitali che siano non solo esteticamente accattivanti ma anche altamente interattive.
Ecco alcune delle aree in cui questi strumenti sono indispensabili:
- Test Utente: Ti consentono di condurre test e raccogliere feedback dagli utenti per migliorare l’usabilità del tuo design.
- Wireframing: Sono perfetti per creare schemi iniziali delle tue interfacce, consentendo di pianificare la struttura delle pagine.
- Prototipazione: Ti permettono di creare prototipi interattivi che simulano l’esperienza dell’utente finale.
- Design Visuale: Offrono strumenti avanzati per la progettazione di grafica vettoriale, icone e layout.
- Ottimizzazione: Aiutano a ottimizzare le tue interfacce per una migliore performance e fruibilità.
- Passaggio di Consegne: Semplificano il processo di passaggio del progetto ai developer, garantendo una migliore comprensione del design.
Per dovere di cronaca, ti avviso che i tool che andremo a vedere sono per lo più UI-centered in quanto, volendo offrirti opinioni e condividere reali esperienze di utilizzo, ti sto presentando solo gli strumenti che nel corso della mia carriera professionale mi è capitato di utilizzare e occupandomi prevalentemente di direzione creativa capisci bene che tool specifici per la UX non ne ho sperimentati molti.
I 5 migliori tool di UI design (secondo me)
Ora entriamo nel vivo, esaminando i migliori strumenti per UI design che mi è capitato di usare nel corso del tempo. L’ordine con cui te li presento segue la mia personale classifica dei 5 strumenti di design che più uso tuttora. Più in fondo troverai anche altri tool che mi è capitato di usare in passato ma che ora ho sostituito o smesso di usare.
01. Figma
Non c’è niente da fare, sin dalla sua presentazione mi sono innamorato di questo strumento e man mano ho spostato tutto quasi esclusivamente su questo tool straordinario, spingendolo anche ad adottare in azienda e procedere ad una migrazione dei processi interni.
Sicuramente è ormai ben noto come strumento di design, soprattutto perchè vanta un cloud reattivo e affidabile che consente la collaborazione in real-time similmente a come accade sui documenti Google per esempio. Inoltre, potendo girare anche su browser, è comodissimo per accedere ovunque, su Windows, Mac ma anche tablet e smartphone qualora aveste bisogno di reperire il link a qualche screen on-the-go.
Con Figma ad oggi è possibile svolgere quasi tutti i processi di progettazione, a partire dal brainstorming tramite FigJam fino alla realizzazione di wireframe, mockup e prototipi funzionali. Inoltre, con gli ultimi rilasci hanno aggiunto anche la modalità DevMode che consente un handoff diretto col team di sviluppo.
Nella sua versione free è già possibile sfruttarlo a dovere senza particolari limitazioni e fidati, ne varrà la pena acquistare il piano Professional non appena avrai bisogno di più spazio!
02. Sketch
Penso che chiunque abbia un minimo di competenze UI si sia imbattuto almeno una volta in Sketch. Altro tool eccezionale sicuramente, probabilmente padre di tutti quelli qui presenti. Paga un po’ lo scotto di essere stato il primo tool per questo settore e ora deve rincorrere gli altri che presentano più funzionalità.
Da qualche mese però anche Sketch si è spostato sul Cloud e permette di lavorare in maniera collaborativa come per Figma, il che è una gran cosa. Tuttora lo utilizzo spesso per alcuni progetti e, chiamatemi pure pazzo (sì, pazzo per Gesù, pazzo per Gesù – è una citazione meme) ma trovo più comodo usare il sistema di simboli e instanze di Sketch che di Figma. Gestire il design system qui è semplice e immediato.
Purtroppo esiste solo la versione per MacOS e offre una prova gratuita di 30 giorni.
03. InVision Studio
Mi è capitato di usare InVision in più occasioni e devo dire che tutto sommato non è per nulla come tool, anzi. Si presenta molto completo e, per certi aspetti sul prototyping, anche più avanzato. Permette di condividere rapidamente i prototipi interattivi, per cui è molto comodo per testing e feedback da parte di altri utenti. Presenta anche lui la collaborazione in tempo reale come Figma, inoltre ha una whiteboard con Freehand per permettere brainstorming e sketch vari. Utile e ben gestita anche la parte sul design system.
Io da bravo cattivone ormai utilizzo il loro plugin Craft su Figma, ha una funzione per sostituire i placeholder che è veramente comoda ed evita i vari lorem ipsum tanto brutti 🙂
04. Protopie
Che dire su Protopie… Questo tool è fenomenale, c’è poco da dire. Se stai cercando un tool per realizzare prototipi altamente interattivi, con possibilità di aggiungere condizioni e avere accesso anche a parti hardware del device, questo tool è perfetto. Puoi addirittura prototipare sistemi di infotainment per le auto o per dispositivi smart, interagire tra più dispositivi e inserire variabili in base alle scelte dell’utente. Come tool è molto di nicchia, mi capita molto di rado di doverlo utilizzare ma per ciò che offre merita decisamente un posto nella mia personale classifica 😀
05. Zeplin
Davide, ma ora che c’entra Zeplin come tool di UI design?
Ti do anche ragione eh, ma i tuoi bei design come pensi che possano passare nelle mani dello sviluppatore di turno che li renda reali? Serve necessariamente uno strumento per l’handoff e uno UI che si rispetti deve averne almeno uno nel suo bagaglio no?
Dunque, parliamo di Zeplin. L’ho utilizzato per diversi anni e tuttora lo utilizzo spesso sui progetti già citati su Sketch. Zeplin si integra perfettamente come plugin dei tool di design finora elencati ed è comodissimo per gestire lo scambio di informazioni tra designer e sviluppatori. Fornisce indicazioni sui colori utilizzati, sulla tipografia, le spaziature e tutte le altre informazioni utili al developer di turno per procedere in autonomia alla realizzazione di quel design. Integra anche la possibilità di associare repo GitHub e Storybook per gestire al meglio il design system e i componenti. Prima che su Figma introducessero la DevMode lo utilizzavo molto di più, ormai anche questo step lo sto pian piano migrando, ma Zeplin è tuttoggi un validissimo strumento per la documentazione di interfacce e flussi.
Recap
- Figma – Ottimo per il design collaborativo real-time e l’handoff con gli sviluppatori
- Sketch – Perfetto per un focus sul processo di design
- InVision – Ottimo tool per la condivisione di prototipi e documentazione
- Protopie – Miglior tool di prototyping con possibilità di interazioni col mondo reale
- Zeplin – Perfetto per la documentazione e l’handoff con gli sviluppatori.
Altri Strumenti di Design validi
Come per tutte le cose nel 2023, chiaramente, ci sono infinite scelte che internet offre per svolgere la stessa funzione. Infatti, nonostante la mia top 5, ci sono molti altri tool utili ad uno UI Designer o che potrebbe essere il caso di conoscere.
Non si sa mai con che cliente o azienda si avrà a che fare, e se per motivi interni scoprissi che utilizzano qualche tool meno noto? Meglio non farti prendere impreparato! 😛
Ricorda però, non farti spaventare dai numerosi strumenti in giro: le tue competenze sono più importanti dello strumento che usi. Con una settimana di utilizzo riesci almeno a muoverti più che bene nella sua interfaccia. Le tue conoscenze invece, beh, è più difficile acquisirle subito!
Quindi se stai pensando di rispondere a qualche annuncio di lavoro ma sei frenato perchè magari nella job description fanno riferimento a qualche software che non conosci, non pensarci due volte e candidati!
🧘♀️ Fine della modalità ispirazione.
Tornando a noi, di seguito trovi elencati altri tool in cui mi sono imbattuto: alcuni li ho usati letteralmente meno di 5-10 volte, altri li ho rimpiazzati con Figma.
06. Axure RP:
Axure RP è uno strumento ideale per la prototipazione e la gestione del workflow. Offre una documentazione dettagliata e facilita il test delle funzionalità.
07. Proto.io:
Proto.io è noto per la sua facilità d’uso ed è perfetto per la creazione, il test e l’integrazione di mockup accurati. La sua funzione video feedback agevola la comunicazione tra i membri del team.
08. Adobe XD:
Come leader nel software di design, Adobe XD offre strumenti basati su vettori per la creazione di prototipi e mockup. La sua interfaccia familiare è un punto di forza.
09. Marvel:
Marvel semplifica il design con la creazione di wireframe ad alta e bassa fedeltà, prototipi interattivi e test utente. La funzione Handoff fornisce stili CSS e codice HTML.
10. Framer X:
Framer X è una scelta ideale per i designer che vogliono sperimentare con il codice e creare prototipi funzionali. I suoi numerosi plugin offrono molte funzionalità aggiuntive.
11. Origami Studio:
Origami Studio è un tool avanzato per la prototipazione e offre tutte le funzionalità necessarie per creare prototipi completi.
12. FlowMapp:
La struttura, i flussi e le mappe sono essenziali nel design UX, e FlowMapp è dedicato proprio a questo. Ti permette di creare mappe dei flussi utente e visuali.
13. Mockplus
Mockplus è uno strumento completo per i designer UX che consente di creare rapidamente schizzi, wireframe e prototipi ad alta fedeltà. Offre un editor drag-and-drop intuitivo e una funzione collaborativa che consente ai membri del team di lavorare insieme in modo efficiente.
14. Balsamiq
Balsamiq è uno strumento ideale per la creazione rapida di wireframe avanzati, offrendo la semplicità dei disegni su carta combinata con funzionalità sofisticate. È adatto per mockup in stile schizzo e include strumenti di collaborazione.
15. Lucidchart
Con Lucidchart, è possibile visualizzare concetti complessi, progettare processi aziendali, creare organigrammi, mappe concettuali e molti altri tipi di diagrammi in modo intuitivo e efficace.
16. KonceptApp
Koncept ti consente di prototipare più velocemente e prendere decisioni di progettazione UX più intelligenti supportate dai dati.
17. UXPin
Con UXPin puoi sviluppare prototipi che simulano il prodotto finale. Puoi anche iniziare con una vasta gamma di elementi UI integrati. Si collega con Storybook, repository Git o pacchetti NPM per utilizzare direttamente i componenti di codice dal sistema di progettazione, dall’app o dal sito web.
18. Adobe Illustrator
Adobe Illustrator è un software di grafica vettoriale ampiamente utilizzato per la creazione di illustrazioni, disegni, loghi e grafiche di alta qualità da poter importare all’interno delle tue interfacce.
Conclusioni
In realtà potremmo andare ancora oltre, ma avrei dovuto iniziare a linkarti tool neanche mai usati e non mi sembrava il caso, ma sappi che lì fuori ce ne sono ancora tanti! Come già detto però, fortunatamente, ormai il mondo del design UI si sta “figmatizzando” (non per forza sarà un bene, ma chissà), potendo fare tutto con un unico strumento.
Tuttavia, non è detto che ciò che funzioni per me funzioni bene anche per te, per cui assicurati sempre di selezionare lo strumento giusto per le tue esigenze.
E una volta che hai fatto il tuo design bello bellino?
Sappi che lì fuori ci sono anche strumenti per realizzare un sito web senza scrivere una singola riga di codice appositamente per noi designer! Scoprirai il mondo degli strumenti no-code che ti consentiranno di realizzare fantastici siti web senza la necessità di competenze di programmazione.
Insomma, con i giusti strumenti a disposizione, nulla ti fermerà nel creare progetti eccezionali e soddisfare le esigenze dei tuoi clienti e degli utenti finali.
Ho lanciato una community gratuita su Facebook chiamata “UI Academy” in cui puoi trovare all’interno ispirazioni, discussioni e consigli riguardo il mondo della UI Design.
Se invece sei alla ricerca di nuovi spunti, ti ricordo che ho una newsletter mensile 0 spam in cui, tra le altre cose, propongo una sfida mensile con un brief da progettare.
Fammi sapere che strumenti utilizzi e scrivimi per qualsiasi dubbio,
alla prossima!
