7 estensioni di Chrome indispensabili per i web designer

• Creativo

Annuncio pubblicitario

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 che probabilmente non sai di aver bisogno.

Sblocca subito il cheat sheet "Scorciatoie da tastiera di Google Chrome"!

Questo ti iscriverà alla nostra newsletter

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 è iniziato come un servizio di hosting di file, ma ha presto scoperto che il suo pubblico principale è rappresentato dai 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ù 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 riceve 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.

Installa: Dropbox per Gmail

2. FontFace Ninja

Con migliaia di caratteri disponibili, le possibilità di tipografia sono infinite. Soprattutto se riesci a identificare un bel carattere 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 gli strumenti che trovano i caratteri delle immagini WhatTheFont e 4 alternative per trovare i caratteri dalle immagini WhatTheFont e 4 alternative per trovare i caratteri dalle immagini Vuoi trovare i caratteri dalle immagini? Ci sono strumenti online che possono farlo per te, tra cui WhatTheFont e varie alternative. Leggi di più 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 del testo del corpo.

Quando avvii FontFace Ninja, ti mostrerà le informazioni sul font 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 affiliato, FontFace Dojo.

Installa: FontFace Ninja

3. Contagocce ColorPick

Non importa quanto tu abbia un occhio per il colore, è 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 il contagocce ColorPick.

Come le migliori app di selezione dei colori per Mac Le 5 migliori app di selezione dei colori per Mac Le 5 migliori app di selezione dei colori per Mac Hai bisogno di trovare il colore perfetto sul tuo Mac? Prova queste app di selezione dei colori macOS per identificare, salvare, formattare e copiare facilmente i colori. Per saperne di più, ColorPick Eyedropper ti mostrerà i valori per qualsiasi colore che punti. La differenza è che è sempre presente nel tuo browser e non devi caricare nulla, basta fare clic sull'icona e spostare l'obiettivo 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 acquisito un colore, mostra i valori HTML, RGB e HSL per esso.

Installa: ColorPick Eyedropper

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.

Dimensioni consente di misurare facilmente l'altezza e la larghezza di qualsiasi elemento della pagina, nonché i margini tra di essi. Ciò consente di ricreare facilmente le pagine esistenti e di ricontrollare i propri progetti 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 della pagina per ottenere informazioni complete su di esso, dalle dimensioni al nome del file. Le sottoschede Colori e Tipografia ti consentono di visualizzare la tavolozza dei colori e tutti i caratteri a colpo d'occhio, mentre Asset raccoglie tutte le immagini sulla pagina in un unico posto.

La scheda Collabora è dove puoi dare feedback e discutere 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 viene fornito con un prezzo: dovrai aggiungere $ 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 facile

Un'estensione per l'acquisizione di schermate può sembrare ridondante, dal momento che acquisire uno screenshot su Mac Come acquisire schermate su Mac: suggerimenti, strumenti e trucchi per sapere come acquisire schermate su Mac: suggerimenti, strumenti e trucchi da sapere È necessario acquisire uno screenshot su il tuo mac? Ecco le migliori scorciatoie, suggerimenti e app per gli screenshot di macOS. Leggere di più è un gioco da ragazzi e catturare lo schermo su Windows Come acquisire lo screenshot perfetto in Windows Come acquisire lo screenshot perfetto in Windows Il modo migliore per acquisire uno screenshot dipende dalla versione di Windows in uso. Ti mostriamo le sottili differenze, forniamo suggerimenti per la risoluzione dei problemi e riveliamo le migliori scorciatoie e strumenti da tastiera. Leggi di più è solo un po 'più di seccatura. Ma Easy Screen Capture ha molti punti di forza.

Ancora più importante, ti permette 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 richiederebbe da tre a quattro schermate.

Un altro trucco è riuscire a copiare lo screenshot negli appunti e incollarlo direttamente in una chat o e-mail, piuttosto che accumulare file di immagini inutili sul tuo computer.

Installa: Easy Screen Capture

7. Muzli 2

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

Muzli sostituisce la 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. Molta ispirazione per scorrere mentre sorseggi il tuo primo caffè!

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

Installa: Muzli 2

Ottieni estensioni di Chrome per tutte le attività di progettazione

Le estensioni di Chrome in questo elenco non corrispondono al tuo software di progettazione, ma coprono tutte le piccole cose che derivano dall'essere un designer, che si tratti di informazioni sulla tipografia o della collaborazione con i tuoi colleghi.

Quando ti rendi conto che il Chrome Web Store è pieno di strumenti, può essere difficile smettere di aggiungerne di nuovi. Quindi scopri come gestire le estensioni di Chrome Come gestire le estensioni di Chrome senza alcun problema Come gestire le tue estensioni di Chrome senza alcun problema La corretta gestione delle estensioni di Chrome può rendere il tuo browser ancora più potente. Ecco alcuni suggerimenti e trucchi essenziali che dovresti conoscere. Leggi di più prima che sfuggano di mano.

Ulteriori informazioni su: Estensioni del browser, Google Chrome, Web design.