Imparare le competenze necessarie per il web design o lo sviluppo web è il primo passo per lavorare sul web, ma questo significa anche familiarizzare con gli strumenti del mestiere. Ecco perché abbiamo messo insieme questa lista di 99 strumenti gratuiti di cui avrai bisogno per lo sviluppo web, il web design o entrambi.

Ogni risorsa di questa lista è gratuita e completa le competenze che insegniamo nei nostri Web Design, Web Developer e Front End Developer Blueprints (corsi con istruttore che ti guidano attraverso i fondamenti di ogni ruolo).

Quando impari, tieni questa lista a portata di mano e pensala come la tua cassetta degli attrezzi virtuale.

Risorse di web design

Questa lista di strumenti di web design include strumenti di web design per principianti, così come risorse di design che ti serviranno per un’intera carriera.

(back to top)

Liste di newsletter

1. Creative Market
Prima di fare qualsiasi altra cosa, vai sulla lista di newsletter di Creative Market. Una volta alla settimana, riceverai un’email piena di 5 download gratuiti, incluso tutto, da modelli e font a modelli e temi.

(back to top)

Software + Apps

Questi programmi software e applicazioni web forniscono una solida base per il web design.

2. CoffeeCup Software
Offrono tutti i tipi di applicazioni gratuite per i web designer, incluso un editor HTML, un costruttore di moduli web, un designer di carrelli della spesa e molti altri.

3. InVision app
Potenti strumenti di prototipazione e collaborazione. È possibile ottenere mockup e prototipi ad alta fedeltà in pochi minuti.

4. Pixlr
Modifica le immagini direttamente nel tuo browser.

5. Canva
Software di disegno grafico incredibilmente facile che chiunque può usare. La funzione di ricerca e trascinamento è così semplice e utile!

6. Easel.ly
Fantastici modelli gratuiti di infografiche.

(back to top)

Foto

Le foto sono una parte fondamentale del web design. Queste risorse di foto stock sono fondamentali quando hai bisogno della foto giusta al momento.

7. Unsplash
Alcune delle più belle foto stock gratuite là fuori, e con tonnellate di varietà. Nuove immagini vengono aggiunte ogni giorno.

8. PicJumbo
Ottieni foto gratis nella tua casella di posta elettronica che sono totalmente gratuite per uso personale e commerciale.

9. Gratisography
Immagini gratuite ad alta risoluzione che puoi usare in progetti personali e commerciali. Hanno categorie facili da consultare: animali, natura, oggetti, capricci e altro ancora.

10. Compfight
Cerca tonnellate di immagini con licenza per uso personale e/o commerciale, principalmente da Flickr.

11. IM Free
Risorse curate di web design, tra cui una tonnellata di foto categorizzate, più icone e modelli.

12. Stock Up
Cerca oltre 9.000 foto da 26 diversi siti web, tutte in un unico posto.

13. Death to the Stock Photo
Entra nella loro mailing list e ricevi i loro pacchetti di foto gratis nella tua casella di posta una volta al mese.

14. Little Visuals
Se ti iscrivi alla loro lista, riceverai 7 foto gratis ad alta risoluzione via email una volta alla settimana.

15. New Old Stock
Ottieni gratis foto vintage da archivi pubblici.

16. Cupcake
Foto gratis ad alta risoluzione di Jonas Nilsson Lee.

17. Pexels
10 nuove foto stock gratis ogni giorno.

18. Magdeleine
1 foto gratis ad alta risoluzione al giorno.

19. SplitShire
Foto stock gratuite di alta qualità di un fotografo italiano.

20. ISO Republic
Foto stock di alta qualità commercializzate ai creativi.

21. Paul Jarvis
Sign up to get 20 of Paul Jarvis’s top photos for free.

(back to top)

Symbols + Icons

Cercando simboli o icone da usare sul tuo sito web? Non cercare oltre.

22. Pixeden
Tonnellate di set di icone gratuite, tra cui icone meteo, icone sociali, icone di linea e molte altre.

23. Iconmonstr
Più di 2800 icone dalla grafica audace in diversi stili.

24. Icona Capitano
Oltre 350 icone vettoriali gratuite per disegni mobili e web.

25. Linear Icons
Un font di icone con 170 icone diverse tra cui scegliere.

26. Font Awesome
Un font di simboli che ti permette di aggiungere simboli ai tuoi siti web.

27. Fontello
Genera pacchetti di font di icone.

28. flaticon
Scarica icone vettoriali o includi icone come webfonts.

29. The Noun Project
Cerca un nome, ottieni un simbolo o un’icona gratis.

30. Endless Icons
Libreria di icone gratis.

31. Icone perfette
Personalizza e ottimizza le icone dei social media per il tuo sito.

32. iconSweets
60 icone vettoriali gratis di Photoshop.

33. Icone rotonde
Bundle di icone gratuite eccentriche e professionali.

(back to top)

Fonts

I fonts sono una parte così cruciale del design che può essere facile da trascurare. Guarda qui invece, e trova i font per portare il tuo design al livello successivo.

34. Google Webfonts
Aggiungi font al tuo sito web in pochi click.

35. typegenius
Generatore di abbinamenti di font.

36. Font Squirrel
Centinaia di font totalmente gratuiti.

37. Beautiful Web Type
Guarda una collezione curata dei più bei Google Webfonts.

38. Lost Type
Fonts a pagamento.

(back to top)

Colors

Hai bisogno di aiuto per scegliere i colori migliori per il tuo design? Questi strumenti di colore sono al tuo servizio.

39. Material UI
Una galleria di colori di Material Design e flat design da usare nei tuoi progetti.

40. Paletton
Inizia con qualsiasi colore e ottieni una tavolozza (con 5 sfumature per colore) basata su alcuni schemi di colori diversi: monocromatico, adiacente, triade, tetrade o personalizzato.

41. Design Seeds
Tonnellate di grandi palette di colori prese da fotografie. Puoi cercare per parola chiave o per colori simili.

42. Adobe Color Wheel
Scegliete tra diversi tipi di abbinamenti di colori e salvate le vostre tavolozze di colori.

43. Material Palette
Genera una tavolozza di colori basata su 2 colori.

44. Flat UI Color Picker
Il nome dice tutto.

45. Flat UI Colors
Idemenziale.

46. Bootflat
Color picker piatto.

47. Coolors
Generatore di palette di colori.

48. Skala Color
Scaricamento gratuito di selezionatori di colori.

49. BrandColors
Controlla i colori esatti che usano le grandi marche.

50. Da 0 a 255
Trova la perfetta variazione di colore che stai cercando.

51. Colour Lovers
Sfoglia le palette di colori degli utenti e aggiungi le tue alla comunità.

52. Palette for Chrome
Genera tavolozze di colori basate su immagini.

(back to top)

Sfondi + Textures

Foto, font e colori non sono la fine di un design – hai anche bisogno di sfondi e texture per tenerli insieme. Trova il tuo con questi strumenti.

53. Pattern8
Tonnellate di motivi ripetitivi divertenti, audaci e luminosi tra cui scegliere.

54. Repeat-X Repeat-Y
Magari modelli ripetitivi da tutto il mondo.

55. Texture King
Tutte le texture che puoi desiderare: grunge, ruggine, intonaco, cemento, sporcizia, e molte altre.

56. Patternico
Crea i tuoi modelli usando le icone di Font Awesome. Personalizza il colore dello sfondo, la dimensione della tela e la trasparenza della forma.

57. Subtle Patterns
Modelli scaricabili gratuitamente.

58. Lost and Taken
Tessiture gratuite in un sacco di categorie, tra cui cartone, pietra, metallo, bolle, senza soluzione di continuità e altro ancora.

59. BG Patterns
Crea modelli senza soluzione di continuità con colori personalizzabili, forme e altro.

(back to top)

UI (User Interface) Kits/Guides

Il web design è più che semplice attrazione visiva. Il modo in cui l’interfaccia utente di un sito “si sente” per l’utente è anche un fattore critico. Questi strumenti ti aiuteranno ad assicurarti che il tuo design dell’interfaccia utente sia perfetto.

60. 55+ Elements Free UI Kit
Un kit UI pulito e moderno. Assicurati di cercare sul sito Behance per tonnellate di grandi risorse da altri designer!

61. Oh no, non un altro UI Kit
Un semplice, piatto, open source mobile e web UI kit che viene fornito come file PSD.

62. PSD Booster Freebies
Tonnellate di fantastici Photoshop freebies, inclusi UI kit, temi e altro.

63. Material Design Guidelines
La guida ufficiale agli standard del Material Design di Google.

(back to top)

Risorse per lo sviluppo web

Dopo che un sito web è stato progettato, deve essere sviluppato! Sia che tu stia lavorando su entrambi i lati del processo (progettando e costruendo un sito), o costruendo un sito basato sul design di qualcun altro, questi strumenti di sviluppo ti aiuteranno a rendere quel design una realtà virtuale.

(back to top)

Motori di ricerca per nomi di dominio

I nomi di dominio sono il cuore di un sito web, sono l’indirizzo diretto dove gli utenti possono trovare il tuo sito online. Ma internet è un posto affollato, e può essere difficile trovare il nome di dominio esatto che vuoi. Questi strumenti ti aiuteranno a scoprire se un nome che vuoi è disponibile, e a crearne uno che lo è se la tua prima scelta non lo è.

64. Namemesh
Un potente motore di ricerca di nomi di dominio che ti aiuta a trovare domini che sono brevi, divertenti, comuni, simili, e vari altri qualificatori.

65. Nameboy
Inserisci una o due parole chiave e ottieni una lista di domini disponibili che le incorporano.

66. Panabee
Descrivi ciò che vuoi in due parole e Panabee genererà una lista di potenziali nomi di dominio.

67. Impossibility
Genera nomi di dominio casuali basati su una parola.

68. LeanDomainSearch
Cerca un nome di dominio per parola chiave.

(back to top)

Frameworks, Templates, Code Packs, + Themes

A volte avrai bisogno di codificare ogni parte di un sito web da zero-ma a volte no. Ecco una lista di frameworks, template, code packs e temi che puoi usare per ridurre il lavoro pesante.

69. WP-Flex
Un boilerplate vuoto e reattivo per temi WordPress che segue le migliori pratiche e i requisiti ufficiali del Codex di WordPress.

70. Foundation
Un framework responsive avanzato che è uno dei più popolari là fuori.

71. Ionic
Crea applicazioni mobili usando le tecnologie web che conosci e ami.

72. Initializr
Genera velocemente un template basato su HTML5 Boilerplate.

73. Materialize
Un framework moderno e reattivo basato sulle specifiche Material Design di Google.

74. WordPress Plugin Boilerplate
Se volete creare plugin per WordPress, il Plugin Boilerplate è un punto di partenza standardizzato e orientato agli oggetti.

75. Front-end Boilerplate
Un punto di partenza di base per creare i tuoi siti web in modo da non dover ricreare tutto da zero ogni volta.

76. HTML5 Boilerplate
Il primo e il migliore. Codice HTML5 boilerplate gratuito.

77. HTML5 UP
Modello HTML5 gratuito completamente reattivo.

78. 1 Line CSS Grid Framework
Un framework per CSS lungo solo 1 linea!

79. 960 Grid System
Un favorito di Skillcrush.

80. Starkers for WordPress
Un template di base per sviluppare il tuo primo tema WordPress.

81. Barebones for WordPress
Modello WordPress gratuito per sviluppatori.

82. Underscores
Modello WordPress per costruire un tema nuovo di zecca.

83. Sage for WordPress
Un tema WordPress starter basato su HTML5 boilerplate e Bootstrap.

84. Whiteboard for WordPress
Un tema WordPress pulito e di base per gli sviluppatori.

85. Bootstrap
Un framework HTML, CSS e JS reattivo.

86. Bootswatch
Temi gratuiti per Bootstrap.

(back to top)

Guide allo stile del codice

Non puoi iniziare a codificare senza imparare le abilità di base, ma una volta che hai queste abilità inchiodate è il momento di imparare come codificare ad arte. Queste guide ti insegneranno le migliori pratiche di codifica che eleveranno il tuo lavoro oltre il livello base.

87. Web Field Manual
Una raccolta di risorse, migliori pratiche, ispirazione e materiali di riferimento per la codifica moderna. Ci sono anche sezioni piene di strumenti e risorse aggiuntive e informazioni specifiche sulla lingua.

88. Google Developers Web Fundamentals
Una risorsa completa per le migliori pratiche di sviluppo web, direttamente da Google. Perfetto sia per i nuovi sviluppatori che per quelli che vogliono migliorare i loro progetti.

89. Deployments Best Practices
Prima di distribuire un sito web o un’applicazione, assicurati di controllare queste migliori pratiche per assicurarti che tutto vada bene.

90. GitHub
La guida allo stile del codice di GitHub.

91. Google
La guida allo stile del codice di Google.

92. Mozilla
Una guida allo stile del codice dai professionisti di Mozilla.

(back to top)

Code Validation

Hai finito con quel sito web? Non così in fretta. Prima di segnare il progetto “fatto”, usa questi strumenti per chiudere le questioni in sospeso nel tuo codice e controlla se stai rispettando gli standard di accessibilità, stile e le migliori pratiche del settore.

93. w3.org

94. Web Design Group HTML Validator

95. Validome

96. Validator.nu

97. Code Beautify

98. JSLint

99. Free Formatter

(back to top)

Sei pronto a combinare questi strumenti con le abilità che ti servono per fare soldi nella tecnologia? Controlla la nostra pagina dei programmi per trovare il corso Skillcrush Blueprint che fa per te. In soli tre mesi puoi essere qualificato per iniziare a lavorare sul web.