Nützliche Tools zum Überprüfen der Designelemente einer Website (und zum Erlernen der feineren Details des Webdesigns)

Strumenti utili per controllare gli elementi di design di un sito web (e apprendere i dettagli più fini del web design)

⌛ Reading Time: 7 minutes

I siti Web attraenti sono, a modo loro, un mini-capolavoro dell’era di Internet. La personalizzazione può essere semplice o complessa come desideri, dalla modifica di un tema WordPress allo sviluppo dell’aspetto di un sito dall’inizio alla fine.

Successivamente, è probabile che ti imbatterai in elementi che ti piacciono e colori che desideri riutilizzare nei tuoi progetti. In questo articolo ti mostreremo gli elementi essenziali per convincere i siti Web a dirti tutto ciò che vuoi sapere.

Qual è il colore?

ColorZilla

Creato originariamente per Firefox, ColorZilla da allora è diventato disponibile su Cromo e anche i relativi browser.

WebInter-ColorZilla-InstallPage

Al momento dell’installazione, troverai un pulsante aggiuntivo nell’interfaccia utente per entrambi i browser. Questo pulsante ti dà la possibilità di scoprire il colore di qualsiasi cosa online. Ti renderai presto conto che ColorZilla fa molto di più che identificare i colori poiché include anche il supporto per le tavolozze.

WebInter-ColorZilla-Palettes

Qual è il carattere?

WhatFont? (Cromo)

WebInter-WhatFont-AddonPage

A rigor di termini, non è necessario il file WhatFont? estensione per scoprire il carattere di un sito Web, ma è di gran lunga il modo più rapido per farlo. L’alternativa sarebbe aprire il foglio di stile e andare a cercarlo.

WebInter-WhatFont-InstallPrompt

Installa WhatFont? e vedrai una nuova icona nell’interfaccia utente del browser. A meno che non riavvii completamente il browser, dovrai aggiornare la pagina in cui desideri identificare i caratteri. Dopo averlo fatto, fai clic sul pulsante nel tuo browser.

WebInter-WhatFont-ExitButton

Un nuovo pulsante dovrebbe apparire nell’angolo in alto a destra della pagina web e quando passi il mouse sul testo, dovrebbe essere visualizzato il nome del carattere. Facendo clic sul carattere verranno fornite ulteriori informazioni relative al dimensionamento. Identificherà anche gli altri caratteri nello “stack”, il che è conveniente se vuoi vedere quali alternative gli sviluppatori web considerano per il loro carattere tipografico.

WebInter-WhatFont-FontDetails

Font Finder (Firefox)

WebInter-FFinder-AboutAddon

Un’estensione esclusiva di Firefox allo stesso modo di WhatFont? di Chrome

WebInter-FFinder-InstallPrompt

Installa l’estensione e avrai una nuova opzione nel menu contestuale del tasto destro.

WebInter-FFinder-RightClick

Quando trovi qualcosa che desideri identificare, evidenzialo, quindi visualizza le opzioni disponibili. “Analizza selezione” ti dirà tutto ciò che avresti sempre voluto sapere.

WebInter-FFinder-FontDetails

Il dettaglio che fornisce è a dir poco sbalorditivo. Se il testo è contrassegnato come “(pila)”, sceglierà il primo carattere nella pila che hai installato. Gli stack di solito terminano con un termine generico, come “sans-serif” nell’esempio sopra. Nell’improbabile caso che uno degli altri caratteri nello stack non sia installato, tornerà alla faccia sans-serif predefinita del sistema.

WebInter-FFinder-WikipediaMessedUp

Puoi anche personalizzare gli elementi tramite l’opzione “Regola elemento”. Una volta che l’estensione ti chiede di inserire una famiglia di caratteri, puoi scatenarti. Nel nostro esempio abbiamo cambiato quasi tutti i caratteri su Wikipedia in qualcosa di diverso, creando il bizzarro mash-up visualizzato. Queste modifiche non sono permanenti e scompaiono quando ricarichi la pagina.

WebInter-FFinder-DisableFont1

“Sostituisci carattere (intero DOM)” consente di modificare ogni istanza di un carattere sulla pagina. Non sei un fan di Roboto (che usiamo come nostro principale sans-serif)? Evidenzia questa opzione, fai clic su “Roboto” dall’elenco dei caratteri presenti nella pagina e inserisci il nome del carattere che preferisci vedere. Anche in questo caso, non è permanente, ma ti consente di giocare con il design dei tuoi siti Web preferiti, anche se solo temporaneamente.

WebInter-FFinder-DisableFont2

WebInter-FFinder-DisableFont3

Misurazione del sito

Righello pagina (Chrome)

WebInter-PRuler-WebSTore

“Un righello? Veramente?” ti sentiamo chiedere. Righello di pagina è un righello dello schermo leggermente diverso da come suona. In effetti, capiremmo perfettamente anche qualsiasi scetticismo iniziale.

Il posizionamento è importante sul Web. Gli elementi di una pagina devono essere spaziati in questo modo, altrimenti non sono così attraenti come potrebbero essere. Sebbene questa informazione sia particolarmente esoterica da voler sapere, Page Ruler lo rende possibile.

WebInter-PRuler-NBKWiki

Installalo come faresti con qualsiasi altra estensione e avrai un altro pulsante nell’interfaccia utente del browser. Tieni presente che dovrai aprire una pagina web per provare l’estensione: non sarai in grado di utilizzare una delle pagine web integrate di Chrome per motivi di sicurezza.

WebInter-PRuler-ColorChoices

Dopo aver fatto clic sul pulsante, otterrai un’ulteriore striscia di informazioni direttamente sotto la barra degli indirizzi e puoi utilizzare il mouse per fare clic e trascinare una forma, le cui dimensioni verranno calcolate e visualizzate lungo la suddetta barra . Oltre a questo hai anche la possibilità di abilitare o disabilitare la griglia, sebbene possa aiutare con precisione.

WebInter-PRuler-ChangedColors

Se lo desideri, puoi anche cambiare il colore del rettangolo dal suo blu predefinito. Indipendentemente dal colore che scegli, aggiungerà automaticamente un grado di trasparenza in modo che tu possa vedere il contenuto sottostante.

WebInter-PRuler-ElementMOde

Page Ruler merita un po ‘di credito per avere un approccio particolarmente minimalista alle sue caratteristiche, racchiudendo tutte le informazioni essenziali in una piccola barra lungo la parte superiore della finestra.

MeasureIt (Firefox e Chrome)

WebInter-MeasureIt-AddonDetails

Misuralo esegue la stessa operazione di Page Ruler ed è disponibile sia per Firefox che per Chrome.

WebInter-MeasureIt-BrowserUI

Una volta installato, fai clic sul pulsante e sarai in grado di fare clic e trascinare per creare un rettangolo. Accanto al rettangolo ci sarà un conteggio dei pixel, il che significa che puoi ottenere misurazioni accurate per il posizionamento.

WebInter-MeasureIt-RulerAdvanced

Se sei preoccupato di ottenere le misurazioni corrette con il semplice mouse, puoi regolare le dimensioni dell’area evidenziata utilizzando i tasti freccia, rendendo la precisione molto più semplice di quanto sembri. Ti suggeriamo di controllare l’opzione “Area” nelle impostazioni; non cambia il modo in cui funziona il software e ti dà semplicemente un’idea dell’area occupata dal rettangolo che hai disegnato.

Opzioni WebInter-MeasureIt

Scommettiamo che rimarrai sorpreso quando vedrai quanti pixel ci sono sullo schermo e l’area che costituiscono quando viene evidenziata. Se non altro, dovrebbe assolutamente mettere in prospettiva il termine “schermo immobiliare”.

Conclusione

Ci vuole un po ‘per ottenere il meglio da queste estensioni, ma mettono alcune ottime informazioni a portata di mano. Li imparerai rapidamente, ma se trovi difficile sostituire i caratteri, ricorda che i nomi devono essere esatti. “Comic Sans” non funzionerà, mentre “Comic Sans MS” (come appare in Office) lo farà.

Ricorda che tutte queste estensioni richiedono questo tipo di accuratezza nelle informazioni che fornisci loro e sarai ben attrezzato per utilizzarle al meglio.