10 estensioni di Google Chrome per i designer

Se sei un web designer che segue il processo di progettazione standard, le tue attività includono cose come:

• Ricerca
• Wireframe
• Scelta di una combinazione di colori
• Scegliere il carattere giusto
• Testare diverse varianti
• Collaborazione con clienti e compagni di squadra

E ancora un po'...

Sai che puoi fare tutto questo e altro direttamente dal tuo browser? Sì, se sei un Google Chrome Pro, puoi svolgere tutte queste attività tramite le estensioni di Chrome. La maggior parte di loro con solo un paio di clic.

Quindi, risparmia un sacco di tempo e prova queste 10 estensioni di Google Chrome per i designer.

1. Tester di web design reattivo

Pubblica l'aggiornamento ottimizzato per dispositivi mobili di Google, reattività è la parola d'ordine! Quindi, ecco un'estensione che ti consente di testare il tuo sito Web su tutti i principali dispositivi mobili Android e Apple.

Funziona anche offline, quindi è un'ottima opzione anche mentre lavori al tuo progetto in locale. Ha preimpostazioni per tutti i dispositivi più diffusi, ma puoi anche aggiungere le tue dimensioni personalizzate.

Dopo aver selezionato un dispositivo per l'anteprima, la scheda corrente si apre in una finestra popup che mostra come apparirà la tua pagina su quel dispositivo.

2. Digita Meraviglia

I caratteri creano davvero l'atmosfera di un sito, ma è piuttosto un compito scegliere quello giusto. Conosci il trapano: tornare al codice, apportare modifiche e visualizzare l'anteprima. E tutto questo ancora e ancora.

Ma è qui che interviene questa pratica estensione del carattere. TypeWonder ti consente di cambiare il carattere di qualsiasi sito Web nel tuo browser.

Basta visitare il tuo sito Web e fare clic sull'icona dell'estensione. Ti vengono fornite diverse opzioni di carattere. Facendo clic su uno qualsiasi viene creata quasi istantaneamente un'anteprima del tuo sito Web in quel tipo di carattere. Se sei soddisfatto dell'anteprima, puoi ottenere il codice pertinente da aggiungere al tuo sito e il relativo file CSS.

3. Scheda Packager

La ricerca è un grosso problema. E se sei un designer che prende sul serio la ricerca, posso tranquillamente dire che in qualsiasi momento hai almeno da sette a dieci schede aperte.

E se dovessi ottenere l'opinione del tuo amico designer o compagno di squadra sui siti a cui ti riferisci? Metterai tra i preferiti tutte le pagine in una cartella, le esporterai tutte e poi sceglierai il set da inviare, ovviamente, dopo aver aperto il tuo programma di posta. Un bel po' di lavoro!

Fortunatamente, non devi lavorare così duramente. Tab Packager ti consente di impacchettare tutte le schede aperte. E poi puoi inviare attraverso il link del pacchetto con un solo clic. Puoi condividere via e-mail, Twitter e molti altri servizi.

4. TrackDuck

Una comunicazione efficace è alla base di ogni progetto di successo. Ma può essere faticoso andare avanti e indietro con le e-mail cercando di elaborare piccole modifiche o apportare grandi cambiamenti.

Ora questo potrebbe sembrare un po' esagerato, ma TrackDuck è come una mini-Asana, esclusivamente per i designer.

TrackDuck è uno strumento di collaborazione visiva che ti consente di aggiungere siti Web come progetti. Dopo aver aggiunto un progetto, puoi invitare i tuoi compagni di squadra ad esso. Ogni volta che lasci un commento su questo progetto (o sito Web, cosa che puoi fare semplicemente facendo clic sull'icona dell'estensione), viene generata un'attività sul commento. Puoi assegnare questa attività ai tuoi compagni di squadra, aggiungere allegati e schermate e integrarla con molti strumenti di collaborazione come Trello e Basecamp.

5. ColorZilla

Non sai mai quando vedrai un bel colore che ispirerà la tavolozza del tuo prossimo progetto web.

Quindi, come catturi qualsiasi colore sul web?

Bene, ecco ColorZilla: è facilmente il gadget Chrome preferito di ogni designer. La sua caratteristica più semplice e popolare è ottenere il codice per qualsiasi colore su una pagina web.

Un'altra caratteristica è che ti consente di ottenere la combinazione di colori di qualsiasi sito web. Dovrai fare clic sull'opzione Analizzatore colore pagina web e apparirà una tavolozza che mostra tutti i colori su quella pagina web.

6. WhatFont

Ci sono così tante volte in cui ti imbatti in un sito Web che utilizza il carattere, il colore e le dimensioni perfetti. In effetti, potrebbe essere così utile che tu voglia utilizzare la combinazione esatta sul tuo sito.

Ma non devi più seguire il percorso Inspect Element: WhatFont analizza qualsiasi carattere su una pagina Web con un solo clic.

Basta fare clic sull'icona dell'estensione e passare il mouse sulla sezione di testo che ti interessa. WhatFont produce il tipo di carattere, la dimensione, l'altezza, il colore e la famiglia.

7. Wireframe istantaneo

Se definisci la gerarchia delle informazioni del tuo sito web prima di progettarlo, creerai un sito facile da usare. E il wireframing è il modo migliore per farlo.

L'estensione Instant Wireframe ti consente di visualizzare un wireframe ragionevolmente buono di qualsiasi pagina web. È ancora in versione beta ma fa un buon lavoro.

Se ti imbatti in un sito di cui desideri visualizzare il wireframe, fai clic sull'icona dell'estensione nella barra degli indirizzi. Vale la pena provare!

8. Righello di pagina

Ci sono alcuni modi in cui puoi misurare le dimensioni degli elementi di una pagina web. Ma la maggior parte di essi comporta diversi passaggi e richiede tempo.

Page Ruler è il modo più pratico per farlo. Page Ruler ti consente di vedere l'altezza, la larghezza e la posizione relativa di un elemento. Puoi anche analizzare gli elementi in base al div.

Ed è eccellente per creare banner pixel perfect, immagini in primo piano e altri materiali di marketing.

9. Tavolozza per Chrome

I siti Web sono pieni di immagini e non puoi dire quando vedrai un'immagine abbastanza buona da ispirare una tavolozza di colori.

Ma non devi preoccuparti perché Palette per Chrome ti copre, sempre. Fai clic con il pulsante destro del mouse sull'immagine che ritieni interessante e scegli l'opzione di questa estensione. Creerà istantaneamente una tavolozza di colori ispirata all'immagine scelta. Puoi specificare il numero di colori che desideri generare per la combinazione di colori.

Mi sarebbe piaciuto di più se ci fosse stato un modo per esportare la combinazione di colori. Ma l'estensione è ancora un must.

10. ExtensionMuzli – Colazione di design

Sai, quando sei solo all'inizio, ti iscrivi a tutti i migliori blog nella tua nicchia. I tuoi feed RSS sono tutti accesi. Ma man mano che il tuo lavoro si accumula, ti disconnetti in qualche modo. E non è che non hai bisogno di ispirazione, è solo che diventa difficile recuperare il ritardo.

ExtensionMuzli è stato creato per compensare questo. Cura le storie di circa 12-15 delle principali risorse di design. C'è anche una sezione di lavori di web design se stai cercando di cambiare.

Una volta installata questa estensione, la tua nuova scheda conterrà alcune delle ultime storie di design ispiratore o educativo da tutta la rete. Offre un modo accurato per tenere d'occhio le ultime novità all'interno della tua nicchia.

Quindi, ecco qua. Potenzia il tuo Chrome con queste straordinarie estensioni per web designer e guarda la tua produttività salire alle stelle. Come interrompi il tuo processo di progettazione e quali estensioni usi per quali attività? Mi piacerebbe saperne di più.