7 Estensioni Chrome indispensabili per i web designer

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

La cosa migliore è che non devi nemmeno scaricarli, basta installare queste estensioni di Chrome e via. 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 è iniziato come servizio di file hosting, ma presto ha scoperto che il suo pubblico più importante 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 di posta elettronica, è più facile inviare un collegamento Dropbox al file.

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

Installa: Dropbox per Gmail

2. FontFace Ninja

Con migliaia di tipi di carattere disponibili, le tue possibilità di tipografia sono infinite. Soprattutto se riesci a 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 farlo. Molto simile agli 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 dei titoli e del testo del corpo.

Quando avvii FontFace Ninja, ti mostrerà le informazioni sul tipo di carattere a cui lo dirigi e non solo il carattere, ma anche il peso, la dimensione, l'altezza, la larghezza e il colore. Per aggiungere un segnalibro a quel tipo di carattere, è necessario un account presso il servizio affiliato , FontFace Dojo .

Installa: FontFace Ninja

3. ColorPick Eyedropper

Non importa quanto sia bello il colore che hai, è difficile ricreare una sfumatura particolare che hai visto online a meno che tu non conosca i suoi valori RGB o HTML. Fortunatamente, non devi indovinare se hai ColorPick Eyedropper.

Come le migliori app per Color Picker 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 le pubblicità). Una volta catturato un colore, mostra i valori HTML, RGB e HSL per esso.

Installa: ColorPick Eyedropper

4. Dimensioni

Questa estensione open-source è una ricerca per i web designer, specialmente se si fanno concerti occasionali per le piccole imprese. Quando un cliente ti consegna un sito web senza alcun file o documentazione precedente e ti chiede di progettare "una pagina come questa, ma con testo e immagini diversi", capire il layout è un problema.

Le dimensioni ti consentono di misurare facilmente l'altezza e la larghezza di qualsiasi elemento sulla pagina, nonché i margini tra di esse. In questo modo è facile ricreare le pagine esistenti e ricontrollare i propri disegni dopo che sono entrati in produzione.

Installa: dimensioni

5. Visual Inspector

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ù.

Nella scheda Ispeziona , puoi selezionare qualsiasi elemento sulla pagina per ottenere informazioni complete su di esso, dalle dimensioni al nome del file. Le sottoschede Colori e Tipografia consentono di visualizzare la tavolozza dei colori e tutti i tipi di carattere a colpo d'occhio, mentre le risorse raccolgono tutte le immagini sulla pagina in un unico punto.

La scheda Collabora è dove puoi fornire feedback e discussioni con il tuo team, ed è facile lasciare un commento facendo clic su qualsiasi elemento della pagina.

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

Installa: Visual Inspector

6. Cattura schermo semplice

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ù compli
cato. Ma Easy Screen Capture ha parecchi punti di forza.

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

Un altro trucco è la possibilità di copiare lo screenshot negli appunti e incollarlo direttamente in una chat o in una e-mail, invece di accumulare file di immagini inutili sul computer.

Installa: Easy Screen Capture

7. Muzli 2

Infine, c'è un compito cruciale che devi affrontare ogni mattina: scuotere i resti del sonno e entrare nel solco. Muzli 2 di InVision sarà il tuo giornale del mattino 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 che vanno da Dribble e Behance a 99designs e Creative Bloq. Un sacco di ispirazione per 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 sostituirà la scheda predefinita e sarai in grado di accedere al feed in qualsiasi momento semplicemente facendo clic sull'icona dell'estensione.

Installa: Muzli 2

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

Le estensioni di Chrome su questo elenco non sono compatibili con il tuo software di progettazione, ma coprono tutte le piccole cose che derivano dal fatto di essere un designer, che si tratti di tipografia o collaborazione con i tuoi colleghi.

Una volta compreso che il Chrome Web Store è ricco di strumenti, può essere difficile smettere di aggiungerne di nuovi. Quindi, scopri come gestire le estensioni di Chrome prima che sfuggano di mano.

Leggi l'articolo completo: 7 Estensioni Chrome indispensabili per i web designer

Fonte: Utilizzare