Occupandoci da anni di UI design per la realizzazione di siti web ed app mobile, la nostra cassetta degli attrezzi è sempre in evoluzione. Con la crescita del settore, infatti, anche gli strumenti a disposizione dei web designer sono in rapida crescita.

L’adozione di strumenti per il design di interfacce flessibili, efficaci ma anche soprattutto economici, impattano in modo considerevole sui risultati e sulla qualità del lavoro.

Ecco allora una lista di strumenti per lo sviluppo di UI gratuiti che abbiamo selezionato e che usiamo giornalmente per lo sviluppo dei nostri progetti web e mobile. Ovviamente questi sono selezionati in base all’esperienza ed esigenze del nostro Team di sviluppo UI.

Icone e Vettori

Cercando online si trovano decine (se non centinaia) di siti ed archivi di icone e vettori. Tuttavia se ci concentriamo su quelli che presentano icone di qualità, ampia selezione e che sono completamente gratuiti, la selezione si riduce drasticamente.

I due siti che utilizziamo hanno invece una incredibile selezione di icone e vettori SVG a costo zero che sono anche degli strumenti incredibilmente efficaci e divertenti da usare.

Icomoon

Una collezione di oltre 5500 icone vettoriali gratuite, con la possibilità di generare font personalizzati. Supporta la conversione di SVG, PDF, Polimero, XAML, CSH e la modifica dei glifi di base. Comodissimo per creare i propri set di icone CSS.h

The Noun Project

La più vasta collezione online di icone di sempre. Grazie a The Noun Project accedi gratuitamente a milioni di icone SVG e PNG. Se cerchi icone e vettori di altissima qualità da usare ma anche da modificare, questo sito è una risorsa immancabile nella cassetta degli attrezzi di UI designer.

Wireframing e Strumenti di Design

Entriamo allora nel vivo degli strumenti per lo sviluppo vero e proprio di interfacce utenti e UI design. In questo campo ogni designer ha le sue preferenze. In particolare, strumenti di disegno come Sketch ed Adobe XD sono piattaforme molto utilizzate, tuttavia la nostra scelta è ancora rivolta verso strumenti gratuiti di UI designer.

Figma Sketch

Questo strumento è fantastico. È diventato indispensabile per tutto il nostro team e ha rapidamente sostituito tutta una serie di strumenti che erano prima indispensabili non solo per la realizzazione del disegno, ma anche per la prototipazione e presentazione dei progetti al cliente finale. Descrivere Figma in questa sede è molto difficile visto la quantità di feature che presenta. Lo strumento è completamente gratuito ed è disponibile anche in versione desktop per Mac e Windows

Draw.io

Nell’ambito degli strumenti gratuiti per gli UI designer, questo strumento occupa un posto particolare in quanto consente di creare e condividere diagrammi di ogni tipo (sitemap, diagrammi di flusso, architettura, interazioni, schemi di database relazionali, etc.). Questi tipi di diagrammi sono fondamentali in fase di ideazione e realizzazione di un progetto digitale in quanto permettono di schematizzare i flussi, le interazioni e tutti gli aspetti di routing delle applicazioni, condividendo poi con gli altri sviluppatori o con i Clienti i diagrammi creati. 

Nb Se hai bisogno di un programma specifico per creare mappe mentali utilizza Coogle.

Wireframe CC

Il primo passo di un progetto digital comporta sempre la realizzazione di wireframe prototipi semplificati, da condividere con i Cliente e principali utilizzatori per verificare funzionalità e flussi operativi. Wireframe CC fa questo lavoro maledettamente bene. Wireframe CC è una soluzione basata su cloud che consente agli utenti di creare semplici wireframe di siti Web e applicazioni mobili ed esportare progetti in file PDF / PNG.

Font e logotype 

Scegliere i font è spesso un passaggio sottovalutato. La scelta del font giusto può impattare su molti aspetti: leggibilità, usabilità da mobile, peso della pagina, copyright, etc. 

Inoltre uno degli errori che spesso si incontra è l’accoppiamento di font diversi e la scelta delle giuste declinazioni in termini di peso, stile e carattere.

Google Fonts

La collezione di Google Fonts è oggi la più usabile non solo per dimensioni ma anche grazie ad un’interfaccia (a proposito di UI design) efficace nella selezione e verifica dei vari font.

Fontjoy

Spesso si usano due o più font insieme per rendere più efficace e leggibile il testo. Nella maggior parte dei casi, si usa un font per il titolo ed uno diverso per il paragrafo. 

Il sito Fontjoy è molto efficace e anche divertente da usare: utilizzando l’intelligenza artificiale genera coppie di font insieme per verificare l’efficacia degli stessi quando sono usati insieme. 

Ad onore del vero ci sono molti siti simili, quali ad esempio https://www.canva.com/learn/the-ultimate-guide-to-font-pairing/, https://fontpair.co/

voi quale preferite?

Linee Guida

Un designer che si rispetti non può esimersi da conoscere e fare sempre riferimento alle linee guida dei due principali player sul mercato, ossia Google e Apple. Ecco allora i link ai loro siti web:

Linee guida di Google Material

Il Material Design è la formalizzazione del UI design sviluppato da Google supportato nativamente a partire da Android 5.0. Il suo scopo è proprio quello di fornire gli standard di progettazione specifici per lo sviluppo di applicazioni su dispositivi Android, Web e iOS.

Linee Guida di Apple Design

Da sempre Apple presta una particolare attenzione all’usabilità ed alla piacevolezza delle sue UI. Sul sito di Apple si può quindi trovare la Bibbia del design formulata in tutti suoi libri, vangeli, versetti e preghiere…

Patterns ed Ispirazione

Grazie a Internet, le risorse di ispirazione per il design non mancano. ogni sito o applicazione può essere fonte di ispirazione (sia in senso positivo che negativo). Inoltre i siti che presentano collezioni di design sono moltissimi ed ogni designer ha le sue preferenze in merito. Io personalmente ad esempio amo molto pinterest.com che è molto divertente da navigare e fornisce spunti sempre diversi. Ma senza divagare troppo ecco alcuni siti che ci piace utilizzare per trovare ispirazione ai nuovi progetti digital. 

Mobile design

Pttrns.

Un sito particolarmente interessante per chi si occupa di UI design di mobile application. In questo sito tutte le principali UI sono organizzate in modo tematico ed è quindi facile trovare lo spunto per risolvere particolari aspetti di una app o di un sito nella sua versione responsive. 

Awwwards

Interessante e sempre in aggiornamento, questo sito raccoglie i migliori siti in termini di design e grafica. E’ particolarmente efficace il sistema di premiazione che consente di dare risalto ai siti più belli. Stimolante e sorprendente. 

Interessante e sempre in aggiornamento, questo sito raccoglie un esempio dei migliori siti in termini di design e grafica. E’ particolarmente efficace il sistema di premiazione che consente di dare risalto ai siti più belli. Stimolante e sorprendente. 

Dribbble

Se il sito precedente non lesinava sulle W questo invece ci mette le B. La missione di  Dribbble è quella di creare un luogo in cui i designer possano trovare ispirazione, feedback, community e posti di lavoro. Non solo è la migliore risorsa per trovare ispirazione ma anche per scoprire e connettersi con i designer di tutto il mondo.

UI Garage

Entrato di recente nella lista dei miei preferiti, questo sito raccoglie temi, design ed elementi di ispirazione per designer, sviluppatori. Ideale in momenti di crisi per trovare ispirazione quando non si sa dove sbattere la testa.

Colori e Palette

Ecco la parte più giocosa e divertente. A volte passo minuti generando schemi di colori solo per il gusto di sorprendermi con gli accostamenti. Esistono vari generatori di colori, io ho selezionato questi.

Coolors

Particolarmente divertente da usare, permette non solo di generare palette ma anche di condividere i risultati ottenuti con altri tools (ad esempio è possibile condividendo tramite l’URL, in PDF, PNG, o addirittura esportando il SCSS, SVG). Da provare!

Generatore di Testi

…ed infine ci siamo noi!

Lorem Ipsum Generator

Questo strumento, sviluppato ormai molti anni fa, rimane sempre un grande classico, dimostrato anche dai centinaia di utenti che giornalmente lo utilizzano. Lo strumento consente di creare una stringa di testo di lunghezza variabile da usare come placeholder nello sviluppo di progetti grafici. Il nostro ha inoltre qualche particolarità in più consentendo di generare, oltre il classico lorem ipsum di ciceroniana memoria, anche il più pratico supercazzola, in onore del grande Ugo Tognazzi. Un must per ogni UI designer.