10 estensioni di Chrome che ogni designer deve avere (2022)

Indice dei contenuti

Ciao in questo articolo descrivo le 10 Estensioni di Chrome che preferisco e considero importanti e necessarie per ogni designer.

Estensioni di Chrome per designer

1. Modalità oscura

Questa estensione è molto semplice e ogni designer dovrebbe provarla. L’estensione della modalità oscura offre un aspetto visivo diverso trasformando la pagina Web del tema chiaro nel tema scuro. A volte è difficile immaginare quanto saranno meravigliosi alcuni siti Web in modalità oscura. Quindi questo plugin crea la magia inversa che rende la modalità oscura della pagina web.

Link per scaricare l’estensione per la modalità oscura

https://cdn.embedly.com/widgets/media.html?src=https%3A%2F%2Fwww.youtube.com%2Fembed%2F-QmU-qxT8GY%3Ffeature%3Doembed&display_name=YouTube&url=https%3A%2F%2Fwww.youtube.com%2Fwatch%3Fv%3D-QmU-qxT8GY&image=https%3A%2F%2Fi.ytimg.com%2Fvi%2F-QmU-qxT8GY%2Fhqdefault.jpg&key=a19fcc184b9711e1b4764040d3dc5c07&type=text%2Fhtml&schema=youtubeDimostrazione della modalità oscura

2. Colore per fardos

Usando questa estensione puoi scegliere il colore da qualsiasi sito web. Potresti chiedere, non è una normale estensione per la selezione dei colori che ho già?
La risposta è no, una delle caratteristiche più interessanti di Color by fardos è che puoi digitare qualsiasi nome di colore e otterrai sfumature, tinte, tetradiche, triadiche, complementari e divise complementari di quel particolare colore.
È difficile cercare in un sito Web e conoscere le cose complementari e altre cose fondamentali del colore. Quindi uso questo plugin per risparmiare tempo.

Link per scaricare l’estensione Color by fardos

https://cdn.embedly.com/widgets/media.html?src=https%3A%2F%2Fwww.youtube.com%2Fembed%2FhObLx5shVg8%3Ffeature%3Doembed&display_name=YouTube&url=https%3A%2F%2Fwww.youtube.com%2Fwatch%3Fv%3DhObLx5shVg8&image=https%3A%2F%2Fi.ytimg.com%2Fvi%2FhObLx5shVg8%2Fhqdefault.jpg&key=a19fcc184b9711e1b4764040d3dc5c07&type=text%2Fhtml&schema=youtubeColor by fardos demo

3. Quale carattere

Questa è un’estensione simile a Fontsninja, questo plugin ti aiuta a trovare il nome della famiglia del carattere, la dimensione, l’altezza della linea, il colore e il peso del carattere utilizzato su una particolare pagina del sito web.

Link per scaricare l’estensione Whatfont

Estensione di Chrome per UI/UX

4. Heurio: strumento di controllo UX e feedback visivo

Questo strumento aiuterà la comunicazione tra designer e sviluppatore. Usando questa estensione puoi trasformare qualsiasi sito web in una tela e aggiungere le tue note che possono essere successivamente condivise con lo sviluppatore. Attraverso questa estensione, quei piccoli malintesi verranno eliminati durante la fase di distribuzione.
Tutto quello che devi fare è aprire un sito Web, fare clic sull’estensione, appuntare le tue idee facendo clic su qualsiasi elemento del sito Web e condividere un collegamento con tutte le modifiche al team di sviluppatori.

Link per scaricare l’estensione Heurio

https://cdn.embedly.com/widgets/media.html?src=https%3A%2F%2Fwww.youtube.com%2Fembed%2Fd4vMn3DRXQg%3Ffeature%3Doembed&display_name=YouTube&url=https%3A%2F%2Fwww.youtube.com%2Fwatch%3Fv%3Dd4vMn3DRXQg&image=https%3A%2F%2Fi.ytimg.com%2Fvi%2Fd4vMn3DRXQg%2Fhqdefault.jpg&key=a19fcc184b9711e1b4764040d3dc5c07&type=text%2Fhtml&schema=youtubeDimostrazione Heurio 2.0

5. Ridimensionatore di finestre

Questa estensione ridimensiona la tua finestra a qualsiasi risoluzione in modo da poter emulare qualsiasi dispositivo. È possibile impostare l’altezza e la larghezza per modificare la finestra del sito Web in una finestra particolare.
Tramite questa estensione è possibile visualizzare l’aspetto del sito Web su vari dispositivi anche senza ridimensionare il browser.

Link per scaricare il ridimensionatore di finestre

6. Tavolozza del sito

Questa estensione ti aiuta a estrarre tutti i colori dal sito web. Puoi persino esportare quei colori come immagine. La tavolozza del sito supporta i generatori di tavolozze. Puoi creare il link condivisibile. La tavolozza del sito è associata ad Adobe Swatch, coolors.co, ecc
. Un’estensione del browser per generare tavolozze complete. Uno strumento indispensabile per designer e sviluppatori front-end. Estrazione gratuita della combinazione di colori.

Collegamento per scaricare l’estensione della tavolozza del sito

https://cdn.embedly.com/widgets/media.html?src=https%3A%2F%2Fwww.youtube.com%2Fembed%2FNZKD3mk57bE%3Ffeature%3Doembed&display_name=YouTube&url=https%3A%2F%2Fwww.youtube.com%2Fwatch%3Fv%3DNZKD3mk57bE&image=https%3A%2F%2Fi.ytimg.com%2Fvi%2FNZKD3mk57bE%2Fhqdefault.jpg&key=a19fcc184b9711e1b4764040d3dc5c07&type=text%2Fhtml&schema=youtubeDemo della tavolozza del sito

7. Salva

Salvare le immagini da qualsiasi sito direttamente nelle tue bacheche su savee.it
Salvare tutte le immagini del tuo spazio di lavoro nella galleria e ti senti difficile nel trovare quelle immagini?
Questa estensione ti aiuta a memorizzare tutte le tue immagini, ispirazioni, ecc. in un unico posto e puoi accedere a queste immagini da qualsiasi luogo.

Link per scaricare l’estensione Savee

8. Sitovedi

SiteSee è una galleria curata di siti Web belli e moderni.
SiteSee sostituirà la tua scheda predefinita, trasformando la tua home page in una galleria simile a uno sfondo di bellissimi siti web. Con questa estensione, non perderai mai un aggiornamento. Ogni screenshot è cliccabile e ti porterà direttamente alla destinazione desiderata.
Attraverso questa estensione, consumo facilmente fantastiche ispirazioni senza nemmeno andare su nessun sito e cercarle.

Link per scaricare l’estensione Sitesee

Ecco come appare la mia scheda utilizzando Sitesee

9. Disimpila la Guida allo stile

Unstack Style Guide è un’estensione di Chrome che ti consente di acquisire in modo semplice ed efficiente tutte le informazioni di progettazione di cui hai bisogno da qualsiasi sito Web, inclusi la tavolozza del marchio, i colori del testo e i tipi di carattere.
Usando questa estensione puoi copiare le guide di stile con pochi clic ed esportarle.

Link per scaricare l’estensione della guida Ustack Stye

Disimpila l’estensione della Guida di stile

10. Controllo contrasto colore

Il contrasto è molto importante nell’interfaccia utente, la maggior parte dei principianti non sa come controllare il contrasto e quali sono i problemi che gli utenti dovranno affrontare a causa del contrasto. Quindi il controllo del contrasto del colore aiuta davvero molto facendoti sapere quali sono gli elementi che non soddisfano gli standard WCAG di livello AA.
Questa estensione non solo ti aiuta a controllare il contrasto, ma puoi anche salvare i colori, copiare il codice esadecimale dei colori.

Link per scaricare l’estensione Color Contrast Checker

Se vuoi un supporto o per approfondire questo discorso o per qualsiasi tipo di informazione contattaci sarà un’ottima occasione per conoscerci e creare valore per entrambi.

Grazie per aver letto questo contenuto

Emil Tonelli

Buon marketing!