7 estensioni Chrome indispensabili per i web designer

7 estensioni Chrome indispensabili per i web designer

Come web designer, qual è il software che devi assolutamente avere sul tuo computer? È probabile che sia Photoshop e Illustrator. E mentre questi sono gli elementi essenziali del tuo flusso di lavoro di progettazione, ci sono strumenti più piccoli di cui probabilmente non sai di aver bisogno.





La cosa migliore è che non devi nemmeno scaricarli --- basta installare queste estensioni di Chrome e il gioco è fatto. Dall'identificazione dei caratteri sulle pagine alla misurazione delle distanze tra gli elementi web, queste estensioni di Chrome per il web design ti semplificheranno la vita.





1. Dropbox per Gmail

Dropbox è nato come servizio di file hosting, ma ha presto scoperto che il suo pubblico principale sono i designer, che utilizzano il servizio per condividere il proprio lavoro con i colleghi. Poiché i file di progettazione sono spesso troppo grandi per gli allegati e-mail, è più semplice inviare un collegamento Dropbox al file.





Dropbox per Gmail rende il processo ancora più conveniente. Quando ti colleghi al tuo file utilizzando un pulsante Dropbox nella parte inferiore della nuova finestra e-mail, il destinatario ottiene un'anteprima di ciò che stai inviando. I collegamenti ai file di immagine caricheranno le immagini direttamente nell'e-mail e i collegamenti ad altri tipi di file genereranno una comoda anteprima.

Installare: Dropbox per Gmail



2. FontFace Ninja

Con migliaia di caratteri disponibili, le tue possibilità di tipografia sono infinite. Soprattutto se puoi identificare un bel font che vedi da qualche parte e prenderlo in prestito per il tuo progetto.

FontFace Ninja è un'estensione di Chrome che ti aiuta a fare proprio questo. Proprio come il strumenti che trovano i caratteri dalle immagini ti aiuta a identificare i caratteri che vedi online. L'unica differenza è che FontFace Ninja legge i caratteri codificati nel CSS della pagina, come il carattere tipografico delle intestazioni e il testo del corpo.





Quando avvii FontFace Ninja, ti mostrerà le informazioni sul carattere a cui lo indirizzi --- e non solo il carattere tipografico, ma anche il peso, le dimensioni, l'altezza, la larghezza e il colore. Per aggiungere quel carattere ai segnalibri, avrai bisogno di un account presso il servizio gemello, FontFace Dojo .

Installare: FontFace Ninja





3. Contagocce ColorPick

Non importa quanto tu abbia un buon occhio per il colore, è difficile ricreare una particolare sfumatura che hai visto online se non conosci i suoi valori RGB o HTML. Fortunatamente, non devi indovinare se hai ColorPick Eyedropper.

Piace le migliori app per la selezione dei colori per Mac , ColorPick Eyedropper ti mostrerà i valori per qualsiasi colore a cui punti. La differenza è che è sempre presente nel tuo browser e non devi caricare nulla, basta fare clic sull'icona e spostare il target nel punto giusto.

L'estensione legge i colori da testo, immagini e praticamente qualsiasi cosa tu possa vedere su una pagina web (anche gli annunci). Una volta catturato un colore, ti mostra i valori HTML, RGB e HSL per esso.

Installare: Contagocce ColorPick

4. Dimensioni

Questa estensione open source è una scoperta per i web designer, soprattutto se fai concerti una tantum per le piccole imprese. Quando un cliente ti consegna un sito Web senza file o documentazione precedenti e ti chiede di progettare 'una pagina come questa, ma con testo e immagini diversi', capire il layout è una seccatura.

installa Play Store sul tablet Fire

Le dimensioni ti consentono di misurare facilmente l'altezza e la larghezza di qualsiasi elemento sulla pagina, nonché i margini tra di essi. Ciò rende facile ricreare le pagine esistenti e ricontrollare i propri progetti dopo che sono entrati in produzione.

Installare: Dimensioni

5. Ispettore visivo

Visual Inspector è un potente strumento di feedback e collaborazione per i team di progettazione, che combina le funzionalità delle tre estensioni precedenti e ne aggiunge ancora di più.

Nel Ispezionare scheda, puoi selezionare qualsiasi elemento della pagina per ottenere informazioni complete su di esso, dalle dimensioni al nome del file. Il Colori e Tipografia le sottoschede ti consentono di vedere la tavolozza dei colori e tutti i caratteri a colpo d'occhio, mentre Risorse raccoglie tutte le immagini sulla pagina in un unico posto.

Il Collaborare scheda è dove puoi dare feedback e discutere con il tuo team, ed è facile lasciare un commento facendo clic su qualsiasi elemento della pagina.

come rimuovere la modalità provvisoria in Android

Come la maggior parte degli strumenti avanzati, Visual Inspector viene fornito con un cartellino del prezzo: dovrai pagare da $ 9 per utente al mese per aggiungere commenti e sincronizzare le modifiche. Tuttavia, le sue funzionalità di base come l'ispezione di colori, caratteri e immagini sono gratuite.

Installare: Ispettore visivo

6. Acquisizione facile dello schermo

Un'estensione per la cattura dello schermo può sembrare ridondante, dal momento che fare uno screenshot su Mac è un gioco da ragazzi e catturare lo schermo su Windows è solo un po' più di fastidio. Ma Easy Screen Capture ha alcuni punti a favore.

Ancora più importante, ti consente di catturare l'intera pagina web, non solo l'area che vedi sullo schermo. Non ha prezzo quando devi segnalare diversi problemi su una pagina lunga e catturarli tutti richiederebbe da tre a quattro schermate.

Un altro bel trucco è essere in grado di copiare lo screenshot negli appunti e incollarlo direttamente in una chat o in un'e-mail, piuttosto che accumulare inutili file di immagine sul tuo computer.

Installare: Acquisizione facile dello schermo

7. Ghiacciato 2

Infine, c'è un compito cruciale che devi affrontare ogni mattina: scrollarti di dosso i resti del sonno e entrare nel ritmo. Muzli 2 di InVision sarà il tuo quotidiano mattutino con articoli curati su arte, design, UX e tecnologia.

Muzli sostituisce la tua scheda Chrome predefinita e ti consente di personalizzare ciò che vedi lì. A seconda dei tuoi interessi, Muzli sceglierà i feed per te, con siti Web che vanno da Dribble e Behance a 99designs e Creative Bloq. Tanta ispirazione da scorrere mentre sorseggi il tuo primo caffè!

Se pensi che un'intera scheda del browser piena di contenuti di design sia troppo intensa, Muzli ha anche una versione Lite. Non sovrascriverà la tua scheda predefinita e sarai in grado di accedere al feed quando vuoi semplicemente facendo clic sull'icona dell'estensione.

Installare: Ghiacciato 2

Ottieni estensioni di Chrome per tutte le tue attività di progettazione

Le estensioni di Chrome in questo elenco non possono competere con il tuo software di progettazione, ma coprono tutte le piccole cose che derivano dall'essere un designer, che si tratti di informazioni tipografiche o di collaborare con i tuoi colleghi.

Una volta che ti rendi conto che il Chrome Web Store è pieno di strumenti, può essere difficile smettere di aggiungerne di nuovi. quindi impara come gestire le estensioni di Chrome prima che sfuggano di mano.

Condividere Condividere Tweet E-mail Vale la pena eseguire l'aggiornamento a Windows 11?

Windows è stato ridisegnato. Ma è abbastanza per convincerti a passare da Windows 10 a Windows 11?

Leggi Avanti
Argomenti correlati
  • Internet
  • Creativo
  • Google Chrome
  • Web design
  • Estensioni del browser
Circa l'autore Alice Kotlyarenko(28 articoli pubblicati)

Alice è una scrittrice di tecnologia con un debole per la tecnologia Apple. Scrive di Mac e iPhone da un po' di tempo ed è affascinata dai modi in cui la tecnologia rimodella la creatività, la cultura e i viaggi.

Altro da Alice Kotlyarenko

Iscriviti alla nostra Newsletter

Iscriviti alla nostra newsletter per suggerimenti tecnici, recensioni, ebook gratuiti e offerte esclusive!

Clicca qui per iscriverti