30 strumenti semplici e gratuiti per i progettisti

Strumenti e app intelligenti, specialmente quelli che fanno risparmiare tempo, sono indispensabili per i progettisti. E abbiamo raccolto alcuni dei più recenti e più grandi in questa lista di strumenti gratuiti per i progettisti!

Dalla tipografia che aiuta gli elementi a snippet di codice e palette di colori che è possibile scaricare, questo elenco è ricco di oggetti di uso quotidiano per rendere più semplice la vita di progettazione. Immergiti e trova alcuni strumenti gratuiti e pratici per semplificare il tuo flusso di lavoro.

1. Gradienti Web

Chi non ama un buon gradiente? WebGradients è una raccolta di 180 gradienti lineari che puoi utilizzare come sfondi di contenuti in qualsiasi parte del tuo sito web. Copia il codice cross-browser CSS3 o scarica le versioni PNG, Sketch or Photoshop.

2. Lista di controllo di tipografia impeccabile

L'elenco di Typewolf è un esauriente corso di tipografia che funge anche da strumento interattivo per aiutarti a evitare i disastri di tipo. L'elenco è completo e fornisce istruzioni semplici per aiutarti a correggere gli errori.

3. Colori LOL

Hai bisogno di una tavolozza di colori stimolante? LOL è pieno di quadricromia (e codici HEX) per aiutarti a trovare combinazioni che potresti non aver considerato.

4? resizr

Prova la reattività del tuo sito web con questo strumento che ti consente di inserire un URL e vederlo come fanno gli utenti su diversi dispositivi. È inoltre possibile alternare le visualizzazioni orizzontale e verticale.

5. Statistiche CSS

Come sono i tuoi fogli di stile? Le statistiche CSS sono uno strumento interessante che analizza tutto in un formato utilizzabile. (È un grande aiuto se vuoi vedere di che colore o carattere è incluso in un disegno.)

6. Adobe Spark

Lo strumento Spark di Adobe è un generatore di immagini gratuito perfetto per la creazione di grafica promozionale per i social media. Lo strumento è veloce e può impedirti di spendere enormi quantità di tempo su queste piccole immagini. (E funziona come la maggior parte degli altri prodotti Adobe quindi non c'è una vera curva di apprendimento.)

7. Google Web Designer

Questa app è ancora in beta, ma ti aiuta a creare design interattivi basati su HTML5 e grafica animata che possono essere eseguiti su qualsiasi dispositivo. Chi non vorrebbe l'aiuto di Google?

8. Libreria dei caratteri

Resta al passo con tutti questi Google Fonts utilizzando questo strumento che ti aiuterà a taggare e organizzare tutto ciò che hai in uso.

9. Che tipo di carattere è

Non sei sicuro di quale sia il nuovo tipo di carattere che continui a vedere? Che tipo di carattere ti consente di caricare un'immagine o specificare un URL e ottenere corrispondenze di tipo. Fornisce anche una bella lista di corrispondenze ravvicinate per aiutarti a trovare il giusto carattere tipografico.

10. Morte a magazzino

Questo è un sito di foto stock che non ha l'aspetto tradizionale delle foto d'archivio. Ogni mese, gli abbonati ricevono un pacchetto gratuito di foto da utilizzare come vogliono e ciascuno è curato da diversi fotografi.

11. Todoist

Todoist è una pratica e comoda app per la lista di controllo. Usalo per tenere traccia dei progetti nell'elegante interfaccia minimalista che è facile da usare e ingombra.

12. Bulma

Bulma è un framework CSS semplice e moderno basato su Flexbox. È modulare e reattivo e ogni bit del codice è open source su GitHub.

13. Musica per la programmazione

Perdona il disegno brutalista; usa la grande funzione di Music for Programming. Il sito è un insieme collaborativo di mix musicali creati per l'ascolto durante la programmazione. (Oppure puoi semplicemente renderlo la tua playlist praticamente per niente.)

14. PlaceIt

Se hai bisogno di un mockup per mostrare i progetti, questo sito ha più di 2.500 opzioni creative commons tra cui scegliere.

15. Righello CSS

Usa questo strumento per vedere le differenze tra le lunghezze CSS - relativo ai font, percentuale viewport e assoluto. Inserisci i tuoi valori e vai.

16. Patterninja

Questa piccola app prende qualsiasi immagine - puoi usare la tua o usare la libreria gratuita - e trasformarla in un pattern da utilizzare in una varietà di tipi di progetti. È uno strumento con cui puoi giocare tutto il giorno e non annoiarti.

17. Tematiche

Trova tutti i migliori temi gratuiti per WordPress, Bootstrap e altro in un unico posto. Inoltre, ogni tema e modello sul sito è reattivo in modo da non dover attraversare un sacco di confusione.

18. Scrivi qualsiasi cosa

Pensi di avere una tavolozza tipografica perfetta fino a quando non la ottieni nel CSS e realizzi che le cose non funzionano come pianificato? Type Anything ti aiuta a creare fantastiche combinazioni di font che puoi vedere sullo schermo, regolando tutto, dal carattere alla dimensione alla spaziatura. Provalo prima di codificarlo.

19. Img2CSS

Converti qualsiasi immagine in puro CSS. Basta caricare la tua immagine e vedere la magia accadere.

20. Glyphdiff

Confronta due caratteri tipografici con questo strumento. Scegli due caratteri tipografici della stessa famiglia o combinazioni molto diverse solo per divertimento.

21. Impalette

Controlla la presenza di colori dominanti nelle immagini con una griglia basata su Pantone. Ciò che rende lo strumento eccezionalmente bello è che fornisce anche molte opzioni di colore correlate.

22. Centro visivo

Trova il centro visivo degli oggetti usando questo strumento. (Potresti essere sorpreso dal punto in cui cade in alcune immagini). Puoi anche utilizzare i plug-in di Sketch o Illustrator per utilizzare lo strumento offline.

23. Pattern degli eroi

Questo database è ricco di sfondi SVG ripetibili che puoi utilizzare per progetti web. Regola i colori di primo piano e di sfondo, opacità e download.

24. Site Auditor

Non preoccuparti dell'ottimizzazione dei motori di ricerca. Site Auditor analizza il tuo sito per trovare problemi SEO che potrebbero impedire al tuo sito di posizionarsi su motori di ricerca come Google. Fornisce problemi e soluzioni per aiutarti a ottimizzare al meglio il tuo sito. (Gratuito per un sito, fino a 50 pagine.)

25. Sketchpacks

Trova e gestisci i plugin per l'app Sketch direttamente dalla barra dei menu. L'installazione con un solo clic.

26. Sviluppo Web etico

Aiuta a creare un web migliore come designer etico. Questo elenco include molti principi e linee guida per aiutarti a rimanere ancorato.

27. Generatore di breakpoint dell'immagine reattivo

Lo strumento consente di scegliere le migliori risoluzioni di immagine per diverse dimensioni dello schermo utilizzando un concetto algoritmico per trovare valori di larghezza dell'immagine che offrono una riduzione significativa delle dimensioni del file.

28. Unsplash

Unsplash è un altro database di fotografia ad alta risoluzione. Cerca nel database o iscriviti e ottieni foto nella tua casella di posta.

29. Tavolozza dei materiali

Oggigiorno, tutto il Material Design è di tendenza, in particolare le brillanti scelte di colore. Questo strumento ti aiuta a scegliere i colori, a vedere come appariranno nel design e fornisce una tavolozza scaricabile con alternative.

30. Digitare termini

Se il gergo della tipografia suona ancora straniero di tanto in tanto, questo foglio di tipografia animato ti aiuterà a imparare la lingua in fretta.