Google Chrome è il browser più utilizzato al mondo. Detiene una quota di mercato pari al 70% staccando di molto uno dei suoi competitor diretti: Mozilla Firefox. Le ragioni del suo successo sono molteplici, una tra le tante quella di poter installare dei piccoli “plugin” che ci permettono di estendere le funzionalità del browser e che prendono appunto il nome di estensioni.
Durante la progettazione di una pagina web, è bene avere a disposizione una serie di tool che possano aiutarci nel nostro lavoro. A tal proposito, esistono estensioni di Google Chrome dedicate a grafici ed UI/UX designers che ti aiuteranno a migliorare la tua produttività.
Le estensioni di Google Chrome sono un ottimo modo per estendere le funzionalità del browser e per accedere rapidamente a strumenti e risorse utili. In passato ti ho già mostrato alcune di queste utili per web developer ed altre per chi si occupa di SEO e copywriting, mentre oggi ti elencherò ben 10 estensioni di Chrome perfette per chi si occupa di grafica web, ma anche user interface ed user experience.
Indice dei contenuti
- Fonts Ninja
- Page Ruler
- ColorPick Eyeropper
- CSS Peeper
- Heurio – UX Check & Visual Feedback Tool
- UX Principles
- GoFullPage
- Responsive Web Design Tester
- Cookie Editor
- Lipsum Generator
- Conclusioni
Fonts Ninja
Quante volte ti sarà capitato di imbatterti in un carattere particolare all’interno di un sito web e chiederti quale font sia stato utilizzato. Per saperlo ti basta installare Fonts Ninja una pratica estensione che ti permetterà di conoscere il font utilizzato in qualsiasi testo presente sul web semplicemente passando sopra il mouse.
Page Ruler
Quanti pixel misura quel bottone o quanti pixel intercorrono tra un elemento della pagina ed un altro? Scoprirlo ti sarà molto semplice con l’aiuto di questa estensione che prende il nome di Page Ruler.
Ti basterà installarla con un semplice clic e sarai in grado di misurare ogni pixel del tuo schermo attraverso un comodo righello virtuale. Un modo facile per poter disegnare delle pagine pixel perfect in poche mosse.
ColorPick Eyedropper
Chi lavora con programmi di grafica sa benissimo l’importanza della funzione color picker che ti permette di conoscere rapidamente il codice esadecimale del colore utilizzato. E se ti dicessi che è possibile farlo anche sul web? Proprio così, ti basta installare questa estensione davvero utilissima che porta il nome di ColorPick Eyedropper.
Una volta installata, ti basta cliccare sulla sua icona per poi muoverti all’interno del browser e, mediante una piccola icona a forma di lente di ingrandimento, passare il mouse sull’area di cui vuoi conoscere l’esatta colorazione. L’estensione ti mostrerà immediatamente il codice colore e potrai riutilizzarlo come meglio credi. Io la trovo comodissima.
CSS Peeper
Hai bisogno di conoscere i CSS utilizzati per creare un determinato box di una pagina web, ma non sei in grado di farlo attraverso la developer tool di Chrome? Allora l’estensione che sto per presentarti farà decisamente al caso tuo. Si chiama CSS Peeper e ti permette di sapere, con un semplice clic, tutti gli stili utilizzati per la creazione di un qualsiasi elemento all’interno di una pagina web.
Utilizzarla è semplicissimo: attivala e seleziona l’elemento di tuo interesse. In pochi attimi apparirà un box con tutte le informazioni di cui necessiti: dagli stili utilizzati, fino alla dimensione esatta in pixel dell’elemento. Utile per velocizzare i tuoi processi produttivi.
Heurio – UX Check & Visual Feedback Tool
Un’altra estensione utilissima, soprattutto se si lavora all’interno di un team è Heurio – UX Check & Visual Feedback Tool. Heurio ti permette di avere a disposizione una vera e propria suite dove poterti confrontare con i tuoi colleghi circa la UX/UI di un sito web e non solo.
Con Heurio avrai infatti la possibilità di commentare e prendere appunti semplicemente cliccando sull’elemento della pagina di tuo interesse. Uno strumento che io trovo estremamente utile, quasi indispensabile durante la progettazione di una pagina web per ottenere rapidi Feedback.
UX Princples
A volte – durante il processo di creazione delle nostre interfacce web – abbiamo solo bisogno di prenderci una pausa e ricominciare dalle fondamenta di questo mestiere. Non trovi? Se sei d’accordo con me, allora amerai l’estensione che vado a presentarti adesso.
Si chiama UX Principles e, semplicemente, ti mostra dei consigli pratici ed efficaci per migliorare la tua vita lavorativa come UX Designer. Io la trovo semplicemente geniale e, molte volte, mi ha fornito delle vere perle di saggezza che ho fatto mie. Ti consiglio di provarla.
GoFullPage
Quante volte ti sarà capitato di voler fare lo screenshot di un’intera pagina web, per poi accorgerti di non essere in grado di farlo attraverso gli strumenti del Pc? Capita spesso infatti che la pagina abbia delle barre di scorrimento verticali e per mostrarla tutta sei costretto a fare degli orribili ritagli da incollare poi assieme per avere un quadro completo.
Da oggi potrai dire addio a tutto questo grazie a questa estensione – GoFullPage – che farà tutto il lavoro sporco per te. Con un semplice clic avrai la possibilità di catturare lo screenshot di tutta la pagina web e salvarlo sul tuo Pc come JPG, PNG o PDF. Un’estensione che io trovo davvero utilissima e che spesso utilizzo per mostrare ad altri ciò che sto realizzando in locale.
Responsive Web Design Tester
Come appare la nostra pagina web su Tablet? E su iPhone? Non sempre è possibile avere a disposizione gli “strumenti fisici” per saperlo. E qui entra in gioco Responsive Web Design Tester un’estensione che ci permette proprio di fare questo: testare la nostra pagina web su diversi dispositivi simultaneamente.
Un’estensione utile soprattutto in fase di test finale. Ti ricordo, infatti, che la developer tool di Google Chrome fornisce già gli strumenti per il testare le tue pagine responsive e non hai bisogno di ulteriori estensioni. Questa però può esserti utile se hai bisogno di fare test veloci oppure non sei in grado di utilizzare al meglio gli strumenti messi a disposizione dal browser di default.
Cookie Editor
Sono sicuro che – testando le tue pagine web – ti sarai ritrovato senz’altro a combattere con i cookie. Come appare una pagina da loggato o da semplice guest, come fare apparire quella determinata modale. Tutto è condizionato dai Cookie e molto spesso non è facile ed intuitivo modificarli dalla console degli sviluppatori.
Per fortuna puoi farlo in modo semplice e veloce con l’aiuto di questa estensione. Una volta installata sul tuo browser, ti mostrerà un comodo pannello dove sono elencati i cookies utilizzati dal sito web che stai navigando. Potrai così editarli rapidamente. Un’estensione che io trovo molto utile non solo per designer ma anche per developer.
Lipsum Generator
Capita spesso di avere bisogno di testi riempitivi da inserire all’interno delle nostre pagine web in modo tale da fornire una preview degli elementi anche in assenza di copy definitivi. In casi simili può tornarci d’aiuto l’estensione Lipsum Generator.
Lipsum Generator vi aiuta nella creazione di testi finti e riempitivi sfruttando la classica dicitura Lorem Ipsum conosciuta nel mondo della stampa e della grafica web. Vi basta selezionare il numero di paragrafi di cui avete bisogno e l’estensione provvederà a generarla per voi. Un modo rapido per creare degli ingombri reali all’interno dei vostri progetti.
Conclusioni
Come abbiamo avuto modo di vedere, le estensioni per Google Chrome possono essere uno strumento molto utile per i grafici e UI/UX designers, ma anche per sviluppatori web o esperti SEO: basta saperle conoscere ed utilizzarle nel migliore dei modi.
Esistono moltissime estensioni disponibili per Chrome che possono aiutare a ottimizzare il lavoro e a rendere il processo di design più efficiente. Tra quelle menzionate in questo articolo, alcune come ColorPick Eyedropper e Page Ruler possono essere particolarmente utili per la selezione dei colori e per la misurazione degli elementi sullo schermo, mentre altre come Fonts Ninja possono rendere più facile la scelta del tipo di carattere adeguato per il progetto.
In ogni caso, è sempre importante ricordare di utilizzare questi strumenti con moderazione e non appesantire troppo il browser con estensioni che possono rallentare il nostro lavoro. Ti consiglio quindi di sceglierle con cura ed evitare di utilizzare doppioni che di fatto svolgono lo stesso identico compito.
Se conosci altre estensioni per Chrome che ti aiutano nel lavoro di tutti i giorni, ti invito a segnalarmele. Sarò certamente felice di aggiungerle all’interno di questa lista.