UI Design 2020: Una collezione di Risorse e Strumenti Gratuiti per Sviluppare UX / UI di Siti e App

Creatività e User Experience

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

Icomoon sito utile per scaricare icone e vettori gratis
Trovare Icone e Vettori su 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.

The Noun Project è la più grande collezione online per scaricare icone
Scaricare Icone Gratuite su https://thenounproject.com/

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

Figma uno Strumento Gratuito Versatile e Potente
Scopri tutte le funzionalità disponibili su www.figma.com

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.

Wireframe CC uno Strumento per creare Wireframe e Prototipi Semplificati
Creare un Wireframe su https://wireframe.cc/

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.

Google Fonts la libreria di Font più vasta sul Web
Consulta tutti i Font disponibili su https://fonts.google.com/

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. 

Testare l’utilizzo in coppia di Font differenti su https://fontjoy.com/

Ad onore del vero ci sono molti siti simili, quali ad esempio https://www.canva.com/font-combinations/, 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.

Material.Io è il sito che riporta gli standard consigliati da Google
Consulta https://material.io/ per scoprire le Best Practices di Google

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…

Apple Design Resources è una raccolta di best practices per l'UI di Siti e App
Su https://developer.apple.com/design/resources/ trovi dei consigli pratici per lo sviluppo UI e UX

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. 

Pttrns. tool utile per la UI Design di applicazioni
Consulta https://pttrns.com/ per sviluppare le tue App

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. 

Awwwards è la raccolta dei migliori siti web per UI ed UX
La raccolta dei Siti più accattivanti del web? Scoprila su https://www.awwwards.com/

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.

Dribbble è una libreria di Siti da cui trarre ispirazione per lo sviluppo web e app
Trova l’ispirazione con https://dribbble.com/

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.

UI Garage
Scopri le ultime frontiere del web design su https://uigarage.net/

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!

Coolors è il posto giusto per trovare palette perfette
Divertiti a comporre Palette su coolors.com

Generatore di Testi

…ed infine ci siamo noi!

Lorem Ipsum Generator

Generatore Lorem Ipsum di Neting per lo Sviluppo di Siti e App
Prova https://www.neting.it/tools/generatore-lorem-ipsum-online.html sui tuoi progetti di Web Design

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.

Condividi
Condividi su facebook
Condividi su google
Condividi su twitter
Condividi su linkedin
guest
0 Commenti
Inline Feedbacks
View all comments

Potrebbe Interessarti

Luca Mainieri
Dal 2013 sono l’orgoglioso papà di Francesco e Camilla, due panzottini che hanno reso la mia vita più ricca di emozioni. Dal 2002 mi occupo di web in modo professionale, prima come programmatore e successivamente come consulente webmarketing e seo / ppc e social media. Nel 2009 ho creato Neting, con la quale forniamo servizi professionali di sviluppo (realizzazione App e siti Web) e consulenziali (web marketing e promozione SEO / PPC).
Condividi
Condividi su facebook
Facebook
Condividi su linkedin
LinkedIn
SCRIVI UN GUEST POST

Sei un blogger e sei interessato a scrivere articoli per il Blog di Neting?

Vuoi approfondire questo argomento?

Vuoi saperne di più? Hai bisogno di aiuto per il tuo business?
I nostri esperti sono a tua disposizione.