Estensioni per il web designer

In questo articolo voglio suggerirti alcune estensioni per Google Chrome, che ho personalmente testato durante lo sviluppo di siti web e trovo davvero utili.

1. Grid Ruler


Hai presente le utilissime guide di Photoshop o Illustrator? Grazie a questa estensione puoi utilizzare le guide anche durante lo sviluppo del tuo sito, misurando la dimensione e la distanza degli elementi.
Trovo molto utile questa estensione soprattutto per verificare velocemente l’allineamento degli elementi durante lo sviluppo del CSS.

Vai al sito

2. ColorZilla


Un’ottima estensione per verificare i colori utilizzati in un sito web. Puoi utilizzarla anche come semplice contagocce. Cliccando sull’elemento della pagina con il colore desiderato, il contagocce copia automaticamente il colore con il relativo valore esadecimale, così potrai incollarlo facilmente in Illustrator, Photoshop o nel tuo codice CSS.
ColorZilla ti consente anche di analizzare tutti i colori utilizzati nella pagina web con un’apposita funzione e generare facilmente gradienti.

Vai al sito

3. Page Ruler


Uno strumento utilissimo per misurare la dimensione degli elementi presenti in una pagina web.
Puoi tracciare liberamente l’area che desideri misurare, oppure affidarti alla modalità di tracciamento, che seleziona l’intera estensione dell’elemento passando semplicemente sopra il cursore del mouse.

Vai al sito

4. Grayscale


Sai bene quanto è importante in un layout grafico il contrasto. Un buon design è impattante anche in scala di grigi ed è proprio quello che è possibile verificare con questa estensione. Attivandola converte infatti l’intero layout del tuo sito in scala di grigi, consentendoti di analizzare facilmente i contrasti e la qualità del tuo lavoro.

Vai al sito

5. FontFace Ninja


Un autentico spettacolo. Sarà perché noi grafici abbiamo un debole per i font, ma quando ho utilizzato per la prima volta questa estensione ho provato un forte senso di emozione… e continuo a provarlo .
Basta un click sull’estensione per vedere la lista dei font utilizzati all’interno della pagina web ed è possibile scaricarli velocemente cliccando sull’apposito pulsante posto accanto a ciascuna voce. Se lo provi il lunedì ti cambia la giornata.

Vai al sito

6. Web Developer


Un’estensione estremamente utile e completa. Offre una serie di strumenti di analisi, come la possibilità di disattivare il JavaScript, i Plugins, visualizzare l’elenco e le informazioni relative ai Cookies utilizzati, editare il CSS, disabilitare gli stili, ricaricare i fogli di stile, analizzare i Form, le immagini, visualizzare le classi, gli id, i links e gli ancoraggi della pagina, la struttura dei div e le informazioni di specifici elementi selezionati e molto altro.

Vai al sito

7. CSSViewer


Questa estensione ti consente di visualizzare immediatamente tutte le regole CSS applicate all’elemento sul quale stai passando il cursore del mouse. Le informazioni sono ordinate in sezioni come: Font & Text, Color & Background, Box, Positioning, Effects.
Puoi anche fissare la finestra con le regole CSS dell’elemento selezionato o copiare l’intero codice CSS relativo a quell’elemento.

Vai al sito

8. FireShot – Capture page


Grazie a questa estensione puoi comodamente scaricare l’intero layout della pagina web sotto forma di immagine, oppure catturare solo delle parti di essa.
Una volta eseguito il comando, verrai indirizzato su una nuova scheda, dove potrai scegliere le impostazioni per il salvataggio dell’immagine.

Vai al sito

Queste sono le estensioni che trovo più utili e funzionali per realizzare, analizzare e testare un sito web durante il suo sviluppo. Risultano anche molto comode durante l’analisi della concorrenza e la ricerca di ispirazione. Ti consiglio di provarle e vedrai che non potrai più farne a meno!

Conosci altre estensioni utili? Faccelo sapere commentando questo articolo.
Alla prossima!

Questo articolo ti è piaciuto? Condividilo con i tuoi amici!

Commenti

Il tuo giudizio è importante! Commenta qui sotto.

Articolo molto interessante

Ivo Galliano - 10 maggio 2018

Grazie Ivo :)

Gabriele Natussi - 10 maggio 2018

Iscriviti alla newsletter

Ho letto e accetto l'informativa sulla privacy.

Icona caricamento

. . .